bootstrap 5 blog card layout with meta info
Maria
Created Nov 01, 2025
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
background: #f8f9fa;
padding: 60px 0;
}
.page-header {
text-align: center;
margin-bottom: 60px;
}
.page-header h1 {
font-size: 2.5rem;
font-weight: 700;
color: #2c3e50;
margin-bottom: 15px;
}
.page-header p {
color: #7f8c8d;
font-size: 1.1rem;
}
/* Blog Card Styles */
.blog-card {
background: white;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 5px 20px rgba(0,0,0,0.08);
transition: all 0.3s ease;
height: 100%;
display: flex;
flex-direction: column;
}
.blog-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}
.blog-card-image {
position: relative;
height: 250px;
overflow: hidden;
}
.blog-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.blog-card:hover .blog-card-image img {
transform: scale(1.1);
}
.blog-category {
position: absolute;
top: 20px;
left: 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 6px 15px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
z-index: 1;
}
.blog-featured-badge {
position: absolute;
top: 20px;
right: 20px;
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
color: white;
padding: 6px 15px;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 5px;
z-index: 1;
}
.blog-card-body {
padding: 30px;
flex: 1;
display: flex;
flex-direction: column;
}
.blog-meta {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 15px;
flex-wrap: wrap;
}
.blog-meta-item {
display: flex;
align-items: center;
gap: 8px;
color: #7f8c8d;
font-size: 0.85rem;
}
.blog-meta-icon {
width: 16px;
height: 16px;
fill: currentColor;
}
.blog-title {
font-size: 1.4rem;
font-weight: 700;
color: #2c3e50;
margin-bottom: 15px;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.blog-title a {
color: inherit;
text-decoration: none;
transition: color 0.3s ease;
}
.blog-title a:hover {
color: #667eea;
}
.blog-excerpt {
color: #7f8c8d;
line-height: 1.8;
margin-bottom: 20px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.blog-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 20px;
border-top: 1px solid #e0e0e0;
margin-top: auto;
}
.blog-author {
display: flex;
align-items: center;
gap: 12px;
}
.blog-author-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 700;
font-size: 0.9rem;
}
.blog-author-info {
display: flex;
flex-direction: column;
}
.blog-author-name {
font-weight: 600;
color: #2c3e50;
font-size: 0.9rem;
}
.blog-author-role {
font-size: 0.75rem;
color: #7f8c8d;
}
.blog-read-more {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 10px 25px;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
font-size: 0.85rem;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 8px;
}
.blog-read-more:hover {
transform: translateX(5px);
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
color: white;
}
/* Featured Card Style */
.blog-card.featured {
border: 2px solid transparent;
background: linear-gradient(white, white) padding-box,
linear-gradient(135deg, #667eea 0%, #764ba2 100%) border-box;
}
/* Horizontal Card Style */
.blog-card.horizontal {
flex-direction: row;
}
.blog-card.horizontal .blog-card-image {
width: 40%;
height: auto;
}
.blog-card.horizontal .blog-card-body {
width: 60%;
}
@media (max-width: 768px) {
.blog-card.horizontal {
flex-direction: column;
}
.blog-card.horizontal .blog-card-image,
.blog-card.horizontal .blog-card-body {
width: 100%;
}
.blog-card-image {
height: 200px;
}
}
/* Tags */
.blog-tags {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 15px;
}
.blog-tag {
background: #f1f3f5;
color: #495057;
padding: 5px 12px;
border-radius: 15px;
font-size: 0.75rem;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
}
.blog-tag:hover {
background: #667eea;
color: white;
}
/* Stats */
.blog-stats {
display: flex;
gap: 15px;
align-items: center;
}
.blog-stat {
display: flex;
align-items: center;
gap: 5px;
color: #7f8c8d;
font-size: 0.85rem;
}
/* Loading skeleton */
.skeleton {
animation: skeleton-loading 1s linear infinite alternate;
}
@keyframes skeleton-loading {
0% {
background-color: hsl(200, 20%, 80%);
}
100% {
background-color: hsl(200, 20%, 95%);
}
}
</style>
<div class="container">
<!-- Page Header -->
<div class="page-header">
<h1>Latest Blog Posts</h1>
<p>Discover our latest articles, tutorials, and insights</p>
</div>
<!-- Featured Post (Horizontal) -->
<div class="row mb-5">
<div class="col-12">
<div class="blog-card featured horizontal">
<div class="blog-card-image">
<div style="height: 100%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);"></div>
<span class="blog-featured-badge">⭐ Featured</span>
<span class="blog-category">Technology</span>
</div>
<div class="blog-card-body">
<div class="blog-meta">
<div class="blog-meta-item">
<svg class="blog-meta-icon" viewBox="0 0 24 24">
<path d="M19,4H18V2H16V4H8V2H6V4H5C3.89,4 3,4.9 3,6V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V6A2,2 0 0,0 19,4M19,20H5V10H19V20Z"/>
</svg>
Oct 28, 2025
</div>
<div class="blog-meta-item">
<svg class="blog-meta-icon" viewBox="0 0 24 24">
<path d="M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z"/>
</svg>
8 min read
</div>
<div class="blog-meta-item">
<svg class="blog-meta-icon" viewBox="0 0 24 24">
<path d="M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z"/>
</svg>
2.5k views
</div>
</div>
<h2 class="blog-title">
<a href="#">The Future of Web Development: Trends to Watch in 2025</a>
</h2>
<p class="blog-excerpt">
Explore the cutting-edge technologies and methodologies that are shaping the future of web development. From AI-powered tools to progressive web apps, discover what's coming next in the world of coding.
</p>
<div class="blog-tags">
<a href="#" class="blog-tag">Web Development</a>
<a href="#" class="blog-tag">JavaScript</a>
<a href="#" class="blog-tag">AI</a>
</div>
<div class="blog-footer">
<div class="blog-author">
<div class="blog-author-avatar">JS</div>
<div class="blog-author-info">
<div class="blog-author-name">John Smith</div>
<div class="blog-author-role">Senior Developer</div>
</div>
</div>
<a href="#" class="blog-read-more">
Read More
<svg width="16" height="16" viewBox="0 0 24 24" fill="white">
<path d="M13.025 1l-2.847 2.828 6.176 6.176h-16.354v3.992h16.354l-6.176 6.176 2.847 2.828 10.975-11z"/>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Regular Posts Grid -->
<div class="row g-4">
<!-- Blog Post 1 -->
<div class="col-lg-4 col-md-6">
<div class="blog-card">
<div class="blog-card-image">
<div style="height: 100%; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);"></div>
<span class="blog-category">Design</span>
</div>
<div class="blog-card-body">
<div class="blog-meta">
<div class="blog-meta-item">
<svg class="blog-meta-icon" viewBox="0 0 24 24">
<path d="M19,4H18V2H16V4H8V2H6V4H5C3.89,4 3,4.9 3,6V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V6A2,2 0 0,0 19,4M19,20H5V10H19V20Z"/>
</svg>
Oct 25, 2025
</div>
<div class="blog-meta-item">
<svg class="blog-meta-icon" viewBox="0 0 24 24">
<path d="M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z"/>
</svg>
5 min read
</div>
</div>
<h3 class="blog-title">
<a href="#">Mastering UI/UX Design Principles</a>
</h3>
<p class="blog-excerpt">
Learn the fundamental principles that make great user interfaces and create memorable user experiences in your projects.
</p>
<div class="blog-footer">
<div class="blog-author">
<div class="blog-author-avatar">ED</div>
<div class="blog-author-info">
<div class="blog-author-name">Emily Davis</div>
<div class="blog-author-role">UI/UX Designer</div>
</div>
</div>
<a href="#" class="blog-read-more">
Read
<svg width="16" height="16" viewBox="0 0 24 24" fill="white">
<path d="M13.025 1l-2.847 2.828 6.176 6.176h-16.354v3.992h16.354l-6.176 6.176 2.847 2.828 10.975-11z"/>
</svg>
</a>
</div>
</div>
</div>
</div>
<!-- Blog Post 2 -->
<div class="col-lg-4 col-md-6">
<div class="blog-card">
<div class="blog-card-image">
<div style="height: 100%; background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);"></div>
<span class="blog-category">Marketing</span>
</div>
<div class="blog-card-body">
<div class="blog-meta">
<div class="blog-meta-item">
<svg class="blog-meta-icon" viewBox="0 0 24 24">
<path d="M19,4H18V2H16V4H8V2H6V4H5C3.89,4 3,4.9 3,6V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V6A2,2 0 0,0 19,4M19,20H5V10H19V20Z"/>
</svg>
Oct 22, 2025
</div>
<div class="blog-meta-item">
<svg class="blog-meta-icon" viewBox="0 0 24 24">
<path d="M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z"/>
</svg>
6 min read
</div>
</div>
<h3 class="blog-title">
<a href="#">Digital Marketing Strategies That Work</a>
</h3>
<p class="blog-excerpt">
Discover proven digital marketing strategies that can help you reach your target audience and grow your business online.
</p>
<div class="blog-footer">
<div class="blog-author">
<div class="blog-author-avatar">MW</div>
<div class="blog-author-info">
<div class="blog-author-name">Mike Wilson</div>
<div class="blog-author-role">Marketing Expert</div>
</div>
</div>
<a href="#" class="blog-read-more">
Read
<svg width="16" height="16" viewBox="0 0 24 24" fill="white">
<path d="M13.025 1l-2.847 2.828 6.176 6.176h-16.354v3.992h16.354l-6.176 6.176 2.847 2.828 10.975-11z"/>
</svg>
</a>
</div>
</div>
</div>
</div>
<!-- Blog Post 3 -->
<div class="col-lg-4 col-md-6">
<div class="blog-card">
<div class="blog-card-image">
<div style="height: 100%; background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);"></div>
<span class="blog-category">Business</span>
</div>
<div class="blog-card-body">
<div class="blog-meta">
<div class="blog-meta-item">
<svg class="blog-meta-icon" viewBox="0 0 24 24">
<path d="M19,4H18V2H16V4H8V2H6V4H5C3.89,4 3,4.9 3,6V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V6A2,2 0 0,0 19,4M19,20H5V10H19V20Z"/>
</svg>
Oct 20, 2025
</div>
<div class="blog-meta-item">
<svg class="blog-meta-icon" viewBox="0 0 24 24">
<path d="M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z"/>
</svg>
7 min read
</div>
</div>
<h3 class="blog-title">
<a href="#">Building a Successful Startup in 2025</a>
</h3>
<p class="blog-excerpt">
Essential tips and insights for entrepreneurs looking to launch and scale their startups in today's competitive market.
</p>
<div class="blog-footer">
<div class="blog-author">
<div class="blog-author-avatar">SJ</div>
<div class="blog-author-info">
<div class="blog-author-name">Sarah Johnson</div>
<div class="blog-author-role">Entrepreneur</div>
</div>
</div>
<a href="#" class="blog-read-more">
Read
<svg width="16" height="16" viewBox="0 0 24 24" fill="white">
<path d="M13.025 1l-2.847 2.828 6.176 6.176h-16.354v3.992h16.354l-6.176 6.176 2.847 2.828 10.975-11z"/>
</svg>
</a>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
Comments (0)
Login to leave a comment
Login
No comments yet. Be the first!