Bootstrap Jumbotron Text Shadow

In this tutorial, I'm going to show you how-to add a shadow to the heading text of a Bootstrap jumbotron.

HTML

Example of how-to create your Bootstrap jumbotron.

<div class="container py-4">
  <div class="p-5 mb-4 bg-light rounded-3">
    <div class="container-fluid py-5">
      <h1 class="display-2 fw-bold text-shadow">Heading Text Shadow</h1>
    </div>
  </div>
</div>

CSS

Add some custom CSS to add the shadow to your heading text.

h1.text-shadow {
  color: #fff;
  text-shadow: 4px 3px 0 #ccc, 9px 8px 0 rgba(0, 0, 0, 0.15);
}