Breakpoints

Most utility and component classes will have responsive classes. Using specific breakpoint constants, we create max-width media queries represented in conditional prefixes. These prefixed classes allow you to apply a style or property within a specific breakpoint.

Classes

To help keep prefixes concise, we use abbreviations. This syntax is used consistently across all responsive classes. As the viewport size grows, you can change an elements properties. For example, you can set an element to display normally, but be hidden at smaller sizes: .d-block .sm:d-none.

Class Prefix Media Query Description
.xl:{class} max-width: 1264px The class is applied on extra large browser widths and below.
.lg:{class} max-width: 980px The class is applied on large browser widths and below.
.md:{class} max-width: 640px The class is applied on medium browser widths and below.
.sm:{class} max-width: 480px The class is applied on small browser widths and below.

Note: These breakpoints may change.

Usage