Grid Layout in Bootstrap 4

Bootstrap4 grid is a 2-D structure of intersecting lines which can be both vertical as well as horizontal, which is used for structuring the content.

The grid system in Bootstrap is built with flexbox that is broken down into twelve column-like segments across the page. But there are situations where users do not want to use the 12 column structure and so the column grouping, i.e. the grid structure can be formed in various other ways as well.

Here is the diagram which shows the various other formations of these Bootstrap grids:

col-8
col-4
col-4
col-4
col-4
col-9
col-3
col-12
col
col
col
col
col
col
col
col
col
col
col
col

So, what does this grid system do? The grid system will adjust its content where the columns will get automatically rearrange based on the screen size. That is what works internally when a responsive page is created. It is not mandatory to make use of all the 12 columns while developing the page. But, the developers had to make sure that the sum of grids based on which they are creating the page design should have to be twelve or less.

Bootstrap4 classes of Grid

Bootstrap 4 provides five classes of the grid system. These are:

Class NameDescription
col-It is for other small devices where the screen size is less than 576px.
col-sm-It is for small devices where the screen size is equal to or greater than 576px.
col-md-It is for medium devices where the screen width equal to or greater than 768px.
col-lg-It is for large devices where the screen width equal to or greater than 992px.
col-xl-It is for extra large devices where the screen width equal to or greater than 1200px.

In Bootstrap 4 "row" must be placed inside a "container" or "container-fluid", and "col" should be placed inside of the "rows", for proper padding and alignment.

Example:
<div class="container">
<div class="row">
    <div class="col"> ... . </div>
    <div class="col"> ... . </div>
    <div class="col"> ... . </div>
</div>
</div>

A Simple HTML to Display the Implementation of Bootstrap Grid:

Example:
</div class="container">
    </div class="row">
        </div class="col-sm-12 col-md-9 col-lg-9 col-xl-9 bg-contain bg-white border mb-4">
            </h1 class="h2 px-3 m-0 txt-rblue font-weight-semibold mb-4">Loan For Your Education<//h1>
            </div class="text-size px-3 bg-white-transparent">
                </p>Exclusive Funding your education could never be this easy. Online applications, instant offer and get maximum funding for your education with loans of LoanCap.<//p>
                </p>We have worked out an exclusive deal for you with our partner LoanCap.<//p>
                </ul>
                    </li>Funding up to 100%<//li>
                    </li>Fast Loan Appraval<//li>
                    </li>Instant Offer<//li>
                <//ul>
            <//div>
            </div class="text-center pb-3">
                </button type="button" name="submit_button" class="btn btn-primary radius-full shadow-small" ng-disabled="processing">Apply Now<//button>
            <//div>
        <//div>
        </div class="col-sm-12 col-md-3 col-lg-3 col-xl-3 d-none d-sm-block border">
            </div class="text-center">Advertisment<//div>
        <//div>
    <//div>
<//div>

Scroll Back to Top