title: Bootstrap: container with absolute positioning?
body: <p>I have the following markup:</p>
  
  <pre><code>&lt;div class="banner-wrapper"&gt;
      &lt;div class="banner-image" style="background-image: url(...);"&gt;&lt;/div&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-xs-12"&gt;
                  SOME ARBITRARILY LONG TEXT
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the corresponding SCSS:</p>
  
  <pre><code>.banner-wrapper {
    width: 100%;
    position: relative;
  
    .banner-image {
      background-position: center;
      background-size: cover;
    }
  
    .container {
      text-align: center;
      position: absolute;
      bottom: 0;
    }
  }
  </code></pre>
  
  <p>What I want is the text to appear on top of the image conserving the responsive margins that come with a container. The image is full width (like it was inside a container-fluid).</p>
  
  <p>The problem is that setting <code>position: absolute</code> on the container seems to break it. Is there a better way to achieve this?</p>
  
  <p>JsFiddle: <a href="https://jsfiddle.net/DTcHh/8801/" rel="noreferrer">https://jsfiddle.net/DTcHh/8801/</a></p>