title: Correct way to add text over an image in Bootstrap 3
body: <p>Once for all I need to learn how to place a text and button over an image using Bootstrap 3. I am trying to hit this result:</p>
  
  <p><a href="https://i.stack.imgur.com/xH5Gr.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/xH5Gr.jpg" alt="Template image"></a>
  The website is: <a href="https://colorlib.com/preview/theme/sublime/" rel="noreferrer">Example of the image</a></p>
  
  <p>I am thinking the structure is something like this:</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-sm-12"&gt;
              &lt;div class="container"&gt;
                  &lt;div class="row"&gt;
                      &lt;img src="https://i.ibb.co/h9pxMmg/home-slider-1.jpg"&gt;
                      &lt;div class="col"&gt;
                          &lt;div class="home_slider_content"  data-animation-in="fadeIn" data-animation-out="animate-out fadeOut"&gt;
                              &lt;div class="home_slider_title"&gt;A new Online Shop experience.&lt;/div&gt;
                              &lt;div class="home_slider_subtitle"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a ultricies metus. Sed nec molestie eros. Sed viverra velit venenatis fermentum luctus.&lt;/div&gt;
                              &lt;div class="button button_light home_button"&gt;&lt;a href="#"&gt;Shop Now&lt;/a&gt;&lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Am I on the correct path regarding the structure of the HTML?</p>
  
  <p>Best regards.</p>