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... <!--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> < 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!
