Tutorials › Bootstrap 5 › Bootstrap Breakpoints

Bootstrap Breakpoints

4 min read Quiz at the end

Use breakpoints (sm/md/lg/xl/xxl) and d-none/d-md-block to show/hide on different screen sizes.

Breakpoints

Name	Prefix	Min Width
Extra small	xs (none)	< 576px
Small	sm	≥ 576px
Medium	md	≥ 768px
Large	lg	≥ 992px
Extra large	xl	≥ 1200px
XXL	xxl	≥ 1400px

<!-- Visible only on specific sizes -->
<div class="d-none d-md-block">Hidden on mobile</div>
<div class="d-md-none">Mobile only</div>
<div class="d-none d-sm-block d-lg-none">Small to medium only</div>

← Bootstrap Grid System Next: Typography →

Topic Quiz · 3 questions

Test your understanding before moving on

1. At which min-width does the md breakpoint activate?

💡 The md breakpoint is 768px and above.

2. Which class hides an element on all screen sizes?

💡 d-none sets display:none hiding the element on all screen sizes.

3. Which class shows an element only on md+ screens?

💡 d-none hides by default; d-md-block restores display:block from md up.

Quick Access

Bootstrap Breakpoints

Breakpoints

Test your understanding before moving on