title: Bootsrap Carousel Data-slide Arrows are under slide image
body: <p>I have a bootstrap carousel i am trying to add buttons/arrows to switch between slides I have assigned the position to be absolute, Its clickable and works but the arrows are under the image what could be the problem check here > <a href="https://tadzik9634.000webhostapp.com/index.php" rel="nofollow noreferrer">link</a> </p>
  
  <p>Here is the code</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#myCarousel .carousel-indicators {
    position: absolute !important;
  }
  
  @media (max-width: 768px) {
    /* Make the indicators larger for easier clicking with fingers/thumb on mobile */
    #myCarousel .carousel-indicators {
      bottom: -20px !important;
      position: absolute !important;
    }
    #myCarousel .carousel-indicators li {
      display: inline-block;
      margin: 0px 5px;
      width: 15px;
      height: 15px;
    }
    #myCarousel .carousel-indicators li.active {
      margin: 0px 5px;
      width: 20px;
      height: 20px;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="overlay"&gt;
    &lt;a href="lest-sidebar.php"&gt;&lt;input class="btn btn-default" type="submit" name="submit" value="Order Cleaning" /&gt;&lt;/a&gt;
  &lt;/div&gt;
  &lt;div id="myCarousel" class="carousel slide" style="width:100%;height:auto"&gt;
    &lt;!-- Indicators --&gt;
    &lt;ol class="carousel-indicators"&gt;
      &lt;li data-target="#myCarousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;
      &lt;li data-target="#myCarousel" data-slide-to="1"&gt;&lt;/li&gt;
      &lt;li data-target="#myCarousel" data-slide-to="2"&gt;&lt;/li&gt;
    &lt;/ol&gt;
    &lt;div class="carousel-inner" style="height:auto"&gt;
      &lt;div class="item active"&gt;
        &lt;img src="images/test.png" class="img-responsive"&gt;
        &lt;div class="container"&gt;
          &lt;div class="carousel-caption"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;
        &lt;img src="images/test.png" class="img-responsive"&gt;
        &lt;div class="container"&gt;
          &lt;div class="carousel-caption"&gt;
  
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;
        &lt;img src="images/test.png" class="img-responsive"&gt;
        &lt;div class="container"&gt;
          &lt;div class="carousel-caption"&gt;
  
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;a data-slide="prev" href="#myCarousel" class="left carousel-control"&gt;&lt;i class="fa fa-chevron-left"&gt;&lt;/i&gt;&lt;/a&gt;
      &lt;a data-slide="next" href="#myCarousel" class="right carousel-control"&gt;&lt;i class="fa fa-chevron-right"&gt;&lt;/i&gt;&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>