Bootstrap - Bootstrap Jumbotron

The Bootstrap Jumbotron is a component designed to create a large, attention-grabbing section on a web page. It’s often used for headings, calls-to-action, or introductory content. However, its implementation differs between Bootstrap 3, 4, and 5, because it was deprecated in Bootstrap 5.

1. Jumbotron in Bootstrap 3

Syntax:

<div class="jumbotron">
  <h1>Welcome!</h1>
  <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

Features:

  • .jumbotron → Adds padding, gray background, and rounded corners.

  • Can contain headings, text, buttons, or images.

  • Can be full-width if placed outside a container, or contained inside .container.

Example – Full Width Jumbotron:

<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1>Fluid Jumbotron</h1>
    <p>This jumbotron spans the entire width of the viewport.</p>
  </div>
</div>

2. Jumbotron in Bootstrap 4

Bootstrap 4 still supports .jumbotron but introduces fluid jumbotron:

<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1 class="display-4">Hello, world!</h1>
    <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content.</p>
  </div>
</div>

Notes:

  • .display-4 → Large heading size.

  • .lead → Emphasized paragraph.

  • .jumbotron-fluid → Full-width container.

3. Jumbotron in Bootstrap 5 (Deprecated)

  • .jumbotron no longer exists in Bootstrap 5.

  • You can replicate the same effect using containers and utility classes like p-5, bg-light, and rounded.

Example – Bootstrap 5 Replacement:

<div class="p-5 mb-4 bg-light rounded-3">
  <div class="container-fluid py-5">
    <h1 class="display-5 fw-bold">Hello, world!</h1>
    <p class="col-md-8 fs-4">This is a simple hero section, recreated without the jumbotron class.</p>
    <button class="btn btn-primary btn-lg" type="button">Learn more</button>
  </div>
</div>

Explanation:

  • .p-5 → Padding for the section.

  • .mb-4 → Margin bottom.

  • .bg-light → Light gray background.

  • .rounded-3 → Rounded corners.

  • .fw-bold → Bold heading.

  • .fs-4 → Font size for paragraph.

4. Key Differences Between Versions

Feature Bootstrap 3 Bootstrap 4 Bootstrap 5 Replacement
Base class .jumbotron .jumbotron .p-5, .bg-light, .rounded-3
Full-width fluid .jumbotron-fluid .jumbotron-fluid .container-fluid inside section
Heading size Standard h1 .display-4 .display-5
Paragraph emphasis Normal paragraph .lead .fs-4
Deprecated No No Yes (removed)

5. Complete Example – Bootstrap 5 Hero Section (Jumbotron Replacement)

<!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</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-4">

  <h2>Bootstrap 5 Hero Section (Jumbotron Replacement)</h2>

  <div class="p-5 mb-4 bg-light rounded-3">
    <div class="container-fluid py-5">
      <h1 class="display-5 fw-bold">Welcome to My Website</h1>
      <p class="col-md-8 fs-4">This is a simple hero section, recreated without the jumbotron class in Bootstrap 5. Use it to highlight important content or calls to action.</p>
      <button class="btn btn-primary btn-lg" type="button">Learn More</button>
    </div>
  </div>

</body>
</html>