Bootstrap Breakpoints

Breakpoints are customizable widths that determine how your responsive layout behaves across device or viewport sizes in Bootstrap. They are the triggers for layout changes.

1. Building Blocks of Responsive Design

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

2. Media Queries

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

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 CSS, improves rendering time, and provides a great experience for visitors.

Available Breakpoints

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

#	Breakpoint	Class infix	Dimension
1	Extra 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.