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.

Detail

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

Preview

Article written by

Elio Evander

Mauris at turpis sit amet turpis pretium imperdiet at eu tellus. Suspendisse imperdiet sapien id interdum scelerisque.

View More Items

<!-- 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.