Bootstrap Jumbotron or Header

It is big box for some special content or information and you can say header page .

Use the.jumbotron class with <div> elements.

Bootstrap Tutorial

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.

Jumbotron Inside Container

It is used inside the <div class="container">

Example:-

 <div class="container">
  <div class="jumbotron">
    <h1>Bootstrap Tutorial</h1>
    <p>HTML, CSS, and JS and all Technology.</p>
  </div>
  <p>write some text.</p>
  <p>write some text.</p>
</div>

Test it Now

Jumbotron Outside Container

It is used Outside the <div class="container"> extend to the screen edges:

Example:-

<div class="jumbotron">
  <h1>Bootstrap Tutorial</h1>
   <p>HTML, CSS, and JS and all Technology.</p>
</div>
<div class="container">
    <p>write some text.</p>
    <p>write some text.</p>
</div>

Test it Now

Page Header Example

To Use the .page-headerclass with <div> element to create a page header:

Example:-

 <div class="page-header">
  <h1>Example Page Header</h1>
</div>

Test it Now

Next TopicBootstrap Wells

← prev next →

Bootstrap 4 Tuto

Bootstrap Jumbotron or Header

Bootstrap Tutorial

Jumbotron Inside Container

Jumbotron Outside Container

Page Header Example