Here are a few examples of how you can use the grid system in Bootstrap 5 (BS5) to create different layouts:

1. Basic Grid Layout:

html
<div class="container">
    <div class="row">
        <div class="col">
            <!-- Content for the column -->
        </div>
        <div class="col">
            <!-- Content for the column -->
        </div>
        <div class="col">
            <!-- Content for the column -->
        </div>
    </div>
</div>

In this example, the container holds a row with three equal-width columns (`col`). The columns will automatically adjust to fit the available width of the container.

2. Responsive Grid Layout:

html
<div class="container">
    <div class="row">
        <div class="col-12 col-md-6 col-lg-4">
            <!-- Content for the column -->
        </div>
        <div class="col-12 col-md-6 col-lg-4">
            <!-- Content for the column -->
        </div>
        <div class="col-12 col-md-6 col-lg-4">
            <!-- Content for the column -->
        </div>
    </div>
</div>

In this example, the layout adapts to different screen sizes. The columns will stack vertically on extra small and small screens (`col-12`), display two columns per row on medium screens (`col-md-6`), and show three columns per row on large screens (`col-lg-4`).

3. Offset Grid Layout:

html
<div class="container">
    <div class="row">
        <div class="col-md-6">
            <!-- Content for the column -->
        </div>
        <div class="col-md-6 offset-md-3">
            <!-- Content for the column with offset -->
        </div>
    </div>
</div>

In this example, the first column spans six grid columns on medium screens (`col-md-6`), while the second column is also six grid columns wide but includes a three-column offset on medium screens (`offset-md-3`).

These examples demonstrate the basic usage of the grid system in Bootstrap 5. Remember to adjust the column classes, breakpoints, and content according to your specific needs. For more advanced grid layouts and options, consult the official Bootstrap documentation, as it provides comprehensive guidance on utilizing the grid system effectively.

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