title: How to place Content DIV on bootstrap carousel and make it responsive?
body: <p>I want to place a content <code>DIV</code> on bootstrap carousel in large and desktop screens. See below image for your understanding. </p>
  
  <p><img src="https://i.stack.imgur.com/3nsK1.jpg" alt="Example on screen"></p>
  
  <p>In mobile and tab screen it should be something like this - </p>
  
  <p><img src="https://i.stack.imgur.com/fvHu2.jpg" alt="Example on mobile"></p>
  
  <p>I am not sure how to create this layout using bootstrap 3. Hope somebody may help me out. </p>
  
  <p>This is my current Mark Up: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css" rel="stylesheet" /&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" /&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;main role="main"&gt;
  
    &lt;div id="homepage-feature" class="carousel slide"&gt;
      &lt;ol class="carousel-indicators"&gt;
        &lt;li data-target="#homepage-feature" data-slide-to="0" class="active"&gt;&lt;/li&gt;
        &lt;li data-target="#homepage-feature" data-slide-to="1"&gt;&lt;/li&gt;
      &lt;/ol&gt;
  
      &lt;!-- Wrapper for slides --&gt;
      &lt;div class="carousel-inner"&gt;
        &lt;div class="item active" style="background: url(img/slider/uniform.jpg) no-repeat center center; background-size: cover;"&gt;
          &lt;div class="container"&gt;
            &lt;div class="carousel-caption"&gt;
              &lt;h3&gt;Providing you the Best&lt;/h3&gt;
              &lt;h1&gt;Cleaning Companies&lt;/h1&gt;
              &lt;p&gt;in Bahrain with 10% Discount.&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="item" style="background: url(img/slider/uniform.jpg) no-repeat center center; background-size: cover;"&gt;
          &lt;div class="container"&gt;
            &lt;div class="carousel-caption"&gt;
              &lt;h1&gt;Example headline.&lt;/h1&gt;
              &lt;p class="lead"&gt;Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.&lt;/p&gt;
              &lt;a class="btn btn-large btn-primary" href="#"&gt;Sign up today&lt;/a&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- /.carousel-inner --&gt;
  
      &lt;!-- Controls --&gt;
      &lt;a class="left carousel-control" href="#homepage-feature" data-slide="prev"&gt;
                  &amp;lsaquo;
              &lt;/a&gt;
      &lt;a class="right carousel-control" href="#homepage-feature" data-slide="next"&gt;
                  &amp;rsaquo;
              &lt;/a&gt;
    &lt;/div&gt;
    &lt;!-- /#homepage-feature.carousel --&gt;
  
    &lt;div style="width: 300px; height: 500px; background: red;"&gt;&lt;/div&gt;
  
  &lt;/main&gt;</code></pre>
  </div>
  </div>
  </p>