Bootstrap5 Grid XXL

In September 2021, Bootstrap 5 (BS5) does not include an "xxl" breakpoint in its grid system. The available breakpoints in Bootstrap 5 are:


- Extra small (xs): Up to 576px
- Small (sm): 576px and up
- Medium (md): 768px and up
- Large (lg): 992px and up
- Extra large (xl): 1200px and up


If you require a custom breakpoint for screens larger than the "xl" breakpoint, you can use CSS media queries to define your own breakpoint and create specific styles for that range. Here's an example of how you can achieve this:

html
<div class="container">
    <div class="row">
        <div class="col-12 col-xl-6 custom-col-xxl">
            <!-- Content for the column -->
        </div>
        <div class="col-12 col-xl-6 custom-col-xxl">
            <!-- Content for the column -->
        </div>
        <!-- Add more columns as needed -->
    </div>
</div>

In the example above, we still use the "col-xl-6" class for the extra-large breakpoint, but we also add a custom class "custom-col-xxl" to apply additional styles specific to your custom "xxl" breakpoint. You would then define the styles for the "custom-col-xxl" class using CSS media queries to target the desired screen size range.


Please note that adding custom breakpoints and styles requires additional CSS work beyond what's provided by Bootstrap's standard grid system. It's important to test and ensure proper responsiveness across different devices and screen sizes.

Keep in mind that Bootstrap is a dynamic framework. For the most up-to-date information and features of Bootstrap, go through the official Bootstrap documentation.



About the Author



Silan Software is one of the India's leading provider of offline & online training for Java, Python, AI (Machine Learning, Deep Learning), Data Science, Software Development & many more emerging Technologies.

We provide Academic Training || Industrial Training || Corporate Training || Internship || Java || Python || AI using Python || Data Science etc





 PreviousNext