Bootstrap Tutorial - Create Jumbotron








The following code shows how to create Jumbotron.

Example

<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'
  src='http://code.jquery.com/jquery-git2.js'></script>
<link rel="stylesheet" type="text/css"
  href="http://getbootstrap.com/assets/css/docs.css">
<link rel="stylesheet" type="text/css"
  href="http://getbootstrap.com/dist/css/bootstrap.css">
<script type='text/javascript'
  src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<style type='text/css'>
.jumbotron {<!--from w  ww .  ja  va 2s. c om-->
  background-color: #ff3600;
  color: white;
}
</style>
</head>
<body>
  <div class="page-header">
    <h1>
      Jumbotron <small>looks awesome</small>
    </h1>
  </div>
  <div class="jumbotron" style="margin: 10px">
    <img src="http://placehold.it/200x200" class="img-responsive img-rounded"
      alt="Reponsive image">
    <h1>Cupcake Ipsum!</h1>
    <p>Cupcake ipsum dolor sit amet. Halvah I love danish cupcake ice
      ipsum dolor sit amet ipsum dolor sit amet ipsum dolor sit amet
      ipsum dolor sit amet ipsum dolor sit amet 
      ipsum dolor sit amet ipsum dolor sit amet 
      ipsum dolor sit amet ipsum dolor sit amet 
      ipsum dolor sit amet ipsum dolor sit amet 
      </p>
    <p>
      <a class="btn btn-primary btn-lg">Learn more</a>
    </p>
  </div>
</body>
</html>

Click to view the demo