title: How to position carousel indicators in Bootstrap 4
body: <p>I am trying to move the indicators under the slider image by giving <code>.carousel-indicators</code> a <code>bottom: -50px;</code> but the indicators just disappear. Now I am guessing this has something to do with the <code>overflow:hidden</code> of the slider but I can't figure it out. </p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;div id="slider" class="carousel slide" data-ride="carousel"&gt;
      &lt;ol class="carousel-indicators"&gt;
          &lt;li data-target="#slider" data-slide-to="0" class="active"&gt;&lt;/li&gt;
          &lt;li data-target="#slider" data-slide-to="1"&gt;&lt;/li&gt;
          &lt;li data-target="#slider" data-slide-to="2"&gt;&lt;/li&gt;
          &lt;li data-target="#slider" data-slide-to="3"&gt;&lt;/li&gt;
          &lt;li data-target="#slider" data-slide-to="4"&gt;&lt;/li&gt;
      &lt;/ol&gt;
  
      &lt;div class="carousel-inner"&gt;
          &lt;div class="carousel-item active"&gt;
              &lt;img class="d-block w-100" src="header.jpg"&gt;
          &lt;/div&gt;
          &lt;div class="carousel-item"&gt;
              &lt;img class="d-block w-100" src="slider2.jpg"&gt;
          &lt;/div&gt;
          &lt;div class="carousel-item"&gt;
              &lt;img class="d-block w-100" src="slider3.jpg"&gt;
          &lt;/div&gt;
          &lt;div class="carousel-item"&gt;
              &lt;img class="d-block w-100" src="slider4.jpeg"&gt;
          &lt;/div&gt;
          &lt;div class="carousel-item"&gt;
              &lt;img class="d-block w-100" src="slider5.jpeg"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and CSS here: </p>
  
  <pre><code>#slider {
      height: 350px;
      overflow: hidden;
      width: 100%;
  }
  .carousel-indicators li {
      width: 10px;
      height: 10px;
      border-radius: 100%;
  }
  .carousel-indicators {
      bottom: -50px;
  }
  </code></pre>