Here we are solving a basic problem faced by a beginner web developer in bootstrap i.e. designing a jumbotron.

Objectives and Outcomes

In this, we will discuss one more feature Bootstrap supports, the Jumbotron. As the name suggest this component can optionally increases the size of headings and add a lot of margin for landing page content

Basic jumbotron

We will now add a simple jumbotron to the web page. Start by adding the following code to the body.

<div class="jumbotron">
    <h1>Codeshot</h1>      
    <p>- best source of how-to problems.</p>
</div>

Codeshot

- best source of how-to problems.


In above code, we added a jumbotron class to the div to make that div as a jumbotron. To get a jumbotron full width, and without rounded corners use the jumbotron class outside all container classes and instead add a container within as shown in the following example:

An example of complete jumbotron

Add the following code into the body of your webpage

<header class="jumbotron">
 <div class="container">
   <div class="row row-header">
	 <div class="col-xs-12 col-sm-3">
		<img src="img/logo.jpg" class="img-responsive">
	 </div>	
	 <div class="col-xs-12 col-sm-6">
		<h1>Codeshot</h1>
		<p>Best source of how-to problems.</p>
	 </div>
	 <div class="col-xs-12 col-sm-3">
		<p style="padding:20px;"></p>
		<a type="button" class="btn btn-warning btn-block" data-toggle="tooltip" title="Click to enter codeshot" data-placement="bottom" href="">Enter Codeshot</a>
	 </div>
   </div>
 </div>
</header>





Also add the following code into your custom CSS file.

.row-header
{
	margin:0px auto;
	padding: 0px auto;
}

.jumbotron
{
	padding:70px 30px 70px 30px;
	margin:0px auto;
	background:#7986CB;
	color:floralwhite;
}

body
{
	align:center;
	padding:50px 0px 0px 0px;
	z-index:0;
}

Codeshot

Best source of how-to problems.