<div class="jumbotron bg-image">
  
 
  
  <div class="container">
  
  
  <h1>Jumbotron Auto Viewport Height</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi pariatur laboriosam explicabo recusandae.</p>
  <p><a class="btn btn-primary btn-lg" href="//bootstrapcreative.com/" role="button">Learn more</a></p>
    
    </div>
<!--   /container  -->
</div>


<div class="container">
  
  
  
    <div class="page-header">
    <h1>Title</h1>
  </div><!--  /page-header  -->
  
  
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A dolores, esse non at necessitatibus maiores iste, repudiandae minus exercitationem sunt labore, eius tenetur, maxime consequuntur accusantium rerum. Fugiat sequi, dolores?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A dolores, esse non at necessitatibus maiores iste, repudiandae minus exercitationem sunt labore, eius tenetur, maxime consequuntur accusantium rerum. Fugiat sequi, dolores?</p>

  
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A dolores, esse non at necessitatibus maiores iste, repudiandae minus exercitationem sunt labore, eius tenetur, maxime consequuntur accusantium rerum. Fugiat sequi, dolores?</p>  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A dolores, esse non at necessitatibus maiores iste, repudiandae minus exercitationem sunt labore, eius tenetur, maxime consequuntur accusantium rerum. Fugiat sequi, dolores?</p>

  
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A dolores, esse non at necessitatibus maiores iste, repudiandae minus exercitationem sunt labore, eius tenetur, maxime consequuntur accusantium rerum. Fugiat sequi, dolores?</p>  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A dolores, esse non at necessitatibus maiores iste, repudiandae minus exercitationem sunt labore, eius tenetur, maxime consequuntur accusantium rerum. Fugiat sequi, dolores?</p>

  
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A dolores, esse non at necessitatibus maiores iste, repudiandae minus exercitationem sunt labore, eius tenetur, maxime consequuntur accusantium rerum. Fugiat sequi, dolores?</p>  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A dolores, esse non at necessitatibus maiores iste, repudiandae minus exercitationem sunt labore, eius tenetur, maxime consequuntur accusantium rerum. Fugiat sequi, dolores?</p>

  <blockquote>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A dolores, esse non at necessitatibus maiores iste, repudiandae minus exercitationem sunt labore, eius tenetur, maxime consequuntur accusantium rerum. Fugiat sequi, dolores?</p>

  
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A dolores, esse non at necessitatibus maiores iste, repudiandae minus exercitationem sunt labore, eius tenetur, maxime consequuntur accusantium rerum. Fugiat sequi, dolores?</p>
  </blockquote>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A dolores, esse non at necessitatibus maiores iste, repudiandae minus exercitationem sunt labore, eius tenetur, maxime consequuntur accusantium rerum. Fugiat sequi, dolores?</p>  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A dolores, esse non at necessitatibus maiores iste, repudiandae minus exercitationem sunt labore, eius tenetur, maxime consequuntur accusantium rerum. Fugiat sequi, dolores?</p>

  
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A dolores, esse non at necessitatibus maiores iste, repudiandae minus exercitationem sunt labore, eius tenetur, maxime consequuntur accusantium rerum. Fugiat sequi, dolores?</p>
  
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A dolores, esse non at necessitatibus maiores iste, repudiandae minus exercitationem sunt labore, eius tenetur, maxime consequuntur accusantium rerum. Fugiat sequi, dolores?</p>
  
</div>

.jumbotron {
 width:100%;
  height: 100vh;
  display:table;
}

.bg-image {
  background: url('') no-repeat center center;
   -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
   background-color:#ccc;
  background-size: cover;
}

.jumbotron .container {
  display:table-cell;
  vertical-align:middle;
  text-align: center;
}

.jumbotron .container {
  }

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js