Certainly! Here are examples of using the grid system in Bootstrap 5:
Example 1: Equal-width Columns
<div class="container">
<div class="row">
<div class="col">Column 1</div>
<div class="col">Column 2</div>
<div class="col">Column 3</div>
</div>
</div>In this example, we have three columns with equal width. Each column has the class “col”, which automatically divides the available space equally among them.
Example 2: Different Column Widths on Different Devices
<div class="container">
<div class="row">
<div class="col-12 col-md-6">Column 1</div>
<div class="col-12 col-md-6">Column 2</div>
</div>
</div>In this example, we have two columns. On extra small (xs) and small (sm) devices, both columns take up the full width (col-12). On medium (md) devices and above, the columns have a width of 6 each (col-md-6), resulting in a side-by-side layout.
Example 3: Responsive Column Ordering
<div class="container">
<div class="row">
<div class="col-md-4">Column 1</div>
<div class="col-md-8">Column 2</div>
</div>
</div>In this example, on medium (md) devices and above, Column 1 takes up 4 columns and Column 2 takes up 8 columns, resulting in a side-by-side layout. However, on extra small (xs) and small (sm) devices, the order is automatically reversed, and Column 2 appears above Column 1.
These examples demonstrate the basic usage of the grid system in Bootstrap 5. By combining containers, rows, and columns with different classes, you can create flexible and responsive layouts for your webpages. Remember to refer to the official Bootstrap documentation for a more comprehensive understanding of the grid system and its available options.