top button
Flag Notify
    Connect to us
      Facebook Login
      Site Registration Why to Join

Facebook Login
Site Registration

What is Bootstrap Jumbotron?

0 votes
41 views
What is Bootstrap Jumbotron?
posted Jul 3, 2017 by Ranjit Bera

Share this question
Facebook Share Button Twitter Share Button Google+ Share Button LinkedIn Share Button Multiple Social Share Button

1 Answer

0 votes

Creating a Jumbotron
A jumbotron indicates a big box for calling extra attention to some special content or information.

A jumbotron is displayed as a grey box with rounded corners. It also enlarges the font sizes of the text inside it.

Tip: Inside a jumbotron you can put nearly any valid HTML, including other Bootstrap elements/classes.

Use a

element with class .jumbotron to create a jumbotron:

Jumbotron Inside Container
Place the jumbotron inside the

if you want the jumbotron to NOT extend to the edge of the screen:

Example

<div class="container">
  <div class="jumbotron">
    <h1>Bootstrap Tutorial</h1> 
    <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing
    responsive, mobile-first projects on the web.</p> 
  </div>
  <p>This is some text.</p> 
  <p>This is another text.</p> 
</div>

Jumbotron Outside Container
Place the jumbotron outside the

if you want the jumbotron to extend to the screen edges:

Example

<div class="jumbotron">
  <h1>Bootstrap Tutorial</h1> 
  <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive,
  mobile-first projects on the web.</p> 
</div>
<div class="container">
  <p>This is some text.</p> 
  <p>This is another text.</p> 
</div>

Creating a Page Header
A page header is like a section divider.

The .page-header class adds a horizontal line under the heading (+ adds some extra space around the element):

Example Page Header
Use a

element with class .page-header to create a page header:

Example

<div class="page-header">
  <h1>Example Page Header</h1>
</div>
answer Jul 4, 2017 by Shivaranjini
Contact Us
+91 9880187415
sales@queryhome.net
support@queryhome.net
#280, 3rd floor, 5th Main
6th Sector, HSR Layout
Bangalore-560102
Karnataka INDIA.
QUERY HOME
...