Bootstrap Jumbotron Example

Jumbotron optionally captures the whole viewport and renders the contents inside. A jumbotron is displayed as a grey box with rounded corners. It also enlarges the font sizes of the text inside it.

Inside a jumbotron you can put nearly any valid HTML, including other Bootstrap elements/classes. Place the jumbotron inside the <div class="container"> if you want the jumbotron to NOT extend to the edge of the screen.

Jumbotron example,

<!DOCTYPE html> 
<html lang="en">  
<head>    
<title>My first Bootstrap page </title>    
<meta name="viewport" content="width=device-width, initialscale=1">    
<link href="CSS/bootstrap.min.css" rel="stylesheet">   
<link href="CSS/bootstrap-theme.min.css" rel="stylesheet">    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script type="text/javascript" src="JS/bootstrap.min.js"></script> 
 </head> 
 <body>
<div class="container" style="margin:50px;">
	<div class="container">
	  <div class="jumbotron" style="background:#ebeff2">
	    <h1 style="font-size:130px;">400!</h1>      
		<h2>Sorry but the page that you looking for does not exist..</h2>
	    <a href="/index.html" class="btn btn-warning btn-lg">Go to Home Page</a>  
	  </div>
	</div>
</body>
</html>

Output,
Bootstrap Jumbotron Example

Bibhudatta

She loves coding for web and working with Microsoft Technologies. She has developed enterprise applications with B2B and B2C business models for worlds leading Financial and Retail chain market.

Related Articles

Join The Discussion

Please note: We reserve the right to delete comments that contains snarky remarks, offensive or off-topic. To know more read our comments policy.