In Bootstrap 5 (BS5), the grid system provides responsive classes for different breakpoints, including a "medium" breakpoint. The "medium" breakpoint corresponds to the "md" class in BS5. Here's an example of how you can use the BS5 grid system for the medium breakpoint:

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

In the example above, each column is assigned the classes "col-12" and "col-md-6". The "col-12" class ensures that the columns span the full width of the container on all screen sizes. The "col-md-6" class indicates that each column should occupy 6 grid columns out of the available 12 columns starting from the medium breakpoint (md) and above. This means that on screens smaller than the medium breakpoint, the columns will stack vertically and span the full width of the container.

You can adjust the column widths and define different layouts for other breakpoints by using additional classes such as "col-sm-*" for small screens, "col-lg-*" for large screens, and so on. The grid system in Bootstrap 5 allows you to create responsive layouts by applying appropriate classes for each desired breakpoint.

About the Author

Silan Software

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