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.
- 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.
- Creating Navbar | Vanilla HTML CSS Vs Bootstrap
- How to create responsive image gallery using HTML, CSS, jQuery and Bootstrap?
- How to create Responsive Bottom Navigation Bar using Bootstrap ?
- How to create responsive website zoomed out to full width on mobile using Bootstrap?
- Bootstrap (Part-5) | DropDowns and Responsive Tabs
- Responsive images in Bootstrap with Examples
- Responsive Video or Slideshow Embeds in Bootstrap with Examples
- How to design Responsive card-deck with fixed width in Bootstrap ?
- How to make the existing bootstrap 2 table responsive?
- How to Specify Divider gap in Square Grid using Bootstrap ?
- How Specify Length and Width of Square Grid Picture System in Bootstrap?
- Include Bootstrap in AngularJS using ng-bootstrap
- HTML | Responsive full page image using CSS
- How to hide elements in responsive layout using CSS ?
- Beginning BootStrap (Part-2) | Grid System
- Bootstrap 4 | Grid System
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.