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 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 Brain
We are using Bootstrap Brain (BSB) Framework for basic styles. Bootstrap 5 is the base of the Bootstrap Brain (BSB) Framework.
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="bsb-author-1 bg-light py-5 py-xl-8 bsb-hover-special-x">
<div class="container overflow-hidden">
<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 w-150px h-150px rounded-circle bsb-hover-special-push-x" 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 bsb-hover-special-pull-x">
<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/bs-brain/bsb.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 4 Pro Templates
- Access to all 27 Pro Components
- Use in SaaS
- Resell & Redistribute
BB Startup
Freelancer
$49
3 Months Access
4 Pro BS Templates
27 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 4 Pro Templates
- Access to all our 27 Pro Components
-
Use in SaaS -
Resell & Redistribute
BB Club
Agency
$149
12 Months Access
4 Pro BS Templates
27 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 4 Pro Templates
- Access to all our 27 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.