Bootstrap Tutorial - Use jumbotron component for a primary marketing message or call to action

The following code shows how to use jumbotron component for a primary marketing message or call to action.

Example

<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'
  src='http://code.jquery.com/jquery-1.10.1.js'></script>
<script type='text/javascript'
  src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<style type='text/css'>
@import url('http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css');
</style><!--  w  w  w .  jav  a  2  s .com-->
<script type='text/javascript'>
$(window).load(function(){
    $('.this-works').on('shown.bs.dropdown', function () {
      var inputField = $(this).find("input:text").first();
      var x = setTimeout(function(){inputField.focus()}, 100);
    });
    $('.this-doesnt').on('shown.bs.dropdown', function () {
      var inputField = $(this).find("input:text").first().focus();
    });
});
</script>
</head>
<body style='margin:30px'>
    <div class="jumbotron">
      <h1>Navbar example</h1>
      <p>This example is a quick exercise to illustrate how the
        default, static navbar and fixed to top navbar work. It includes the
        responsive CSS and HTML, so it also adapts to your viewport and
        device.</p>
      <p>
        <a class="btn btn-lg btn-primary" href="">View
          navbar docs &raquo;</a>
      </p>
    </div>
</body>
</html>

Click to view the demo