title: Bootstrap carousel arrow positioning
body: <p>I'm left scratching my head on this. Currently, I have my arrows outside the tiles for my carousel. See Below:</p>
  
  <p><a href="https://i.stack.imgur.com/7tCpf.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/7tCpf.jpg" alt="enter image description here"></a></p>
  
  <p>How do I move the arrows down so they're right next to the outside of the indicators to the left and right like below without overlapping?</p>
  
  <p><a href="https://i.stack.imgur.com/pDKtv.png" rel="noreferrer"><img src="https://i.stack.imgur.com/pDKtv.png" alt="enter image description here"></a></p>
  
  <p>This web app populates different tiles depending on what users log in so it's important to keep the arrows adjusting based on how many carousel indicators populate per user.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="{{ game_group }}-game-carousel" class="carousel slide"&gt;
  &lt;div class="test"&gt;
  &lt;div class="carousel-indicator-wrapper"&gt;
  
      &lt;ol class="carousel-indicators"&gt;
          {% for obj in game_data %}
              &lt;li data-target="#{{ game_group }}-game-carousel" data-slide-to="{{ forloop.counter0 }}" class="{% if forloop.counter == 1 %}active{% endif %}"&gt;&lt;/li&gt;
              {% if game_group != "NS" and forloop.last %}
                  &lt;li data-target="#{{ game_group }}-game-carousel" data-slide-to="{{ forloop.counter0 | add:"1" }}"&gt;&lt;/li&gt;
              {% endif %}
          {% endfor %}
      &lt;/ol&gt;
  
  &lt;/div&gt;
  &lt;a class="carousel-control left" href="#{{ game_group }}-game-carousel" data-slide="prev"&gt;&lt;i class="icon-chevron-left" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;
  &lt;a class="carousel-control right" href="#{{ game_group }}-game-carousel" data-slide="next"&gt;&lt;i class="icon-chevron-right" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#SL-game-carousel, #CL-game-carousel{
  height: 425px;
  margin-bottom:0px;
  border:0px solid red;
  }
  
  #NS-game-carousel{
  height:180px;
  margin-bottom:0px;
  border:0px solid red;
  }
  
  .carousel-indicator-wrapper{
    position:absolute;
    top:160px;
    z-index: 5;
    width:100%;
  }
  
  #lobby-tab-content .carousel-indicator-wrapper{
    top: 362px;
  }
  
  .carousel-indicators {
    position:relative;
    padding:0;
    /*use this display this to center the indicators horizontally*/
    display:table;
    margin:0 auto;
    top: 0px;
  }
  
  .carousel-indicators li {
  background-color: rgba(223, 223, 223, 0.40);
  border-radius: 5px;
  height: 10px;
  margin-left: 2px;
  margin-right: 2px;
  width: 10px;
  cursor: pointer;
  }
  
  .carousel-indicators .active {
    background: rgb(255,255,255);
  }
  
  .test {
  text-align: center;
  }
  
  .slot-carousel {
    width:640px;
    height:345px;
    /*background-color:rgba(255,0,0,.3);*/
    margin: 0 auto;
  }
  
  #NS-game-carousel .slot-carousel {
  height:180px;
  }
  
  #lobby-tab-content #SL-game-carousel .carousel-control, #NS-game-carousel                 
  .carousel-control, #CL-game-carousel .carousel-control {
    margin: /*178px 0px 0px 270px*/; 
    border-radius: 0;
    background-color:transparent;
    color: #dfdfdf;
    font-size: 38px;
    height: 40px;
    width: 40px;
    opacity: 1;
    filter: alpha(enabled='false');
    border:0;
    text-decoration: none;
  }
  
  #lobby-tab-content #SL-game-carousel .carousel-control.right, #NS-game-carousel .carousel-control.right, #CL-game-carousel .carousel-control.right {
    margin: /*178px 299px 0px 0px*/;
  }
  
  .icon-chevron-left:hover {
      color: #d8d8d8 /*#cbcbcb*/;
  }
  .icon-chevron-right:hover {
      color: #d8d8d8 /*#cbcbcb*/;
  }
  
  #game-lobby #NS-game-carousel .carousel-control{
    margin-top:-27px;
  }
  
  #game-lobby #NS-game-carousel .carousel-control.right{
    margin-top:-24px;
  }
  
  .carousel-control.left {
      background-image: none !important;/*url('/static/images/arrow-left.png');*/
      background-position: 0px 0px;
      background-repeat: no-repeat;
  }
  
  .carousel-control.right {
      left: auto;
      right: 15px;
      background-image: none !important; /*url('/static/images/arrow-right.png')*/
      background-position:0px 0px;
      background-repeat:no-repeat;
  }
  </code></pre>
  
  <p>Any help is gladly appreciated. Thanks! </p>