Learn how to create responsive grid card layouts with HTML and Bootstrap. Follow our step-by-step guide for beginners and customize your website effortlessly.
Table of Contents
Grid card layouts are a popular design choice for displaying content in an organized and visually appealing manner on websites. With HTML and Bootstrap, creating these layouts becomes accessible to developers of all skill levels. In this tutorial, we'll walk through the process of building a grid card layout from scratch, focusing on responsiveness and customization.
Setting Up HTML Structure
Before diving into the implementation of grid cards, it's essential to establish a proper HTML structure for our layout. We'll define containers and rows to organize our content effectively, setting the foundation for the grid system.
Source Code
Step 1 (HTML Code):
The first thing we need to do is create our HTML File for grid card layout. We'll start with well-organized markup. After creating the files just paste the following codes into your file. Remember that you must save a file with the .html extension.
Let's break down the different parts of the code:
1. Document Structure
<!DOCTYPE html>: Defines the document as an HTML5 document.<html lang="en">: The root element of the document, with the language set to English.<head>: Contains metadata and links to stylesheets.<body>: Contains the content of the webpage.
2. Head Section
<meta charset="UTF-8" />: Specifies the character encoding as UTF-8.<meta http-equiv="X-UA-Compatible" content="IE=edge" />: Ensures compatibility with Internet Explorer.<meta name="viewport" content="width=device-width, initial-scale=1.0" />: Sets the viewport to make the webpage responsive.<title>Bootstrap Grid Card Layout</title>: Sets the title of the webpage.<link rel="stylesheet" type="text/css" href="https://cdnjs...ap.min.css" />: Links to the Bootstrap CSS stylesheet.<link rel="stylesheet" type="text/css" href="styles.css" />: Links to a custom stylesheet named styles.css.
3. Body Section
<section class="py-3 py-md-5">: Defines a section with padding classes for different screen sizes.
py-3: Padding on the y-axis (top and bottom) for small screens.py-md-5: Increased padding on the y-axis for medium and larger screens.
<div class="container overflow-hidden">: A Bootstrap container that centers the content and applies an overflow-hidden property.
<div class="row gy-4 gy-xxl-5">: A Bootstrap row with gutters (spacing between columns).
gy-4: Spacing on the y-axis for medium screens.gy-xxl-5: Increased spacing on the y-axis for extra-large screens.
4. Card Components
Each card component is wrapped inside a column (col) and uses Bootstrap classes to style and position the elements.
Single Card Structure
<div class="col-12 col-md-6 col-lg-4 d-flex">: Defines a column that spans 12 units (full width) on small screens, 6 units (half width) on medium screens, and 4 units (one-third width) on large screens. The d-flex class makes the column a flex container.
<article class="d-flex">: Defines an article element with flex display.<div class="card border border-dark" style="--bs-card-border-radius: 0; --bs-card-inner-border-radius: 0;">: A Bootstrap card component with custom border styles.<figure class="card-img-top m-0 overflow-hidden bsb-overlay-hover">: Contains the card image with no margins, overflow hidden, and custom hover effects.<a href="#!">: A link placeholder.<img class="img-fluid bsb-scale bsb-hover-scale-up" loading="lazy" src="IMAGE_URL" alt="ALT_TEXT">: An image with classes for responsive scaling and lazy loading.<figcaption>: Contains additional elements like an SVG icon and a "Read More" text with hover effects.<div class="card-body border-0 bg-white p-4">: The card body with no borders, white background, and padding.<div class="entry-header mb-3">: The entry header with bottom margin.<qul class="entry-meta list-unstyled d-flex mb-2">: A list of meta information (date) with no list styling and flex display.<li>: List item containing the date link.<a class="link-dark link-opacity-75 link-opacity-100-hover text-decoration-none" href="#!">: A link with dark color, opacity effects on hover, and no text decoration.<span class="fs-7">DATE</span>: A span with small font size for the date.<h2 class="card-title entry-title h4 mb-0">: The card title with heading level 4 styling and no bottom margin.<a class="link-dark link-opacity-100 link-opacity-75-hover text-decoration-none" href="#!">TITLE</a>: A link with dark color, opacity effects on hover, and no text decoration.<qp class="card-text entry-summary text-secondary m-0 p-0">: The card text with secondary color and no margins or padding.
Step 2 (CSS Code):
Next, we need to style our grid card layout by adding our CSS. This will give our grid card layout an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
Let's break it down section by section:
1. .bsb-overlay-hover: This class sets up the overlay effect container and defines some custom properties like --bsb-overlay-hover-opacity for overlay opacity and --bsb-overlay-hover-bg-color for background color.
2. .bsb-overlay-hover > a: This targets the anchor (<a>) elements within the overlay container. It sets them to cover the entire area of the container.
3. .bsb-overlay-hover > a > img.bsb-scale: This targets images (<img>) within the anchor elements and sets their scale to 1, presumably to maintain their original size.
4. .bsb-overlay-hover > a > img.bsb-scale-up: This targets images with the class .bsb-scale-up within the anchor elements and scales them up by a factor of 1.2 when hovered over.
5. .bsb-overlay-hover > a:after: This creates a pseudo-element after the anchor elements, serving as the overlay. It sets the background color to a semi-transparent color defined by --bsb-overlay-hover-bg-color and --bsb-overlay-hover-opacity.
6. .bsb-overlay-hover > figcaption: This targets <figcaption> elements within the overlay container. It positions them absolutely and sets their opacity to 0 initially.
7. .bsb-overlay-hover:hover: These styles apply when the overlay container is hovered over. It changes the scale of images and adjusts the opacity of the overlay and captions to create the hover effect.
8. Keyframes bsb-fadeInLeft and bsb-fadeInRight: These define animations for fading in elements from left and right respectively.
.bsb-overlay-hover {
--bsb-overlay-hover-opacity: 0.5;
--bsb-overlay-hover-bg-color: var(--bs-black-rgb);
position: relative;
}
.bsb-overlay-hover > a {
bottom: 0;
display: block;
left: 0;
position: relative;
right: 0;
top: 0;
}
.bsb-overlay-hover > a > img.bsb-scale {
--bsb-scale: 1;
}
.bsb-overlay-hover > a > img.bsb-scale,
.bsb-overlay-hover > a > img.bsb-scale-up {
transform: scale3d(var(--bsb-scale), var(--bsb-scale), var(--bsb-scale));
transform-style: preserve-3d;
transition: transform 0.5s;
}
.bsb-overlay-hover > a > img.bsb-scale-up {
--bsb-scale: 1.2;
}
.bsb-overlay-hover > a:after {
background-color: rgba(
var(--bsb-overlay-hover-bg-color),
var(--bsb-overlay-hover-opacity)
);
content: '';
cursor: pointer !important;
display: block;
z-index: 0;
}
.bsb-overlay-hover > a:after,
.bsb-overlay-hover > figcaption {
bottom: 0;
left: 0;
opacity: 0;
position: absolute;
right: 0;
top: 0;
}
.bsb-overlay-hover > figcaption {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
pointer-events: none;
z-index: 1;
}
.bsb-overlay-hover > figcaption > * {
opacity: 0;
}
.bsb-overlay-hover:hover > a > img.bsb-hover-scale {
--bsb-scale-hover: 1;
transform: scale3d(
var(--bsb-scale-hover),
var(--bsb-scale-hover),
var(--bsb-scale-hover)
);
}
.bsb-overlay-hover:hover > a > img.bsb-hover-scale-up {
--bsb-scale-hover: 1.2;
transform: scale3d(
var(--bsb-scale-hover),
var(--bsb-scale-hover),
var(--bsb-scale-hover)
);
}
.bsb-overlay-hover:hover > a:after {
opacity: 1;
transition: opacity 0.15s linear;
}
.bsb-overlay-hover:hover > figcaption {
opacity: 1;
transition: opacity 0.15s linear 0.1s;
}
.bsb-overlay-hover:hover > figcaption > .bsb-hover-fadeInLeft {
--bsb-animation-duration: 500ms;
animation-duration: var(--bsb-animation-duration);
animation-fill-mode: both;
animation-name: bsb-fadeInLeft;
}
.bsb-overlay-hover:hover > figcaption > .bsb-hover-fadeInRight {
--bsb-animation-duration: 500ms;
animation-duration: var(--bsb-animation-duration);
animation-fill-mode: both;
animation-name: bsb-fadeInRight;
}
@keyframes bsb-fadeInLeft {
0% {
opacity: 0;
transform: translate3d(-100%, 0, 0);
}
to {
opacity: 1;
transform: translateZ(0);
}
}
.bsb-fadeInLeft {
animation-name: bsb-fadeInLeft;
}
@keyframes bsb-fadeInRight {
0% {
opacity: 0;
transform: translate3d(100%, 0, 0);
}
to {
opacity: 1;
transform: translateZ(0);
}
}
.bsb-fadeInRight {
animation-name: bsb-fadeInRight;
} Final Output:
See the Pen Untitled by Faraz (@codewithfaraz) on CodePen.
Conclusion:
In this blog post, we've covered the fundamentals of creating grid card layouts using HTML and Bootstrap. Whether you're a novice developer or seasoned professional, harnessing the power of grid-based designs can elevate the visual appeal and user experience of your websites. Experiment, customize, and unleash your creativity with grid card layouts!
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
