How to create jumbotron in Bootstrap 5?

Question

In Bootstrap 5 the jumbotron component is removed in favor of utility classes like .bg-light for the background color and .p-* classes to control padding. I'm a newbie, can somebody give example of how to do that?

Answer 1

The migration documents give you exactly what you need to know. In v4.x Bootstrap's .jumbotron component is literally just this:

.jumbotron {
  padding: 2rem 1rem;
  margin-bottom: 2rem;
  background-color: #e9ecef;
  border-radius: .3rem;
}

You can, with the exception of the specific background color, emulate this entirely without the use of this class:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<h5>In Bootstrap v4.x</h5>

<div class="jumbotron m-3">
  <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 or information.</p>
  <hr class="my-4">
  <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
  <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<h5>In Bootstrap v5.x</h5>

<div class="bg-light p-5 rounded-lg m-3">
  <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 or information.</p>
  <hr class="my-4">
  <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
  <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>

That being said, if you are a novice Bootstrap I would strongly recommend holding off trying to master v5.x which is currently in alpha and subject to any number of changes.

Answer 2

I just use some of the basic container and padding bootstrap 5 class here's an example:

<div class="container-fluid bg-dark text-light p-5">
    <div class="container bg-dark p-5">
        <h1 class="display-4">Welcome to my Website</h1>
        <hr>
        <p>Go to My Website</p>
        <a href="#" class="btn btn-primary">link</a>
    </div>
</div>