Article Categories

Selected Reading

Difference between CSS Grid and Bootstrap

Bootstrap CSS Differences

The majority of the time, we will use CSS Grid in situations where we have strict requirements for the layout and want our content to flow on the page in accordance with those requirements.

Bootstrap's grid system is based on the CSS Flexbox layout system, while the CSS Grid was influenced by print-based design. Bootstrap is a direct competitor to CSS Grid, and a significant comparison can be made between the two frameworks' respective grid layout systems.

If we want to have control over the layout in either the row or column direction, then we should use the Flexbox-based grid that Bootstrap provides. On the other hand, if you want control over the layout on both rows and columns, you should use CSS Grid as your solution.

What is CSS Grid?

A series of vertical and horizontal lines that intersect is what is meant to be understood as a grid. CSS Grid Layout provides a way to divide a page into distinct sections using rows and columns.

The CSS Grid Layout system eliminates the need for floats and positioning, simplifying web page design. The grid layout gives us a way to make grid structures that are written in CSS instead of HTML.

The CSS Grid Layout is particularly effective when it comes to splitting a page up into key sections or establishing the relationship, in terms of size, position, and layer, between the components of an HTML-based control.

Example: CSS Grid Layout

<!DOCTYPE html>
<html>
<head>
<style>
    .grid_container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 100px);
        gap: 10px;
        padding: 20px;
    }
    
    .grid_items {
        background-color: #4CAF50;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        border-radius: 5px;
    }
</style>
</head>
<body>
    <div class="grid_container">
        <div class="grid_items">01</div>
        <div class="grid_items">02</div>
        <div class="grid_items">03</div>
        <div class="grid_items">04</div>
        <div class="grid_items">05</div>
        <div class="grid_items">06</div>
        <div class="grid_items">07</div>
        <div class="grid_items">08</div>
        <div class="grid_items">09</div>
    </div>
</body>
</html>

A 3x3 grid of green boxes labeled 01-09 appears, evenly spaced with gaps between them.

It functions in a manner that is similar to that of a table in that it lets the user arrange the items into rows and columns. However, in contrast to tables, the CSS grid makes designing a layout really simple. By using the grid-template-rows and grid-template-columns properties, we are able to specify the columns and rows that appear on the grid.

What is Bootstrap?

When it comes to designing a website that is responsive and user-friendly on mobile devices, the HTML, CSS, and JavaScript framework known as Bootstrap is by far the most popular option. It is a free, open-source front-end framework that makes the process of developing websites simpler and more efficient.

It contains design templates based on HTML and CSS for typography, forms, buttons, tables, navigation, modals, image carousels, and many other components. In addition to that, it supports plugins written in JavaScript. It makes it easier for you to build designs that are responsive.

What is Bootstrap Grid?

The grid structure that Bootstrap uses is responsive, which means that the columns will rearrange themselves based on the screen size If the content is structured in three columns, it may appear better on a large screen; yet, if the content elements are stacked on top of each other, it may look better on a small screen.

There are four classes included in the Bootstrap grid system

xs (for phones screens less than 768px wide)
sm (for tablets screens equal to or greater than 768px wide)
md (for small laptops screens equal to or greater than 992px wide)
lg (for laptops and desktops screens equal to or greater than 1200px wide)

Example: Bootstrap Grid Layout

<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
    .custom-col {
        background-color: #007bff;
        color: white;
        padding: 15px;
        text-align: center;
        margin-bottom: 10px;
        border-radius: 5px;
    }
</style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-9 col-md-7 custom-col">col-9 col-md-7</div>
            <div class="col-3 col-md-5 custom-col">col-3 col-md-5</div>
        </div>
        
        <div class="row">
            <div class="col-6 col-md-10 custom-col">col-6 col-md-10</div>
            <div class="col-6 col-md-2 custom-col">col-6 col-md-2</div>
        </div>
        
        <div class="row">
            <div class="col-6 custom-col">col-6</div>
            <div class="col-6 custom-col">col-6</div>
        </div>
    </div>
</body>
</html>

Three rows of blue columns with responsive widths appear. The layout changes based on screen size, with different column proportions on mobile vs desktop.

Key Bootstrap grid principles

For appropriate alignment and padding, rows must be contained inside a .container (fixed-width) or .container-fluid (full-width).
Create horizontal column groups by using rows.
Only columns may be immediate children of rows, and content should be placed inside columns.
Grid layouts may be rapidly created using predefined classes like .row and .col-sm-4.
Padding between columns creates gutters (space between columns). Negative margin on .rows is used to offset the padding in the first and last columns.
Grid columns are made by defining the number of columns you want to span from the available 12 options. Three equal columns, for example, might be represented by three .col-sm-4.