bootstrap jumbotron examples

Today, We want to share with you bootstrap jumbotron.In this post we will show you bootstrap jumbotrons examples, hear for jumbotrons background image we will give you demo and example for implement.In this post, we will learn about Create Video Background Website Using Bootstrap HTML5 with an example.

How to Use Bootstrap 4 Jumbotron Component?

Bootstrap Jumbotrons with example

<html>
<head>
<title>Bootstrap Grid - www.pakainfo.com</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  
  <div class="row" >
    <div class="col-sm-12">

<div class="container">
<div class="jumbotron">
<h2>Pakainfo My First Web </h2>
<p> Pakainfo - Web Development & Good Online education</p>
</div>
<p>Learn More at Pakainfo.com.</p>
</div>

</div>
  </div>
</div>


</body>
</html>

Bootstrap Jumbotron Background Color

<html>
<head>
<title>Bootstrap Grid</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  
  <div class="row" >
    <div class="col-sm-12">

<div class="container">
<div class="jumbotron" style="background:yellow;" >
<h2>Pakainfo My First Web </h2>
<p> Pakainfo - Web Development & Good Online education.</p>
</div>
<p>Learn More at Pakainfo.com.</p>
</div>

</div>
  </div>
</div>


</body>
</html>

Bootstrap Jumbotron Background Image

<html>
<head>
<title>Bootstrap Grid</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron customJumboBg" >
<h2>Pakainfo My First Web - welcome to pakainfo</h2>
<p> Pakainfo - Web Development & Good Online education</p>
</div>
<p>Learn More at Pakainfo.com.</p>
</div>
<style type="text/css">
.customJumboBg{
background-image: url("http://tutorialsplane.com/wp-content/uploads/2015/03/bck.png");
}
</style>

</body>
</html>

I hope you get an idea about bootstrap jumbotrons carousel.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.