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 = > <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-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> < class "container-fluid" < = > div class "row" </ > 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 { : grid;
    grid-template-columns: repeat( , fr);
    grid-template-rows: repeat( , px);
    grid-column-gap: px;
    grid-row-gap: px;
}

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

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

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

.main-content4 {
    grid-row: ;
    grid-column: ;
    color: red;
    border: px solid black;
    padding: px;
} display 3 2 2 350 10 10 1 1 1 10 1 2 1 10 1 3 1 10 2 1 1 10 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: px) and (max-width: px) {
    .main-content { : grid;
        grid-template-columns: repeat( , fr);
        grid-template-rows: repeat( , px);
        grid-column-gap: px;
        grid-row-gap: px;
    }

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

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

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

    .main-content4 {
        grid-row: ;
        grid-column: ;
        color: red;
        border: px solid black;
    }
} 768 1023 display 4 2 4 650 10 10 1 1 1 1 2 1 1 3 1 1 4 1 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: px)  {
    .main-content { : grid;
        grid-template-columns: %;
        grid-template-rows: repeat( , px);
        grid-row-gap: px;
    }

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

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

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

    .main-content4 {
        grid-row: ;
        grid-column: ;
        color: red;
        border: px solid black;
    }
} 767 display 100 4 300 10 1 1 1 2 1 1 3 1 1 4 1 1 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!

Too Long; Didn't Read

Get free API security automated scan in minutes

Bootstrap vs Media Queries: How to Make a Page Responsive

Too Long; Didn't Read

Company Mentioned

@ritta-buyaki

RELATED STORIES