StackTips

Bootstrap Jumbotron Example

bibhu_bib avtar

Written by

Bibhudatta,  2 min read,  2.83K views, updated on Sept. 17, 2023

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

bibhu_bib avtar

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 posts

Let’s be friends!

🙌 Stay connected with us on social media for the latest updates, exclusive content, and more. Follow us now and be part of the conversation!