Bootstrap 5 Media Breakpoints (Detailed Explanations)

Bootstrap 5 grids are designed to work on multiple screen sizes using media breakpoints. A breakpoint is the width of the screen where the layout of the website changes.

There are 6 breakpoints in Bootstrap 5 based on common screen sizes which allows to easily create responsive designs. These breakpoints are used to adjust the width of the columns and rows.

Breakpoints ensures your website looks good on any device from mobile phones to large desktop screens. Let’s learn about media breakpoints in detail.

What are Bootstrap 5 Media Breakpoints

Media breakpoints in Bootstrap 5 are the predefined screen widths that you can use to adjust the layout of a webpage. Bootstrap uses these breakpoints to change the number of columns an element should span depending on the screen size.

Available Breakpoints in Bootstrap 5

Understanding Breakpoints with Examples

The basic structure of the grid system is built with .row and .col-* elements. The columns can automatically adjust to screen sizes based on the breakpoint classes you apply.

Output

Explanation

• .col-6: The column takes up 6/12 (50%) of the container on extra smaller devices (less then 576px).
• .col-md-6: on medium devices (>=768px), each column takes up 4/12 (33.33%) of the container.
• .col-lg-3: for large devices (>=992px), each column takes up 3/12 (25%) of the container.

Detailed Explanation of Each Breakpoints

1. Extra Small (.col)

• Class: .col
• Breakpoints: For devices less than 576px in width (e.g. small smartphones)
• Description: It is used to define how columns behave in very small screen devices. It applies to devices with screen width of less than 576px.

Output

• On extra small screens (less than 576px), both column will take 50% width

2. Small (.col-sm)

• Class: col-sm
• Breakpoints: For devices 576px and up in width (e.g. large smartphones)
• Description: The col-sm class is used to define how columns behave on small screen devices. It applies to devices with screen width of at least 576px.

Output

• On small screens (>= 576px), each column takes 50% of the container’s width.

3. Medium (.col-md)

• Class: col-md
• Breakpoints: For devices 768px and up in width (e.g. Tablets and small desktops)
• Description: The col-sm class adjusts the column widths on medium sized screens. The default behaviour applies to all devices with screen width of at least 768px unless you define another breakpoint.

Output

• On medium screens (>= 768px), each column take up 50% of the container’s width.

3. Large (.col-lg)

• Class: col-lg
• Breakpoints: For devices 992px and up in width (e.g. large desktops)
• Description: The col-sm class applies to larger desktops with wider monitors with screen width of at least 992px.

Output

• On large screens (>= 992px), each column take up 25% of the container’s width.

4. Extra Large (.col-xl)

• Class: col-xl
• Breakpoints: For devices 1200px and up in width (e.g. large laptops and desktops)
• Description: The col-xl class is ideal for large screens and ensures your layout adjusts to take advantage of the extra width on such sized devices.

Output

• On extra large screens (>= 1200px), each column take up 16.66% of the container’s width.

5. Extra Extra Large (.col-xxl)

• Class: col-xxl
• Breakpoints: For devices 1400px and up in width (e.g. very large screens like ultra wide monitors.)
• Description: This class allows even more precise control over layouts on very large screens.

Output

• On ultra-large screens (>= 1400px), each column take up 8.33% of the container’s width.

4. Using Multiple Breakpoints Together

If you want to create more flexible layouts, you can combine multiple breakpoints as given below:

Output

Explanation

• col-12: On extra small screens (less than 576px), each column will take 100% of the container’s width.
• col-md-6: On medium screens (>=768px), each column will take 50% of the container’s width.
• col-lg-4: On large screens (>=992px), each column will take 33.33% of the container’s width.
• col-xl-4: On extra large screens (>=1200px), each column will take 25% of the container’s width.

Complete Breakpoint Layout Example

Conclusion

Using Bootstrap 5 grid breakpoints, you can create more flexible and responsive layouts that adapt to all screen sizes. by using appropriate breakpoints, you can ensure your website works seamlessly across all devices, from mobile phones to large desktop monitors.