bootstrap 5 jumbotron

1<div class="jumbotron">
2  <h1 class="display-4">Hello, world!</h1>
3  <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
4  <hr class="my-4">
5  <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
6  <p class="lead">
7    <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
8  </p>
9</div>

1<div class="bg-light p-5 rounded-lg m-3">
2  <h1 class="display-4">Hello, world!</h1>
3  <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
4  <hr class="my-4">
5  <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
6  <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
7</div>

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

1A jumbotron indicates a big box for calling extra attention to some special content or information.
2
3A jumbotron is displayed as a grey box with rounded corners. It also enlarges the font sizes of the text inside it.
4
5Tip: Inside a jumbotron you can put nearly any valid HTML, including other Bootstrap elements/classes.
6
7Use a <div> element with class .jumbotron to create a jumbotron