Bootstrap Jumbotron
Jumbotron is a feature of Bootstrap.Jumbo means big ,Jumbotron is like a big box type area that automatically adjust with screen resolution.By default Jumbotron background is grey color and corner are rounded.You can place multiple valid HTML tag inside Jumbotron.Jumbotron can be place inside and outside of "container".
Here is the example jumbotron under "container".We have place multiple HTMl control in it.
Code
Here is the example jumbotron outside "container".We have place multiple HTMl control in it.
Code
Output
Jumbotron fluid is a extended version of jumbotron.Jumbotron fluid expand the entire horizontal space of its parent.No rounded corner.
Code
Output :
Bootstrap Page Header
.page-header class is adds a horizontal line under the heading.
Code
Output :
Jumbotron is a feature of Bootstrap.Jumbo means big ,Jumbotron is like a big box type area that automatically adjust with screen resolution.By default Jumbotron background is grey color and corner are rounded.You can place multiple valid HTML tag inside Jumbotron.Jumbotron can be place inside and outside of "container".
Here is the example jumbotron under "container".We have place multiple HTMl control in it.
Code
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta
charset="utf-8">
<meta
name="viewport"
content="width
= device-width, initial-scale = 1">
<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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<body>
<div
class="container">
<div
class="jumbotron">
<h1>
Welcome
to Bootstrap Jumbotron Tutorial!</h1>
<p>
I
hope , you are learning the Bootstrap</p>
<p>
<a
class="btn
btn-primary btn-lg"
role="button">Thank
you !</a>
</p>
</div>
</div>
</body>
</html>
Output
Output
Here is the example jumbotron outside "container".We have place multiple HTMl control in it.
Code
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta
charset="utf-8">
<meta
name="viewport"
content="width
= device-width, initial-scale = 1">
<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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<body>
<div
class="jumbotron">
<h1>
Welcome
to Bootstrap Jumbotron Tutorial!</h1>
<p>
I
hope , you are learning the Bootstrap</p>
<p>
<a
class="btn
btn-primary btn-lg"
role="button">Thank
you !</a>
</p>
</div>
</body>
</html>
Jumbotron fluid is a extended version of jumbotron.Jumbotron fluid expand the entire horizontal space of its parent.No rounded corner.
Code
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta
charset="utf-8">
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<meta
name="viewport"
content="width
= device-width, initial-scale = 1">
<body>
<div
class="jumbotron
jumbotron-fluid">
<h1>
Welcome
to Bootstrap Jumbotron Tutorial!</h1>
<p>
I
hope , you are learning the Bootstrap</p>
<p>
<a
class="btn
btn-primary btn-lg"
role="button">Thank
you !</a>
</p>
</div>
</body>
</html>
Bootstrap Page Header
.page-header class is adds a horizontal line under the heading.
Code
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta
charset="utf-8">
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta
name="viewport"
content="width
= device-width, initial-scale = 1">
<body
>
<div
class="container">
<div
class="page-header">
This
is My Page Heading
</div>
<div
>
This
is content of the page.
</div>
</div>
</body>
</html>
Output :
This is My Page Heading
This is content of the page.
