WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

Bootstrap Jumbotron and Page Header


My first create a Jumbotron

In this chapter we discuss of Bootstrap feature jumbotron.

container <div> element with class .jumbotron to make a jumbotron:

Bootstrap is very useful in HTML, CSS, and JS for making mobile platform responsive


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 »