Bootstrap Responsive Breakpoints

Add a breakpoint to a column class to say where it should apply: col-sm-, col-md-, col-lg-, col-xl-. Below that width the columns stack. This one grid is 1 column on phones, 2 on tablets and 4 on desktops.

Examplehtml

Open in editor »

The breakpoints are: sm 576px, md 768px, lg 992px, xl 1200px and xxl 1400px. Bootstrap is mobile-first: styles without a breakpoint apply to every size, and a breakpoint adds changes for larger screens. g-2 sets the gutter (gap) between columns.

Quick check

What does col-md-6 mean?

Half width from the md breakpoint upSix columns on every screenMedium margin of 6px

Finish the quick check (and any code exercise) to complete this lesson, or mark it done yourself.

Tip: use the left and right arrow keys to move between lessons.