Bootstrap 5 GridLesson 43Free preview

BS5 Grid XSmall

This lesson is part of Bootstrap · All levels

Summary

Column classes without breakpoint prefixes such as .col-6 apply to all screen sizes, including the smallest screen (extra small). This is the basic mobile-first layout: first, define the display for the small screen, then add the larger breakpoint as needed. That way the page stays neat on the phone.

Key points

Without active breakpoints at all screen sizes.
The values 1 through 12 determine the width of the part being used.
It's useful for the basic layout of the mobile-first version.
It can be combined with a large breakpoint such as .col-lg-8.
Xs is the base point (width 0) in a grid system.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.