Learn how to build a simple responsive blog card layout using Bootstrap 4 with this step-by-step tutorial. Perfect for beginners!
Table of Contents
Blog card design is one of the most important aspects of your blog. A blog card is simply a blog post that has been turned into a small card for easier browsing and skimmable content. Blog cards are easily created in Bootstrap, which makes it a breeze to create posts for your blog!
Did you know that creating blog cards for your website is really easy? You can do it with just HTML and Bootstrap! This article will show you how to create responsive blog cards with minimal coding.
Let's start making these amazing responsive blog cards using HTML and Bootstrap (CSS framework) step by step.
Join My Telegram Channel to Download the Project: Click Here
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML, and CSS. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our blog card.
The first part of the code declares that this is an HTML5 document and sets the language to English. It then includes the document's title and sets the character encoding to UTF-8.
The next section of the code includes a reference to Bootstrap 4.1.3, a popular front-end web development framework. It also includes a reference to an external stylesheet called "styles.css," which is presumably a custom stylesheet for this website.
The main body of the HTML document begins with a section class called "blog-area", which contains a container with a row class that includes a title and description. The "section-title" class is used to set the title of the section, and the "service-title" class is used to set the description of the section. The text is centered on the page using the "text-center" class.
The next section of the HTML includes another row class that contains three columns of different sizes, representing the blog cards. Each column contains a div with a "blog-wrapper" class, which includes a thumbnail image, some meta information, the blog's title, a short description, and a link to read more.
The blog cards are responsive, meaning they adjust their size and layout to fit the user's device screen size. This is achieved using Bootstrap's responsive grid system and CSS media queries.
After creating the files just paste the following below codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
This is the basic structure of our blog card using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Next, we will create our CSS file. In this file, we will add some custom CSS to make the blog cards look attractive.
The first set of rules define the margin and padding properties for unordered lists (ul) elements. In this case, both margin and padding are set to 0 pixels.
The second set of rules define the behavior of several elements on the page when they are hovered or focused. Specifically, the color property is set to #2B96CC and the text-decoration property is set to none for links and certain elements with class attributes.
The third set of rules define the style of section titles. The h2 element within a section title has a relative position, a margin-bottom of 45 pixels, and a font weight of 600. It also includes a pseudo-element (::before) that adds a 60-pixel wide, 2-pixel high, orange horizontal line under the h2 element.
The fourth set of rules define the style for a blog section on the webpage. The background color of the blog area is set to #F8F9FA, and the minimum height of the section is set to the height of the viewport. The blog-wrapper class includes padding of 20 pixels, a white background color, and hidden overflow. Additionally, the home-blog-wrapper class has a transition duration of 0.3 seconds. When the blog-wrapper element with the home-blog-wrapper class is hovered over, it will have a box-shadow effect.
The fifth set of rules define the appearance of individual blog posts within the blog section. The blog-thumb class sets a margin-bottom of 20 pixels for images. The blog-title class defines the style for the title of the blog post, including font size, font weight, and margin properties. The blog-content class defines the style for the text content of the blog post, including font size and margin properties. The link-box class defines the style for the links at the end of each blog post. The meta-info class includes a set of rules for the metadata associated with each blog post, including the author and publication date.
Finally, the embed-responsive class sets a margin-bottom of 20 pixels for responsive video and other embedded content, and the link-box class defines the font weight of the links within it.
This will give our blog cards 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.
ul {
margin: 0px;
padding: 0px;
}
a:focus, a:hover, .portfolio-cat a:hover, .footer -menu li a:hover {
color: #2B96CC;
text-decoration: none;
}
.section-title h2 {
position: relative;
margin-bottom: 45px;
display: inline-block;
font-weight: 600;
line-height: 1;
}
.section-title h2::before {
content: "";
position: absolute;
left: 50%;
width: 60px;
height: 2px;
background: #ff5e14;
bottom: -25px;
margin-left: -30px;
}
.section-title.service-title p {
margin-bottom: 10px;
}
.blog-area {
background: #F8F9FA;
min-height: 100vh;
}
.blog-wrapper {
background: #fff;
overflow: hidden;
padding: 20px;
}
.home-blog-wrapper{
transition: .3s;
}
.blog-wrapper.home-blog-wrapper:hover {
box-shadow: 10px 20px 30px rgba(0,0,0,.12);
}
.blog-thumb {
margin-bottom: 20px;
}
.blog-title {
display: inline-block;
font-size: 30px;
font-weight: 600;
line-height: 1.4;
margin: 10px 0 15px;
padding: 0;
text-align: left;
}
.blog-content.home-blog h2 {
font-size: 18px;
margin-bottom: 10px;
}
.blog-content.home-blog p {
margin-bottom: 10px;
}
.link-box.home-blog-link a {
font-size: 14px;
color: #ff5e14;
}
.blog-title a {
color: #222;
}
.link-box a {
color: #555;
}
.link-box a:hover {
color: #ff5e14;
}
.blog-title a:hover {
color: #ff5e14;
}
.meta-info ul li {
color: #9e9e9e;
display: inline-block;
font-size: 11px;
padding: 0 12px;
position: relative;
text-transform: uppercase;
font-weight: 700;
}
.embed-responsive {
margin-bottom: 20px;
}
.meta-info ul li:first-child{padding-left:0}
.meta-info ul li a{color:#ff5e14}
.meta-info ul li a:hover{color:#444}
.meta-info ul li::before {
border: 1px solid #999;
border-radius: 5px;
content: "";
height: 5px;
left: -4px;
position: absolute;
top: 6px;
width: 5px;
}
.meta-info ul li:first-child:before{display:none}
.blog-thumb img {
width: 100%;
}
.link-box a {
font-weight: 600;
} Final Output:
Conclusion:
Congratulations, you have successfully built a responsive blog card layout using Bootstrap 4! We hope this tutorial has helped you gain a better understanding of how Bootstrap 4 works and how it can be used to create beautiful and responsive web layouts. Remember, Bootstrap 4 provides a wide variety of pre-built components and classes that you can use to further customize your blog card design. Don't be afraid to experiment and try out different classes to create a design that fits your needs. Happy coding!
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 😊
