Bootstrap 5 Author Bio Box
An Author Bio Box is a self-contained content block that displays a writer's photo, name, title, short biography, and optional social links, typically placed at the end of a blog post or article. It uses Bootstrap 5 utility classes and flex layout to create a polished, responsive card that builds reader trust and encourages audience connection. Use it any time a named individual publishes content, from solo bloggers to multi-author editorial sites.
Primary Class
.author-bioCommon Use Cases
- →Multi-author tech blogs where each contributor has a distinct speciality, allowing readers to follow specific writers whose expertise matches their interests
- →Healthcare or legal content sites where displaying an author's credentials (MD, JD, CFP) signals that articles are written by qualified professionals rather than anonymous copywriters
- →Agency blogs that feature client case studies written by in-house strategists, reinforcing team expertise and linking back to individual staff profile pages
- →Online course platforms that append an instructor bio box below each lesson article, giving students context about the teacher's background before committing to a full course
Variants & Classes
| Variant | Description |
|---|---|
| Author Bio Box Default | Standard author bio box with Bootstrap's default styling. |
| Author Bio Box Responsive | Responsive variant that adapts to different screen sizes. |
Code Example
<div class="card border-0 bg-light p-4 mt-5">
<div class="d-flex align-items-start gap-4">
<img
src="https://i.pravatar.cc/96?img=47"
alt="Portrait of Dr. Sarah Okafor"
class="rounded-circle flex-shrink-0"
width="80"
height="80"
/>
<div>
<p class="text-uppercase text-muted small mb-1 fw-semibold">Written by</p>
<h5 class="mb-1">Dr. Sarah Okafor</h5>
<p class="text-muted small mb-2">Senior Data Scientist, ML Research Division</p>
<p class="mb-3">
Sarah holds a PhD in Statistical Computing from UCL and has spent
eight years building production machine-learning pipelines for
Fortune 500 companies. She writes about practical MLOps, model
interpretability, and responsible AI deployment.
</p>
<div class="d-flex gap-3">
<a href="#" class="text-decoration-none small fw-medium">View Profile</a>
<a href="#" class="text-decoration-none small fw-medium">LinkedIn</a>
<a href="#" class="text-decoration-none small fw-medium">Twitter / X</a>
</div>
</div>
</div>
</div>Live Examples
Basic Author Bio Box
Canvas Framework Variants
The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:
- ✓Canvas Builder generated author bio box with custom colours
- ✓Author Bio Box with interactive states
- ✓Responsive author bio box for all screen sizes
Best Practices
Use flex-shrink-0 on the avatar to prevent distortion
Without flex-shrink-0 on the image element, Bootstrap's flexbox layout can compress the author photo when the bio text is long. Adding this single class locks the avatar at its declared width and height regardless of the sibling content length.
Link the author name to a dedicated author archive page
Wrapping the author's name in an anchor pointing to a filtered archive (for example, /blog/author/sarah-okafor) passes PageRank to that page and gives readers a direct way to browse more content from the same writer, improving both SEO and time-on-site.
Add schema.org Person markup alongside the visual component
Place a JSON-LD script block with Person schema (name, url, jobTitle, image) on the same page to help search engines associate the article with a verified author entity, which can contribute to E-E-A-T signals for YMYL topics.
Keep the bio under 60 words for readability
A post-article bio competes with the reader's impulse to leave the page; a tight 40 to 60 word paragraph that leads with credentials and ends with a topical focus outperforms longer prose that buries the most credibility-building details.