453 reads

Bootstrap vs Media Queries: How to Make a Page Responsive

by Ritta BuyakiDecember 18th, 2020

Too Long; Didn't Read

Using Bootstrap to make a page responsive saves one so much time and memory space. Let's see how this is possible, I have created a dummy web page that has four grids as shown below:

Company Mentioned

featured image - Bootstrap vs Media Queries: How to Make a Page Responsive

Using Bootstrap to make a page responsive saves one so much time and memory space. Let's see how this is possible.

I have created a dummy web page that has four grids as shown below:

Below is an image showing how it will look like on medium screens:

While on small screen sizes, this is how it will look like:

Want to know the magic? Here is the code:

<main class="container-fluid">
        <div class="row">
            <div class="col-lg-4 col-md-3 col-12 p-2 border">
                Lorem ipsum dolor sit amet, te elit porro offendit sea. Quo ad nemore volutpat percipitur. An vero
                salutandi mea, vel homero meliore principes ex.
                Alii euismod cum an, vix feugait prodesset appellantur id. Nominavi disputando et sed, nihil persius
                detraxit usu cu. His te eius animal...
                <!--sententiae, an debitis eleifend vulputate sit, eum et ferri perfecto iudicabit. Sonet patrioque pri an,
                vim ea conceptam reprehendunt. Ut cum invidunt tincidunt, an eius essent torquatos est. Mel id rebum
                facete omnium, vis id ipsum legimus, mel case deserunt invenire ea. Elitr civibus similique est in, ea
                eum viderer adipiscing. -->
            </div>
            <div class="col-lg-4 col-md-3 col-12 text-primary p-2 border">
                Lorem ipsum dolor sit amet, te elit porro offendit sea. Quo ad nemore volutpat percipitur. An vero
                salutandi mea, vel homero meliore principes ex.
                Alii euismod cum an, vix feugait prodesset appellantur id. Nominavi disputando et sed, nihil persius
                detraxit usu cu. His te eius animal...
            </div>
            <div class="col-lg-4 col-md-3 col-12 p-2 border">
                Lorem ipsum dolor sit amet, te elit porro offendit sea. Quo ad nemore volutpat percipitur. An vero
                salutandi mea, vel homero meliore principes ex.
                Alii euismod cum an, vix feugait prodesset appellantur id. Nominavi disputando et sed, nihil persius
                detraxit usu cu. His te eius animal...
            </div>
            <div class="col-lg-4 col-md-3 col-12 text-danger p-2 border mt-1">
                Lorem ipsum dolor sit amet, te elit porro offendit sea. Quo ad nemore volutpat percipitur. An vero
                salutandi mea, vel homero meliore principes ex.
                Alii euismod cum an, vix feugait prodesset appellantur id. Nominavi disputando et sed, nihil persius
                detraxit usu cu. His te eius animal...
            </div>
        </div>
    </main>

On the other hand, if I was to use CSS media queries, I would have to use the codes below for different screen sizes. Below is the code for the large screen size:

.main-content {
    display: grid;
    grid-template-columns: repeat(3, 2fr);
    grid-template-rows: repeat(2, 350px);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}

.main-content1 {
    grid-row: 1;
    grid-column: 1;
    border: 1px solid black;
    padding: 10px;
}

.main-content2 {
    grid-row: 1;
    grid-column: 2;
    color: blue;
    border: 1px solid black;
    padding: 10px;
}

.main-content3 {
    grid-row: 1;
    grid-column: 3;
    border: 1px solid black;
    padding: 10px;
}

.main-content4 {
    grid-row: 2;
    grid-column: 1;
    color: red;
    border: 1px solid black;
    padding: 10px;
}

The image below shows how it will look like on large screen sizes:

Below is the media query for the medium screen size:

@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .main-content {
        display: grid;
        grid-template-columns: repeat(4, 2fr);
        grid-template-rows: repeat(4, 650px);
        grid-column-gap: 10px;
        grid-row-gap: 10px;
    }

    .main-content1 {
        grid-row: 1;
        grid-column: 1;
        border: 1px solid black;
    }

    .main-content2 {
        grid-row: 1;
        grid-column: 2;
        color: blue;
        border: 1px solid black;
    }

    .main-content3 {
        grid-row: 1;
        grid-column: 3;
        border: 1px solid black;
    }

    .main-content4 {
        grid-row: 1;
        grid-column: 4;
        color: red;
        border: 1px solid black;
    }
}

The result would be as shown below:

While on small screen sizes, I would need to use the media query below:

@media only screen and (max-width: 767px)  {
    .main-content {
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: repeat(4, 300px);
        grid-row-gap: 10px;
    }

    .main-content1 {
        grid-row: 1;
        grid-column: 1;
        border: 1px solid black;
    }

    .main-content2 {
        grid-row: 2;
        grid-column: 1;
        color: blue;
        border: 1px solid black;
    }

    .main-content3 {
        grid-row: 3;
        grid-column: 1;
        border: 1px solid black;
    }

    .main-content4 {
        grid-row: 4;
        grid-column: 1;
        color: red;
        border: 1px solid black;
    }
}

This would be the result:

As you can see, Using Bootstrap to make a page responsive saves a lot of time and memory space compared to when one uses media queries to make a page responsive. This is why I always prefer to use Bootstrap to CSS, why not take your laptop and try this out!