Bootstrap

Hero banner

Standard hero banner

.hero-banner class removes top margin from its nested headings and set the gap between left and right columns in smaller screen to zero so when they stack up, the spacing isn't too wide.

Use data-bs-theme="dark" to make the banner in dark theme. The background color must be selected manually though. Available background colors and other options can be found here.

Take your learning to next step

Launch your online training, view certifications and upcoming courses, complete evaluations, and print certificates!

Go to Sage University


<div class="hero-banner padding-y-xl padding-t-none">
  <div class="flexbox column-2">
    <div class="flex-item">
      <div class="padding-1-lg">
        <h1>Take your learning to <span class="text-emphasis">next step</span></h1>
        <p>Launch your online training, view certifications and upcoming courses, complete evaluations, and print
          certificates!</p>
        <p class="mt-4"><a class="btn btn-primary">Go to Sage University</a></p>
      </div>
    </div>
    <div class="flex-item">
      <img
        src="https://www.sage.com/en-gb/-/media/images/sagedotcom/master/sage%20intacct/hero%20banners/intacct-industries-hospitality-hero-banner-2023/desktop.jpg?extension=webp"
        class="corner-1-lg img-responsive object-fit-cover h-100">
    </div>
  </div>
</div>

Content hero banner

This is a hero banner pattern for a hero moment further down the page.

data-bs-theme="dark" is added as the entire banner is in dark theme. Remove it if the banner is in light theme.

Take your learning to next step

Launch your online training, view certifications and upcoming courses, complete evaluations, and print certificates!

Go to Sage University


<div class="hero-banner corner-lg bg-black" data-bs-theme="dark">
  <div class="flexbox column-2">
    <div class="flex-item">
      <div class="padding-lg">
        <h2>Take your learning to <span class="text-emphasis">next step</span></h2>
        <p>Launch your online training, view certifications and upcoming courses, complete evaluations, and print
          certificates!</p>
        <p class="mt-4"><a class="btn btn-primary">Go to Sage University</a></p>
      </div>
    </div>
    <div class="flex-item">
      <img
        src="https://www.sage.com/en-gb/-/media/images/sagedotcom/master/products/intacct/character-illustration-industries-handyman-1.svg?iar=0&extension=webp&hash=A6E80444BD3A47367C8E4A544F07271A"
        class="img-responsive" alt="">
    </div>
  </div>
</div>

Created and open sourced by the Bootstrap team. Sage branded by Central XD of Sage.