Bootstrap 5 Post Author Info Box

You can add this Bootstrap author info or meta box under each post. It displays the author’s content elegantly. Mouse-over animation is an excellent effect of this snippet.
Bootstrap 5 Post Author Info/Meta Card
This Bootstrap post author meta card is free for your web applications. An author card is a component that depicts author content on your blog posts.
Tools
Bootstrap Framework
We are using the Bootstrap framework to build this component. This template is compatible with the Bootstrap 5+ framework. This code snippet example has no dependency and is straightforward to use in Bootstrap projects.
Features
- Bootstrap 5
- BS Brain Framework
- HTML5 & CSS3
- W3C Valid
- Commented Code
- Author Avatar
- Responsive Layout
- Liveliness Effect
- Clean Snippet
- SEO Optimized
- Easy to Use
- Cross Browser Compatible
Browse
Preview
<!-- Author 1 - Bootstrap Brain Component -->
<section class="py-5 py-xl-8">
<div class="container overflow-hidden bsb-author-1">
<div class="row justify-content-center gy-4 gy-md-0">
<div class="col-12 col-md-3 col-xl-2 d-flex align-items-center justify-content-center">
<img class="img-fluid rounded-circle author-avatar" loading="lazy" src="./assets/img/author-img-1.jpg" alt="">
</div>
<div class="col-12 col-md-8 col-lg-6 col-xl-5 d-flex align-items-center justify-content-center">
<div class="text-center text-md-start author-content">
<h5 class="text-secondary fs-7">Article written by</h5>
<h2 class="fs-2 mb-3">Elio Evander</h2>
<p class="mb-3">Mauris at turpis sit amet turpis pretium imperdiet at eu tellus. Suspendisse imperdiet sapien id interdum scelerisque.</p>
<p class="mb-0">
<a href="#!" class="link-dark text-decoration-none">
View More Items
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right-short" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z" />
</svg>
</a>
</p>
</div>
</div>
</div>
</div>
</section>
<!-- CSS Files -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/components/authors/author-1/assets/css/author-1.css" />
- Use in personal projects
- Customize the template files
- Number of websites/domains
- Create websites for clients
- Remove footer credit link
- Working PHP/AJAX contact form
- Sass/SCSS Files
- JS Source Files
- Premium support via Email
- Forum support
- Free Updates
- Access to all 5 Pro Templates
- Access to all 34 Pro Components
- Use in SaaS
- Resell & Redistribute
BB Startup
Freelancer
$49
3 Months Access
5 Pro BS Templates
34 Pro BS Components
- Use in personal projects
- Customize the template files
- Unlimited Number of websites/domains
- Create websites for clients
- Remove footer credit link
- Working PHP/AJAX contact form
- Sass/SCSS Files
- JS Source Files
- Premium support via Email
- Forum support
- 3 Months Free Updates
- Access to all our 5 Pro Templates
- Access to all our 34 Pro Components
-
Use in SaaS -
Resell & Redistribute
BB Club
Agency
$149
12 Months Access
5 Pro BS Templates
34 Pro BS Components
- Use in personal projects
- Customize the template files
- Unlimited Number of websites/domains
- Create websites for clients
- Remove footer credit link
- Working PHP/AJAX contact form
- Sass/SCSS Files
- JS Source Files
- Premium support via Email
- Forum support
- 12 Months Free Updates
- Access to all our 5 Pro Templates
- Access to all our 34 Pro Components
- Use in SaaS
-
Resell & Redistribute
Bootstrap 5 Post Author Snippets
Browse our incredible Bootstrap post author info/meta box collection. These snippets will assist web designers, and front-end and back-end developers save time.