Bootstrap Author 1 Section
<!-- Author 1 - Bootstrap Brain Component -->
<section class="py-5">
<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="Elio Evander">
</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">I am a QA tester and author with a passion for ensuring that software is of the highest quality. I have over 10 years of experience in the industry from small startups to large enterprises.</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>
<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">
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. 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.