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