Row Class:
row: The row class is used to create a horizontal group of columns. It acts as a container for col classes.
<div class="row"> <div class="col-6">Column 1</div> <div class="col-6">Column 2</div> </div>
This will create two equal-width columns that take up 50% of the container width.
Column Classes:
- col-{n}: Defines a column that will take up a specific number of grid units. The value n can range from 1 to 12, where 12 is the full width.
- col-sm-{n}: Targets devices with a screen width of 576px or larger (small screens).
- col-md-{n}: Targets medium devices (screen width of 768px or larger).
- col-lg-{n}: Targets large devices (screen width of 992px or larger).
- col-xl-{n}: Targets extra-large devices (screen width of 1200px or larger).
- col-12: This class ensures that the column takes up the full width of the container, regardless of screen size.
col-12
col-6
col-6
col-5
col-5
col-2
col-5
col-7
col-4
col-4
col-4
col-4
col-3
col-3
col-2
col-3
col-3
col-3
col-3
col-2
col-2
col-2
col-2
col-2
col-2
1
1
1
1
1
1
1
1
1
1
1
1
Responsive Column Sizing:
You can mix these classes to create columns that adjust based on the screen size. For example, col-sm-6 col-md-4 col-lg-3 will adjust the column width depending on the device size.
col-sm-6 col-md-4 col-lg-3 col-xxl-12