BS4 Grid Basic
Bootstrap 4 Grid System
The flexbox-built Bootstrap grid system supports up to 12 columns on a page.
You can arrange the 12 columns together to create bigger columns if you don’t want to utilize them all at once:
The columns in the responsive grid system will dynamically reorganize based on the size of the screen.
Verify that the total equals 12 or less (you don’t have to use all 12 of the available columns).
Grid Classes
- .col- (extra small devices – screen width less than 576px)
- .col-sm- (small devices – screen width equal to or greater than 576px)
- .col-md- (medium devices – screen width equal to or greater than 768px)
- .col-lg- (large devices – screen width equal to or greater than 992px)
- .col-xl- (xlarge devices – screen width equal to or greater than 1200px)
Basic Structure of a Bootstrap 4 Grid
The fundamental layout of a Bootstrap 4 grid is as follows:
<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<!-- Or let Bootstrap automatically handle the layout -->
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
First example: create a row (<div class=”row”>). The desired number of columns (tags with relevant data) should then be added .col-*-* classes. The responsiveness—sm, md, lg, or xl—is represented by the first star (*), and a number—which should add up to 12 for each row—is shown by the second star.
Second example: to create equal width columns, let bootstrap handle the layout rather than appending a number to each col. Each of the two “col” components has a 50% width. Three columns equals 33.33% of a col’s width. 4 cols = 25% of the width, etc. For responsive columns, you may also use .col-sm|md|lg|xl.
Examples of simple Bootstrap 4 grid layouts are gathered here.
Three Equal Columns
The example that follows demonstrates how to make three columns of identical width for all devices and screen widths:
Example
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
Responsive Columns
Four equal-width columns can be created, starting with tablets and scaling to extra-large desktops, as demonstrated in the example below. In mobile devices or screens with a width of less than 576 pixels, the columns will automatically arrange themselves one above the other:
Example
<div class="row">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
</div>
Two Unequal Responsive Columns
The example below demonstrates how to achieve two columns of varying widths that begin at tablets and expand to huge additional desktops:
Example
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>
Tip: Bootstrap 4 grids are covered in more detail later in this lesson.
