title: overlapping elements in bootstrap
body: <p>How to overlap a text with an image (text in front of the image) and center them while keeping both responsive (without using position fixed or background-image) in Bootstrap?</p>
  
  <pre><code>&lt;pre&gt;
  &lt;!--jumbotron--&gt;
  &lt;div class="jumbotron"&gt;
  &lt;div class="container"&gt;
    &lt;div class="brand"&gt;
       &lt;h1 id="success"&gt;Alexandra&lt;/h1&gt;
     &lt;img class="img-responsive" src="lavrente.jpg" width="300" height="52" &gt;
    &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
   &lt;/pre&gt;
  
  &lt;pre&gt;#success {
  color: #000;
  font-family: "Chopin Script";
  position:relative;
  z-index: 1;
  
  
  }
  .img-responsive {
  position:relative;
  
  z-index: 0;}
  
  &lt;/pre&gt;
  </code></pre>