Responsive Breakpoints
- By default, there are 3 responsive breakpoints available:
- mobile (sm): 576px
- tablet (md): 768px
- desktop (lg): 992px
To make a class only apply at a certain breakpoint, append the suffix _sm, _md, or _lg to the class name.
For example, consider the following set of columns: they start out at full width when the screen size is less than the small breakpoint, and as the screen increases in size, their width is reduced. On mobile screens, the columns will be stacked. On tablet screens, there will be two rows of half width columns. On desktop screens, all four columns will fit on one row. Try resizing the screen to see the effect.
.container
.row
.col-12 .col-6_md .col-3_lg
.col-12 .col-6_md .col-3_lg
.col-12 .col-6_md .col-3_lg
.col-12 .col-6_md .col-3_lg
The use of responsive classes can be used to build websites that look good on any screen size.
The responsive suffixes are typically used on layout classes, but can be used on any classes available. Here is an example of a block of text that changes color and size as the screen size changes:
Responsive classes are NEAT