Tutorials Bootstrap Bootstrap Jumbotron Example

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">  
<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> 
<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>  

Bootstrap Jumbotron Example

Inline Feedbacks
View all comments
Previous Post
Bootstrap3 Tutorials and Examples

Bootstrap Warning, Info, Success and Error Alerts Example

Next Post

How to Create Button Groups in Bootstrap3

Related Posts
By clicking “Allow All”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. Cookie Notice
Allow All
Would love your thoughts, please comment.x