Case Jumbotron

Bootstrap Case: Creating a Hero Section (Jumbotron Alternative)

Hero Sections (Formerly Jumbotron)

The Jumbotron component was removed in Bootstrap 5. However, you can achieve a similar prominent ‘hero’ section effect by using Bootstrap’s utility classes for padding, margins, background colors, and typography.

A hero section is typically a large, attention-grabbing block used to highlight key content or calls to action.

To create a hero-like section, you can use a <div> element and style it with utility classes. For example, .p-5 for large padding, .mb-4 for bottom margin, .bg-light for a light background, and .rounded-3 for rounded corners.

The following example demonstrates how to create a hero section:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Hero Section Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <div class="p-5 mb-4 bg-light rounded-3">
      <div class="container-fluid py-5">
        <h1 class="display-5 fw-bold">My First Bootstrap 5 Website!</h1>
        <p class="col-md-8 fs-4">This page will grow as we add more components and features using Bootstrap...</p>
        <button class="btn btn-primary btn-lg" type="button">Example button</button>
      </div>
    </div>

    <div class="row align-items-md-stretch">
      <div class="col-md-6">
        <div class="h-100 p-5 text-bg-dark rounded-3">
          <h2>Another Content Block</h2>
          <p>Some interesting information here.</p>
          <button class="btn btn-outline-light" type="button">Example button</button>
        </div>
      </div>
      <div class="col-md-6">
        <div class="h-100 p-5 bg-light border rounded-3">
          <h2>Yet Another Section</h2>
          <p>More details or calls to action.</p>
          <button class="btn btn-outline-secondary" type="button">Example button</button>
        </div>
      </div>
    </div>

    <footer class="pt-3 mt-4 text-muted border-top">
      &copy; 2023
    </footer>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Customization

Is it possible to customize the hero section? What if I want a different color or style?

• Background: Use .bg-* utility classes (e.g., .bg-primary, .bg-dark) or custom CSS for background colors or images.
• Text Color: Use .text-* utility classes (e.g., .text-white, .text-muted).
• Padding and Margin: Adjust spacing with .p-*, .m-*, .py-*, .px-*, etc.
• Borders and Rounded Corners: Use .border, .rounded-* utilities.
• Typography: Use display heading classes (.display-*), font weight utilities (.fw-*), and text alignment utilities (.text-center, etc.).

For more extensive customization, you can override Bootstrap’s Sass variables or write your own custom CSS. We will explore customization techniques in a later chapter.