Bootstrap Responsive Design
Creating responsive layouts with Bootstrap
Breakpoints
xs # <576px (extra small)
sm # ≥576px (small)
md # ≥768px (medium)
lg # ≥992px (large)
xl # ≥1200px (extra large)
xxl # ≥1400px (extra extra large)
Responsive Display
.d-none .d-md-block # hide on mobile, show on tablet+
.d-block .d-md-none # show on mobile, hide on tablet+
Responsive Text
.text-center .text-md-start # center on mobile, left on tablet+
Responsive Spacing
.mt-3 .mt-md-5 # different margin on different screens
Responsive Columns
.col-12 .col-md-6 .col-lg-4 # full width on mobile, half on tablet, third on desktop