Creating Bootstrap Jumbotron in HTML,PHP web page example tutorial

How to use Bootstrap’s Jumbotron class inside Web Page and make responsive box to get user attention.

Bootstrap provides us class named as Jumbotron, It is completely responsive large box with color filled inside it with rounded corners. Jumbotron is mostly used to create big box at the top or end of web page to get website’s user more attention on your web page because it is used to show important information or website headings. So here is the complete step by step tutorial for Creating Bootstrap Jumbotron in HTML,PHP web page example tutorial.

Creating Bootstrap Jumbotron in HTML,PHP web page example tutorial.

https://www.android-examples.com/demo/heading-tag.html
Code for jumbotron.html file for fixed width.

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Jumbotron</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

<div class="jumbotron">

 <h1>Bootstrap Jumbotron Heading</h1> 
 
 <p>Display some important information about your web page.</p> 
 
 </div>
 
</div>
</body>
</html>

Screenshot:

Creating Bootstrap Jumbotron in HTML,PHP web page example tutorial

Code for jumbotron-full.html file for full width file.
https://www.android-examples.com/demo/heading-tag.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Jumbotron Full Width</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</head>

<body>

<div class="jumbotron">

 <h1>Bootstrap Jumbotron Heading</h1> 
 
 <p>Display some important information about your web page.</p> 
 
 </div>
 
</body>
</html>

Screenshot:

Creating Bootstrap Jumbotron in HTML,PHP web page example tutorial

Leave a Reply

Your email address will not be published. Required fields are marked *