title: Control Width Of Div Elements Inside Jumbotron
body: <p>I have some text inside a jumbotron that has a complex background image.  To make the text stand out, I added a background color to the containing div to make it more readable.  However, the div width is the same size as the columns.  Is there any way to set the width so that the div is the same width as the text?  I don't want extra space to either side of the centered text.</p>
  
  <pre><code>&lt;div class="jumbotron"&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-lg-10 col-lg-push-1 text-center" style="background-color: rgba(0,0,0,0.5); border-radius: 25px;"&gt;
                  &lt;h1&gt;Some text, more text,&lt;br&gt;and more text&lt;/h1&gt;
                  &lt;p&gt;&lt;a href="" class="btn btn-primary btn-lg"&gt;Learn more &lt;i class="fa fa-angle-double-right"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>