HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
A jumbotron indicates a big box for calling extra attention to some special content or information
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.
Use a <div>
element with class .jumbotron
to create a jumbotron:
Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.
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>
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>
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>