Hero Centered

Best Practices

• Use Hero as the first, prominent element on the page.
• Put it after an instances of the Official Banner or Navbars.
• One button is best, but two are acceptable as long as button is more prominent than the other.
• Don’t use more than two buttons.

Usage

Centered hero

Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.

Primary button Secondary

<div class="hero-centered">
  <div class="row justify-content-center">
    <div class="col-lg-6">
      <h2 class="h1">Centered hero</h2>
      <p class="hero-centered-sentence">Quickly design and customize responsive mobile-first sites with Bootstrap, the
        world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system,
        extensive prebuilt components, and powerful JavaScript plugins.</p>
      <div class="hero-centered-buttons">
        <button type="button" class="btn btn-white">Primary button</button>
        <button type="button" class="btn btn-outline-white">Secondary</button>
      </div>
    </div>
  </div>
  <div class="hero-centered-image">
    <div class="container px-5">
      <img src="/img/photos/pexels-photo-275030.jpeg" class="img-fluid" alt="Example image" width="700" height="500" loading="lazy">
    </div>
  </div>
</div>