Creating Responsive Grid Vanilla using HTML,CSS and Bootstrap
Last Updated :
23 Jul, 2024
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.
Bootstrap is a very popular open-source HTML, CSS, and JavaScript library that helps to design the frontend of a website. Generally, bootstrap code is very compact and robust but there are a few reasons for which every developer should master Vanilla(Customizable) HTML and CSS :
- 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.
HTML
<!DOCTYPE html>
<html>
<head>
<title>geeksforgeeks vanilla grid</title>
<!-- Custom CSS Link -->
<link rel="stylesheet"
type="text/css"
href="gfgVanillaGrid.css">
</head>
<body>
<!-- gfg(G),gfg(E) ... gfg(R) are images
for corresponding letters -->
<div class="customRow">
<!-- First Row G E E K S-->
<img src="gfg(G).png" alt="">
<img src="gfg(E).png" alt="">
<img src="gfg(E).png" alt="">
<img src="gfg(K).png" alt="">
<img src="gfg(S).png" alt="">
</div>
<div class="customRow">
<!-- Second Row F O R-->
<img src="gfg(F).png" alt="">
<img src="gfg(O).png" alt="">
<img src="gfg(R).png" alt="">
</div>
<div class="customRow">
<!-- Third Row G E E K S-->
<img src="gfg(G).png" alt="">
<img src="gfg(E).png" alt="">
<img src="gfg(E).png" alt="">
<img src="gfg(K).png" alt="">
<img src="gfg(S).png" alt="">
</div>
</body>
</html>
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.
CSS
img{
width: 14%;
}
/* 40px margin on top and bottom,
zero margin on left and right*/
.customRow{
margin: 40px 0;
text-align: center;
}
Output:
2. Grid using Bootstrap
HTML Code: First, we need to copy the bootstrap starter template from its official website. This template contains a bootstrap CDN, jQuery CDN, popper.js CDN, and Bootstrap JavaScript file. For convenience, I have put it here.
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.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no" />
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css"
integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous" />
<!-- Custom CSS Link-->
<link rel="stylesheet" href="gfgBootstrapGrid.css" />
<title>Geeksforgeeks grid with bootstrap</title>
</head>
<body>
<!-- gfg(G),gfg(E) ... gfg(R) are images
for corresponding letters -->
<div class="container-fluid">
<!-- First Row G E E K S-->
<div class="row justify-content-center">
<div class="col-2">
<img src="gfg(G).png" alt="" />
</div>
<div class="col-2">
<img src="gfg(E).png" alt="" />
</div>
<div class="col-2">
<img src="gfg(E).png" alt="" />
</div>
<div class="col-2">
<img src="gfg(K).png" alt="" />
</div>
<div class="col-2">
<img src="gfg(S).png" alt="" />
</div>
</div>
<!-- Second Row F O R-->
<div class="row justify-content-center">
<div class="col-2">
<img src="gfg(F).png" alt="" />
</div>
<div class="col-2">
<img src="gfg(O).png" alt="" />
</div>
<div class="col-2">
<img src="gfg(R).png" alt="" />
</div>
</div>
<!-- Third Row G E E K S-->
<div class="row justify-content-center">
<div class="col-2">
<img src="gfg(G).png" alt="" />
</div>
<div class="col-2">
<img src="gfg(E).png" alt="" />
</div>
<div class="col-2">
<img src="gfg(E).png" alt="" />
</div>
<div class="col-2">
<img src="gfg(K).png" alt="" />
</div>
<div class="col-2">
<img src="gfg(S).png" alt="" />
</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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://stackpath.bootstrapcdn.com/bootstrap/4.5.1/js/bootstrap.min.js"
integrity=
"sha384-XEerZL0cuoUbHE4nZReLT7nx9gQrQreJekYhJD9WNWhH8nEW+0c5qq7aIo2Wl30J"
crossorigin="anonymous">
</script>
</body>
</html>
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
CSS
.row{
margin: 40px 0;
}
img{
width: 100%;
}
Output:
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.
Similar Reads
How to create responsive image gallery using HTML, CSS, jQuery and Bootstrap?
With the advent of new frameworks in web technologies, it has become quite easy to design and implement feature-rich and responsive web pages. Here, we are going to design a responsive image gallery using HTML, CSS, jQuery, and Bootstrap. Features or Functionalities to implement:Responsive imagesRes
3 min read
How to Create a Responsive Image Grid using CSS?
A responsive image grid is a layout technique used to display images in a grid-like structure that adjusts dynamically based on the screen size to ensure that the grid looks good and functions well across various devices and screen resolutions. Below are the approaches to creat a responsive image gr
3 min read
How to Create ToDo App using HTML, CSS, JS and Bootstrap ?
We will create a basic todo app to understand the basics of JavaScript. In this web app, one can create a todo list and can remove specific elements from the list.Features or Functionalities to implement:Â Â Interactive and Responsive designResponsive Grid SystemStore and Delete itemsPrerequisites: Ba
2 min read
Create a Single Page Responsive Website Using Bootstrap
Everyone wants to create the website which is compatible with all the devices like computer, laptops, tablets, and mobiles. So for making a website responsive the best way is to make a website using Bootstrap.Since it is a single-page website when you click on any menu on the website it will reach y
6 min read
How to Create a Responsive Table in Bootstrap ?
A responsive table in Bootstrap adjusts its layout to fit different screen sizes, ensuring readability and usability on all devices. It typically involves using classes like .table-responsive or custom CSS to enable horizontal scrolling on smaller screens.Table of Content Using the table-responsive
4 min read
BootStrap5 Grid system Responsive classes
Bootstrap 5 Grid System Responsive classes offer six tiers (xs, sm, md, lg, xl) to customize column sizes, enabling the creation of responsive layouts. This allows seamless adaptation to various screen sizes for optimal user experience. Bootstrap 5 Grid system Responsive Options: ConceptDescriptionA
3 min read
Explain the steps for creating basic or vertical forms using Bootstrap
Bootstrap is an open-source CSS framework that is used for building responsive websites. It has HTML, CSS, and JS frameworks for developing user-friendly and responsive websites. As of August 2021, Bootstrap is the tenth most starred project on GitHub. The website has ready-made templates given alon
4 min read
How to Create Responsive Divs in Bootstrap ?
To create responsive divs in Bootstrap, utilize the grid system with container and row classes. Define columns using col classes and specify breakpoints for different screen sizes. This ensures divs adjust their layout and size responsively across devices. Below are the approaches to creating respon
2 min read
How to make Form Responsive using Bootstrap ?
We are going to create a responsive form by using Bootstrap 5. responsiveness is a feature that allows users to interact with the web app on any device easily. It helps to create better UI interactions and a better user experience that can be a reason to have great traffic on the respective website.
4 min read
How to Create a Responsive CSS Grid Layout ?
Here are different ways to create a responsive grid layout with CSS.1. Using auto-fill PropertyThis method can be used CSS Grid for a responsive layout. The grid-template-columns property adjusts columns based on space, keeping a minimum width of 200 pixels. Gaps between items are set with grid-gap.
3 min read