Bootstrap 4 grid is a 2D structure of intersecting lines, which can be both vertical and horizontal, and is used to structure the content.



The grid system in Bootstrap 4 is created with CSS Flexbox and divided into a maximum of twelve column-like segments on a webpage. But there are also situations where a webpage does not require a 12-column structure, then column grouping, that is, a grid structure, can be created in many other ways.

Here's an example that shows the different multi-column grid systems that can be created in Bootstrap 4:

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 automatically adjusts and rearranges the columns based on the screen size. That is what responsive design does. It is not mandatory to use all 12 columns while developing a webpage. Developers should ensure that the number of grids should be twelve or less.

Bootstrap4 Classes of Grid

Bootstrap 4 provides five classes of grid systems. These are:

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

In Bootstrap 4, a .row class must be placed inside a .container class or .container-fluid class and .col class should be placed inside a .row class 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 sample HTML code snippet  to demonstrate 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>


Found This Page Useful? Share It!
Get the Latest Tutorials and Updates
Join us on Telegram