Bootstrap Breakpoints

Breakpoints are the triggers in Bootstrap for how your layout responsive changes across device or viewport sizes.

1. Breakpoints are the building blocks of responsive design.

Use them to control when your layout can be adapted at a particular viewport or device size.

2. Use media queries to architect your CSS by breakpoint.

Media queries are a feature of CSS that allow you to conditionally apply styles based on a set of browser and operating system parameters. Bootstrap most commonly use min-width in media queries.

3. Mobile first, responsive design is the goal.

Bootstrap’s CSS aims to apply the bare minimum of styles to make a layout work at the smallest breakpoint, and then layers on styles to adjust that design for larger devices. This optimizes your CSS, improves rendering time, and provides a great experience for your visitors.

Available Breakpoints

Bootstrap includes six default breakpoints, sometimes referred to as grid tiers, for building responsively.

# Breakpoint Class infix Dimension
1 X-Small - < 576 px
2 Small sm ≥ 576 px
3 Medium md ≥ 768 px
4 Large lg ≥ 992 px
5 Extra Large xl ≥ 1200 px
6 Extra Extra Large xxl ≥ 1400 px

Each breakpoint is chosen to comfortably hold containers whose widths are multiples of 12.

Star ActiveStar ActiveStar InactiveStar InactiveStar Inactive