Create a hero section with a heading and two buttons

Description: Make a hero section with a light background, a big heading, a lead text and two buttons. The buttons must be stacked on phones and side by side from the small breakpoint.

Hint:

• Use py-5, display-5, lead and d-grid gap-2 d-sm-flex justify-content-sm-center.

---

Solution

<div class="bg-body-tertiary py-5 text-center rounded">
  <h1 class="display-5 fw-bold">Learn Bootstrap</h1>
  <p class="lead col-lg-8 mx-auto">Build responsive websites faster with ready components and utilities.</p>
  <div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
    <button type="button" class="btn btn-primary btn-lg px-4">Get started</button>
    <button type="button" class="btn btn-outline-secondary btn-lg px-4">Learn more</button>
  </div>
</div>

How it works

• d-grid gap-2 stacks the buttons full width on phones. d-sm-flex changes to a flex row from 576px, and justify-content-sm-center centers them.

Read Utilities and Flex Utilities.

• Previous Exercise

---

Tutorials
No Content Found.

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.