Saturday, 18 April 2015

Bootstrap Jumbotron and Page Header



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 <div> element with class .jumbotron to create a jumbotron:

 

Jumbotron Inside Container:

Place the jumbotron inside the <div class="container"> if you want the jumbotron to NOT extend to the edge of the screen:
<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 <div class="container"> if you want the jumbotron to extend to the screen edges:
<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):
Use a <div> element with class .page-header to create a page header:
<div class="page-header">
  
<h1>Example Page Header</h1>
</div>






No comments:

Post a Comment