First things come first. Let us begin this conversation by introducing Bootstrap.
What is Bootstrap?
In a nutshell, Bootstrap is a CSS library. Then you will have a problem. What is a CSS library? Let me tell you. It is a collection of CSS codes. First, Twitter made Bootstrap, and now there are many contributors, including the core team. By using this bootstrap library, we can implement pretty cool things to our website without any time.
When we use Bootstrap, we use predefined classes to style our HTML elements. First, we will check how to add Bootstrap to your document. It is also easy. Head over to bootstrap documentation, and you can find it is easy. Follow the below link to read the documentation.
After that, you can get a brief idea about Bootstrap. Then copy the bootstrap stylesheet to load bootstrap CSS.
<link rel=“stylesheet” href=“https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css” integrity=“sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l” crossorigin=“anonymous”>
You can add a link tag inside your Html document head tag to load all bootstrap CSS.
I need to mention another thing. Suppose you are going to use any other functionality from the bootstrap library, like toggling the navbar. In that case, you must load the required js and jquery files to your Html file, and you can use the below code for it. But in this scenario importing a bootstrap CSS file is more than enough.
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
How to implement Bootstrap grid System?
Now we import all required bootstrap CSS. It is time for action. First I am going to generate a dummy text for use. You can easily do it by going to lipsum.com.After that, I will make our page layout. With four div tags that have different colors and included previously generated dummy text. The code is below.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bootstrap grid</title>
<!-- Style sheets -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
</head>
<body>
<div class="cell-1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at urna elementum, luctus ante ac, molestie purus. Sed non turpis tortor. Duis id fringilla sapien, eget maximus turpis. Maecenas egestas, nunc ac posuere luctus, leo nulla fermentum ante,
sed pharetra orci mauris nec sem. Donec ac nunc in purus accumsan aliquet. Sed feugiat commodo neque, ut laoreet est mattis nec. Donec convallis lorem lorem, nec fermentum dui sollicitudin ac. Pellentesque habitant morbi tristique senectus et
netus et malesuada fames ac turpis egestas. Nunc at suscipit felis.
</div>
<div class="cell-2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at urna elementum, luctus ante ac, molestie purus. Sed non turpis tortor. Duis id fringilla sapien, eget maximus turpis. Maecenas egestas, nunc ac posuere luctus, leo nulla fermentum ante,
sed pharetra orci mauris nec sem. Donec ac nunc in purus accumsan aliquet. Sed feugiat commodo neque, ut laoreet est mattis nec. Donec convallis lorem lorem, nec fermentum dui sollicitudin ac. Pellentesque habitant morbi tristique senectus et
netus et malesuada fames ac turpis egestas. Nunc at suscipit felis.
</div>
<div class="cell-3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at urna elementum, luctus ante ac, molestie purus. Sed non turpis tortor. Duis id fringilla sapien, eget maximus turpis. Maecenas egestas, nunc ac posuere luctus, leo nulla fermentum ante,
sed pharetra orci mauris nec sem. Donec ac nunc in purus accumsan aliquet. Sed feugiat commodo neque, ut laoreet est mattis nec. Donec convallis lorem lorem, nec fermentum dui sollicitudin ac. Pellentesque habitant morbi tristique senectus et
netus et malesuada fames ac turpis egestas. Nunc at suscipit felis.
</div>
<div class="cell-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at urna elementum, luctus ante ac, molestie purus. Sed non turpis tortor. Duis id fringilla sapien, eget maximus turpis. Maecenas egestas, nunc ac posuere luctus, leo nulla fermentum ante,
sed pharetra orci mauris nec sem. Donec ac nunc in purus accumsan aliquet. Sed feugiat commodo neque, ut laoreet est mattis nec. Donec convallis lorem lorem, nec fermentum dui sollicitudin ac. Pellentesque habitant morbi tristique senectus et
netus et malesuada fames ac turpis egestas. Nunc at suscipit felis.
</div>
<style>
.row {
text-align: center;
}
.cell-1 {
background-color: aqua;
}
.cell-2 {
background-color: green;
}
.cell-3 {
background-color: yellow;
}
.cell-4 {
background-color: rgb(255, 0, 98);
}
</style>
</body>
</html>
The output webpage looks like the below image.
However, I need to make it responsive and good-looking. I need to display these four divs in a single row when I view this web page from a large desktop screen or laptop. In tablet view, two columns for a row, and mobile view one column for a row.
Desktop and Laptop view we are aiming
Tablet view we are aiming
The mobile view will be the same as the actual view, One column for a row. We have two options to add this responsitivity to our website. The first one is Using the bootstrap grid, and the other one is using a media query.
However, in this post, I am only discussing using Bootstrap to achieve this functionality.
How to implement Bootstrap grid System…
First, talk about how the grid system works. According grid system width of the browser(a row) is divided into 12 parts. Furthermore, in each situation(Desktop view, Tablet view & Mobile view), we specify how many parts we should get from each element’s row.To work this, we always need to include child divs in one div.
Let us include our four divs inside a div, and we need to give the class name as row to make it works. Then each child div element, we need to add another class col-lg-3 to specify how it should appear on the desktop. In child div, col is for column and lg for a large screen, and 3 is to specify how many units we need to take. We can calculate by dividing that number,
Number=12/unit needs to appear in a row
For the tablet view, we add another class, col-md-6, for each child div element. In this scenario, md is for the medium screen(tablet) and 6 number of units. So it takes half of the screen. So below the medium screen, a column/child div element get 100% of the width.
So this way, we can add this functionality easily just by adding few lines of code. The final code looks like below.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bootstrap grid</title>
<!-- Style sheets -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
</head>
<body>
<div class="row">
<div class="col-lg-3 col-md-6 cell-1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at urna elementum, luctus ante ac, molestie purus. Sed non turpis tortor. Duis id fringilla sapien, eget maximus turpis. Maecenas egestas, nunc ac posuere luctus, leo nulla fermentum ante,
sed pharetra orci mauris nec sem. Donec ac nunc in purus accumsan aliquet. Sed feugiat commodo neque, ut laoreet est mattis nec. Donec convallis lorem lorem, nec fermentum dui sollicitudin ac. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Nunc at suscipit felis.
</div>
<div class="col-lg-3 col-md-6 cell-2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at urna elementum, luctus ante ac, molestie purus. Sed non turpis tortor. Duis id fringilla sapien, eget maximus turpis. Maecenas egestas, nunc ac posuere luctus, leo nulla fermentum ante,
sed pharetra orci mauris nec sem. Donec ac nunc in purus accumsan aliquet. Sed feugiat commodo neque, ut laoreet est mattis nec. Donec convallis lorem lorem, nec fermentum dui sollicitudin ac. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Nunc at suscipit felis.
</div>
<div class="col-lg-3 col-md-6 cell-3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at urna elementum, luctus ante ac, molestie purus. Sed non turpis tortor. Duis id fringilla sapien, eget maximus turpis. Maecenas egestas, nunc ac posuere luctus, leo nulla fermentum ante,
sed pharetra orci mauris nec sem. Donec ac nunc in purus accumsan aliquet. Sed feugiat commodo neque, ut laoreet est mattis nec. Donec convallis lorem lorem, nec fermentum dui sollicitudin ac. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Nunc at suscipit felis.
</div>
<div class="col-lg-3 col-md-6 cell-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at urna elementum, luctus ante ac, molestie purus. Sed non turpis tortor. Duis id fringilla sapien, eget maximus turpis. Maecenas egestas, nunc ac posuere luctus, leo nulla fermentum ante,
sed pharetra orci mauris nec sem. Donec ac nunc in purus accumsan aliquet. Sed feugiat commodo neque, ut laoreet est mattis nec. Donec convallis lorem lorem, nec fermentum dui sollicitudin ac. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Nunc at suscipit felis.
</div>
</div>
<style>
.row {
text-align: center;
}
.cell-1 {
background-color: aqua;
}
.cell-2 {
background-color: green;
}
.cell-3 {
background-color: yellow;
}
.cell-4 {
background-color: rgb(255, 0, 98);
}
</style>
</body>
</html>
This is the beauty of Bootstrap. See you in the next post.
Have a nice day!