Creating Responsive Grid Vanilla using HTML,CSS and Bootstrap
Many modern websites use a grid system to display chunks of data on their home-page as well as other pages. To much extent grid resembles a table, however, it is much more visually appealing and most often displays sibling elements. A grid must be responsive, i.e. it should adjust to the screen size of the user.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.
- Ample of utilities and components are never used and are therefore a burden on the web page.
- Bootstrap code is difficult to customize.
- Bootstrap slows downloading of websites a bit because it first loads jQuery, then bootstraps CSS and then bootstrap JS.
The Two Possible Approaches for Creating a Grid:
1. Grid without Bootstrap(Vanilla HTML CSS)
HTML Code: We start with defining three div each with class “customRow“. Then create an img tag within each of the customRow div.
CSS Code: Most of the styling is predefined. However, we have to set the width of each image as a percentage of the “customRow ”, so that these are responsive i.e. their widths vary as the screen size changes. We set some nonzero margin to rows so that they don’t stick to one another. Lastly, we align all the images to the center of the screen by using the text-align attribute.
2. Grid using Bootstrap
Then we start with building our grid by creating a div with the class container. This div will wrap all of our rows, then for each row we :
- Create a div with class row
- Inside this “row div”, create as many div as a number of columns required and give a class of col-* to each of these columns div. Here asterisk(*) resembles the width of the column. The total width of any screen is set as 12, this total width is too divided among the columns equally or unequally. In the first row, five columns each with a width of 2 is defined which makes up to a total of 10, the remaining 2(12-10) act for blank space.
- Then put image tags as required
- To the center, the images in each row, add a bootstrap class justify-content-center to each “row div”.
- Put a link to the custom CSS file( gfgBootstrapGrid.css here) in the header.
CSS Code: First we need to give margin to each row, to avoid them from sticking. For this, we append the row class of bootstrap and give it a margin of “40px top and bottom” and “0 left and right”. We also resize each image tag to acquire 100% of its parent element(here the “column div”), this makes the images responsive
Differences Between the two approaches:
- As the code reflects, for small projects( like this one), custom CSS is the better option. This is because fewer classes and generalization are to be done and the code is written specifically for a particular use-case.
- However, in case of a large project with a lot of elements(for example a login page, a sign-up page, a home page … etc) the general margin and padding are always the same. Therefore, using bootstrap will avoid any repetition of code and hence is preferred.
- As Bootstrap is a predefined library, the chances of buggy code are very less than compared to custom CSS.