Bootstrap Jumbotron

Overview

A lightweight, flexible component that can optionally extend the entire viewport to showcase key marketing messages on your site.

Simple Jumbotron

<div class="p-5 mb-4 bg-light rounded-3">
    <div class="container-fluid py-5">
        <h1 class="display-5 fw-bold">Custom jumbotron</h1>
        <p class="col-md-8 fs-4">Using a series of utilities, you can create this jumbotron, just like the one in previous versions of Bootstrap.</p>
        <button class="btn btn-primary btn-lg" type="button">Example button</button>
    </div>
</div>

Full-width Jumbotron

<div class="jumbotron jumbotron-fluid">
    <div class="container">
        <h1 class="display-4">Fluid jumbotron</h1>
        <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
    </div>
</div>