Back to Hero Sections
Hero

Centered Hero

Headline, lead text, and two buttons.

#hero#centered

Live preview

Source code

html
<section class="py-5 bg-light">
  <div class="container py-5 text-center">
    <span class="badge text-bg-primary-subtle text-primary mb-3 px-3 py-2 rounded-pill">New release</span>
    <h1 class="display-3 fw-bold">Build beautiful websites <span class="text-primary">faster</span>.</h1>
    <p class="lead text-muted mx-auto mt-3" style="max-width:640px;">Drop-in Bootstrap sections you can copy, paste, and ship in minutes.</p>
    <div class="d-flex justify-content-center gap-2 mt-4">
      <a href="#" class="btn btn-primary btn-lg rounded-pill px-4">Get started</a>
      <a href="#" class="btn btn-outline-secondary btn-lg rounded-pill px-4">Learn more</a>
    </div>
  </div>
</section>

More designs in this section