Each column is defined by a .col-*
class, where *
is a number from 1 to 12, representing the width of the column as a percentage of the total row width. For example, .col-6
would create a column that is 50% of the total row width. You can also use classes such as .col-sm-*
and .col-md-*
to specify different column widths for different screen sizes.
Rows are defined by a .row
class, and they are used to hold the columns. Each row must have a total of 12 columns or less, otherwise, it will overflow.
Here is an example of how you would use the grid system to create a layout with two equal-width columns:
<div class="container"> <div class="row"> <div class="col-6">Column 1</div> <div class="col-6">Column 2</div> </div> </div>
You can also use classes such as .offset-*
to add space between columns, .align-self-*
to change the alignment of a single column and .order-*
to change the order of columns for different screen sizes.
It's worth noting that Bootstrap 4 introduced a new grid system that uses a flexbox layout, which allows for more flexibility and control over the grid.
Social Plugin