WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

Bootstrap Jumbotron and Page Header


My first create a Jumbotron

Jumbotron (large screen) will create a large gray background box, which can set some special content and information.

Tip: Jumbotron can contain some HTML tags or Bootstrap elements.


We can pass in <div> Add . Jumbotron class to the element to create jumbotron:

Create Jumbotron Inside Container

We can make jumbotron inside the <div class="container">

Example

<div class="container">
  <div class="jumbotron">
    <h1>Bootstrap Jumbotron</h1>
    <p>In this chapter we discuss of Bootstrap feature jumbotron
    web.</p>
  </div>
  <p>I am paragraph.</p>
  <p>I am paragraph.</p>
</div>
Try it Yourself »

Create Jumbotron Outside Container

We can make jumbotron outside the <div class="container">

Example

<div class="jumbotron">
  <h1>Bootstrap Tutorial</h1>
  <p>In this chapter we discuss of Bootstrap feature jumbotron
  .</p>
</div>
<div class="container">
  <p>I am paragraph.</p>
  <p>I am paragraph another.</p>
</div>
Try it Yourself »

Creating a Page Header

Page Header is important part of web page you can use section divider

The .page-header class add horizontal line + extra elements

Our <div> element with class .page-header to perfect a page header:

Example

<div class="page-header">
  <h1>I am perfect Page Header</h1>
</div>
Try it Yourself »