title: How to make a jumbotron the same width as a picture in Bootstrap 3
body: <p>Hey guys and gals I'm new to using bootstrap and I am trying to do something pretty simple but it is escaping me currently. I am trying to make my jumbotron to be the same size as picture placed above it. </p>
  
  <pre><code>        &lt;div class="container"&gt;
             &lt;div class="row"&gt;
                &lt;div class="col-xs-12"&gt;
                   &lt;img src="img/NYC Skyline.jpg" class="img-responsive" alt="Responsive image"&gt;
                &lt;/div&gt;&lt;!-- pic of NYC --&gt;
             &lt;/div&gt;
             &lt;div class="row"&gt;
                &lt;div class="jumbotron" class="col-xs-12"&gt;
                   &lt;h1&gt;Welcome to Falke!&lt;/h1&gt;
                      &lt;p&gt;Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.&lt;/p&gt;
                   &lt;a href="#" class="btn btn-large btn-info"&gt;Get Started&lt;/a&gt;
                   &lt;/div&gt;&lt;!-- end of container for hero unit for blurb--&gt;
                &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>The issue I'm having is that the jumbotron will stretch past the max width of the picture placed above it. How can I avoid this happening thanks. I am using bootstrap 3. </p>