CSS media queries can be used to apply CSS properties based on the width of the screen to create responsive page behaviour.
Using media queries and mixins, Bootstrap provides classes which apply styles at five different screen sizes:
- xs (extra small)
- sm (small)
- md (medium)
- lg (large)
- xl (extra large)
You can define these breakpoints within the Bootstrap library by modifying Bootstrap’s variable.
You can also create your own classes using Bootstrap media-breakpoint mixins.