Bootstrap 5 provides a powerful grid system that allows you to create responsive layouts with ease. The grid system is based on a 12-column layout, which you can customize to fit your design needs. Here are the basics of using the Bootstrap 5 grid system:

1. **Containers**: Wrap your grid layout within a container. Containers provide a fixed or fluid width and help center and align the grid content. Use either the `.container` class for fixed-width containers or the `.container-fluid` class for full-width containers.

2. **Rows**: Inside the container, create a row using the `.row` class. Rows act as horizontal containers for columns and ensure proper alignment and spacing.

html
<div class="container">
    <div class="row">
        <!-- Columns go here -->
    </div>
</div>

3. **Columns**: Divide the row into columns using the `.col` class. Specify the desired column width using the `col-{breakpoint}-{number}` syntax, where `{breakpoint}` represents the screen size and `{number}` represents the number of columns to occupy. Bootstrap supports various breakpoints, such as `sm` (small), `md` (medium), `lg` (large), `xl` (extra-large), and `xxl` (extra-extra-large).

html
<div class="container">
    <div class="row">
        <div class="col-sm-6">Column 1</div>
        <div class="col-sm-6">Column 2</div>
    </div>
</div>

In the example above, the row is divided into two equal-width columns (6 columns each) on small screens and larger. The number of columns can be adjusted based on your layout requirements.

4. **Responsive Column Ordering**: Bootstrap's grid system allows you to control the order of columns using responsive classes. Use the `.order-{breakpoint}-{number}` class to specify the desired order of columns at different breakpoints.

html
<div class="container">
    <div class="row">
        <div class="col-sm-6 order-sm-2">Column 2</div>
        <div class="col-sm-6 order-sm-1">Column 1</div>
    </div>
</div>

In this example, the columns are initially ordered as Column 1 first and Column 2 second. However, on small screens and larger, the order is reversed using the `.order-sm-2` and `.order-sm-1` classes.

These are the basic concepts of the Bootstrap 5 grid system. You can create more complex layouts by nesting rows and columns, combining different column sizes, and utilizing offset classes for spacing. Make sure to refer to the Bootstrap documentation for more detailed examples and additional options available in the grid system.

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