bootstrap 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

1    <nav class="navbar navbar-default navbar-fixed-top">
2        <div class="container">
3            <ul class="nav navbar-nav navbar-right">
4                <li><a href="#">Home</a></li>
5                <li><a href="#services">Services</a></li>
6                <li><a href="#works">Works</a></li>
7                <li><a href="#about">About</a></li>
8                <li><a href="#contact">Contact</a></li>
9            </ul>
10        </div>
11    </nav>
12
13    <header class="jumbotron">
14        <div class="container">
15            <h1>Me</h1>
16            <p class="lead">Web Developer</p>
17        </div>
18    </header>
19

1<!-- A component for calling extra attention to featured content or information. -->
2<div class="jumbotron">
3YOUR TEXT
4</div>