Bootstrap 5 Breakpoints Available Breakpoints

Bootstrap 5 provides a predefined set of different available breakpoints to build the responsive utilities which help in quickly creating responsive layouts, along with defining the range of screen size or viewport size. There are 6 default breakpoints that are facilitated by Bootstrap, which are known as grid tiers. Every range has a class infix and it can be used to add custom responsiveness in layouts like in a grid layout, for instance, col-md-5 which means the col will take up 5 sections when the screen size is or exceeds md. The breakpoints, class infixes, and dimensions with respect to each other are given in the table below:

These breakpoints are designed to specifically contain 12 sections perfectly and the dimensions can be changed in the Sass map of the _variable.scss stylesheet.

Bootstrap 5 Breakpoints Available breakpoints classes: There are no used classes we just need to use the class infixes wherever required. 

Example 1: The code example below displays how the available breakpoints can be applied in making a responsive nested grid.

Output:

Example 2: The code below demonstrates the usage of the available breakpoints in a grid and implementing it inside a modal.

Output:

Reference:https://getbootstrap.com/docs/5.0/layout/breakpoints/#available-breakpoints