Heading Will Be Here
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Mollitia vero sed, laborum vel repellat dolorum numquam fugit est...
Read MoreAn all-new collection of blog grids are available. Made from Bootstrap, it is easy to use. It is an open-source blog website designs to ease the designer's task. It is free, open-source, and ready to use.
Get the beautiful blog grids in just a few simple clicks. Choose the one attracting you the most, click the copy button in the editor here. Paste the entire code to your text editor. That is it. You are ready to go. Either change the layout or work with it. Modify the content and use it for your design.
Use it for your blogging site or the blog section on websites.
Web designing made easy.
Use different blog classes to access different designs during the starting div tag.
blog-s1 for Classic blog grid.
blog-s2 to choose the Full Image grid.
blog-s3 for Contextual grid.
blog-s4 to select the 3D image blog grid.
blog-s5 to get Hovering blog grid.
One can customize the .col-md-4 class and make it anything like .col-md-3 or .col-md-6 or anything they want.
blog-wrapper is the main class from where the blog card starts.
thumb is the class name for the image section.
Note: All the pictures are taken in the background to keep up its evenness. Since the size of the image is not generally the equivalent after uploading. In this way, it will either boost or amplify or limit the picture size. So, it is mandatory to keep it in the background.
A simple and yet elegant design of the blog grid is here. It is a blog grid with an image, a title, text, link, author name with picture and designation, time, and comments. A slight black hover is over the image. Do not forget to notice the shadow making it more realistic.
To choose this style, use the class blog-s1. Just copy the code and make the changes wherever you need.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Mollitia vero sed, laborum vel repellat dolorum numquam fugit est...
Read MoreLorem ipsum, dolor sit amet consectetur adipisicing elit. Mollitia vero sed, laborum vel repellat dolorum numquam fugit est...
Read More
content class denotes the entire content after the image.
h2 tag is used for heading. One can replace it with h3, h1 or anything.
btn-read-more class is a simple Read more link with the theme color. You can also use buttons using the other utility classes or change their color.
blog-footer represents the footer section.
In the footer section, there is the name of the author with a picture and designation. Not only this, but the part also shows a clock icon with a time of blog post and a comments icon.
Here, the layout of designing the author section. It is fully customizable.
author is the list class name for the author of the blog.
author-thumb is the class name for adding the picture of the author.
content inside the div tag represents the details of the author.
name as a class name for p tag denoting the name of the author.
designation class inside the div tag is to show the designation of the author.
Now, for the clock, time, and comments section. The designer can modify it at their convenience.
other-info is a class name for a list item.
time is the name of the class under which the design of the clock is visible.
bi-clock represents the small clock icon.
span tag is used to show the time of upload.
comment is the class name for the comments section.
bi-chat-left-dots is representing the chat icon for comments.
span tag is used to show its number.
<div class="container">
<div class="row blog-s1">
<div class="col-md-6">
<div class="blog-wrapper">
<div class="thumb" style="background: url(https://bootstraprev.com/img/blog/blog1.jpg);"></div>
<div class="content">
<h2>
Heading Will Be Here
</h2>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Mollitia vero sed, laborum vel repellat dolorum numquam fugit est...
</p>
<a href="#" class="btn-read-more">Read More</a>
<ul class="blog-footer">
<li class="author">
<div class="author-thumb" style="background: url(https://bootstraprev.com/img/blog/admin.jpg);"></div>
<div class="content">
<p class="name">John Doe</p>
<div class="designation">Admin</div>
</div>
</li>
<li class="other-info">
<div class="time">
<i class="bi bi-clock"></i>
<span>23 minutes ago</span>
</div>
<div class="comment">
<i class="bi bi-chat-left-dots"></i>
<span>19</span>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-6">
<div class="blog-wrapper">
<div class="thumb" style="background: url(https://bootstraprev.com/img/blog/blog1.jpg);"></div>
<div class="content">
<h2>
Heading Will Be Here
</h2>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Mollitia vero sed, laborum vel repellat dolorum numquam fugit est...
</p>
<a href="#" class="btn-read-more">Read More</a>
<ul class="blog-footer">
<li class="author">
<div class="author-thumb" style="background: url(https://bootstraprev.com/img/blog/admin.jpg);"></div>
<div class="content">
<p class="name">John Doe</p>
<div class="designation">Admin</div>
</div>
</li>
<li class="other-info">
<div class="time">
<i class="bi bi-clock"></i>
<span>23 minutes ago</span>
</div>
<div class="comment">
<i class="bi bi-chat-left-dots"></i>
<span>19</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Perhaps the most stylish and trendy blog grids are in Bootstrap Rev. The image will grab the eye of the entire grid. Some blackish overlay on the image, adding more accuracy. It also increases the visibility of the text over the image.
Start with a little content, heading, category, and link. Use the grid and make the site more appealing.
An additional div tag is used to show the category section. The class name for it is category.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Mollitia vero sed, laborum vel repellat dolorum numquam fugit est...
Read MoreLorem ipsum, dolor sit amet consectetur adipisicing elit. Mollitia vero sed, laborum vel repellat dolorum numquam fugit est...
Read MoreLorem ipsum, dolor sit amet consectetur adipisicing elit. Mollitia vero sed, laborum vel repellat dolorum numquam fugit est...
Read More
<div class="container">
<div class="row blog-s2">
<div class="col-md-4">
<div class="blog-wrapper" style="background: url(https://bootstraprev.com/img/blog/blog1.jpg);">
<div class="content">
<div class="category">
Cat One
</div>
<h2>
Heading Will Be Here
</h2>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Mollitia vero sed, laborum vel repellat dolorum numquam fugit est...
</p>
<a href="#" class="btn-read-more">Read More</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="blog-wrapper" style="background: url(https://bootstraprev.com/img/blog/blog1.jpg);">
<div class="content">
<div class="category">
Cat One
</div>
<h2>
Heading Will Be Here
</h2>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Mollitia vero sed, laborum vel repellat dolorum numquam fugit est...
</p>
<a href="#" class="btn-read-more">Read More</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="blog-wrapper" style="background: url(https://bootstraprev.com/img/blog/blog1.jpg);">
<div class="content">
<div class="category">
Cat One
</div>
<h2>
Heading Will Be Here
</h2>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Mollitia vero sed, laborum vel repellat dolorum numquam fugit est...
</p>
<a href="#" class="btn-read-more">Read More</a>
</div>
</div>
</div>
</div>
</div>
It is likewise one of the renowned lattice styles to address blogs. The showcase of heading, passage, and connection is somewhat over the picture. An overlay of the dark impact is over the image. Likewise, there is a shadow giving it a realistic effect.
Use blog-s3 class to choose this style layout.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Mollitia vero sed, laborum vel repellat dolorum numquam fugit est...
Read MoreLorem ipsum, dolor sit amet consectetur adipisicing elit. Mollitia vero sed, laborum vel repellat dolorum numquam fugit est...
Read MoreLorem ipsum, dolor sit amet consectetur adipisicing elit. Mollitia vero sed, laborum vel repellat dolorum numquam fugit est...
Read More
<div class="container">
<div class="row blog-s3">
<div class="col-md-4">
<div class="blog-wrapper">
<div class="thumb" style="background: url(https://bootstraprev.com/img/blog/blog1.jpg);"></div>
<div class="content">
<h2>
Heading Will Be Here
</h2>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Mollitia vero sed, laborum vel repellat dolorum numquam fugit est...
</p>
<a href="#" class="btn-read-more">Read More</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="blog-wrapper">
<div class="thumb" style="background: url(https://bootstraprev.com/img/blog/blog1.jpg);"></div>
<div class="content">
<h2>
Heading Will Be Here
</h2>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Mollitia vero sed, laborum vel repellat dolorum numquam fugit est...
</p>
<a href="#" class="btn-read-more">Read More</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="blog-wrapper">
<div class="thumb" style="background: url(https://bootstraprev.com/img/blog/blog1.jpg);"></div>
<div class="content">
<h2>
Heading Will Be Here
</h2>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Mollitia vero sed, laborum vel repellat dolorum numquam fugit est...
</p>
<a href="#" class="btn-read-more">Read More</a>
</div>
</div>
</div>
</div>
</div>
Getting a 3D image overlay on the grid section is one of the choices of most designers. They can add a heading, a sub-heading, some text, and a link. Enjoy the new layout for decorating your site with the pre-built template.
Here the image is not used under the background.
product-detail class will hold the heading.
sub class under p tag is for the sub-heading.
Note: Use the image in .png format. Otherwise, it will not give the expected look.
Lorem ipsum dolor
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Mollitia vero sed, laborum vel repellat dolorum numquam fugit est...
Read More
Lorem ipsum dolor
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Mollitia vero sed, laborum vel repellat dolorum numquam fugit est...
Read More
<div class="container">
<div class="row blog-s4">
<div class="col-md-6">
<div class="blog-wrapper">
<div class="head">
<img src="https://bootstraprev.com/img/blog/pro1.png" alt="" class="img-fluid">
<div class="product-detail">
<h2>
Heading Will Be Here
</h2>
<p class="sub">
Lorem ipsum dolor
</p>
</div>
</div>
<div class="content">
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Mollitia vero sed, laborum vel repellat dolorum numquam fugit est...
</p>
<a href="#" class="btn-read-more">Read More</a>
</div>
</div>
</div>
<div class="col-md-6">
<div class="blog-wrapper">
<div class="head">
<img src="https://bootstraprev.com/img/blog/pro1.png" alt="" class="img-fluid">
<div class="product-detail">
<h2>
Heading Will Be Here
</h2>
<p class="sub">
Lorem ipsum dolor
</p>
</div>
</div>
<div class="content">
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Mollitia vero sed, laborum vel repellat dolorum numquam fugit est...
</p>
<a href="#" class="btn-read-more">Read More</a>
</div>
</div>
</div>
</div>
</div>
An overlay of a slight blackish effect over the full-length image is enough to captivate the users. Moreover, hovering on it and getting the text to show alive makes it more elegant and extraordinary.
The code is simple and easy to understand.
categories-list is the class name for the ul
a tag provides a link that will redirect the user once they click anywhere in the grid.
Note: It will be a grid of 6 blogs. Adding or eliminating grids from it will prompt a calamity in its plan, making it look bland.
<div class="container">
<ul class="categories-list">
<li style="background: url(https://bootstraprev.com/img/blog/blog1.jpg);">
<h2>
Photo & Video Home Entertainment Computer
</h2>
<a href="#"></a>
</li>
<li style="background: url(https://bootstraprev.com/img/blog/blog1.jpg);">
<h2>
Leffler and Sons Indoor
</h2>
<a href="#"></a>
</li>
<li style="background: url(https://bootstraprev.com/img/blog/blog1.jpg);">
<h2>
Beahan, Hammes and Frami
</h2>
<a href="#"></a>
</li>
<li style="background: url(https://bootstraprev.com/img/blog/blog1.jpg);">
<h2>
Beahan, Hammes and Frami
</h2>
<a href="#"></a>
</li>
<li style="background: url(https://bootstraprev.com/img/blog/blog1.jpg);">
<h2>
Leffler and Sons Indoor
</h2>
<a href="#"></a>
</li>
<li style="background: url(https://bootstraprev.com/img/blog/blog1.jpg);">
<h2>
Photo & Video Home Entertainment Computer
</h2>
<a href="#"></a>
</li>
</ul>
</div>