title: Position carousel chevrons alongside bullets
body: <p>I am using R's bsplus package to build a carousel of images. I want to move the chevrons next to the bullets.</p>
  <p>I am aware of <a href="https://stackoverflow.com/questions/31316645/how-to-position-the-bootstrap-carousel-controls-to-the-extreme-right-and-extreme">this</a> SO sol'n regarding how to reposition the prev/next chevrons.</p>
  <p>I can get close (see the 'right' chevron) but when I position it where I want it (see the 'left' chevron) it's no longer clickable.</p>
  <p>Why is this?
  How can I position the chevrons next to the bullets and maintain their functionality?</p>
  <p>R Script</p>
  <pre><code>library(&quot;shiny&quot;)
  library(&quot;bsplus&quot;)
  
  
  ui &lt;- fluidPage(
  
    
    includeCSS(&quot;/home/law/whatbank_home/tests/bullet.css&quot;),
    
    # Application title
    titlePanel(&quot;Carousel Demo&quot;),
    
    uiOutput(&quot;carousel&quot;)
  )
  
  server &lt;- shinyServer(function(input, output) {
    output$carousel &lt;- renderUI({
  
      bs_carousel(id = &quot;images&quot;, use_indicators = TRUE) %&gt;%
        bs_append(
          content = bs_carousel_image(src = &quot;https://placehold.it/900x500/3c8dbc/ffffff&amp;text=Merry&quot;)
        ) %&gt;%
        bs_append(
          content = bs_carousel_image(src = &quot;https://placehold.it/900x500/3c8dbc/ffffff&amp;text=Christmas&quot;)
        ) %&gt;%
        bs_append(
          content = bs_carousel_image(src = &quot;https://placehold.it/900x500/3c8dbc/ffffff&amp;text=To&quot;)
        ) %&gt;%
        bs_append(
          content = bs_carousel_image(src = &quot;https://placehold.it/900x500/3c8dbc/ffffff&amp;text=All&quot;)
        ) 
    })
    
  })
  
  # Run the application
  shinyApp(ui = ui, server = server)
  </code></pre>
  <p>css</p>
  <pre><code>.carousel-control.left,
  .carousel-control.right {
    background: transparent;
  }
  
  .carousel-indicators .active {
    background-color: #FCB700;
    margin-bottom: 70px;
  }
  
  .carousel-indicators li {
    background-color: #D8D8D8;
    border: 1px solid #000;
    margin-bottom: 70px;
  }
  
  
  .carousel-control.left .glyphicon {
      left: 180px;
      margin-left: 180px;
      top: 183px;
      margin-top: 183px;
  }
  .carousel-control.right .glyphicon {
      right: 180px;
      margin-right: 180px;
      top: 160px;
      margin-top: 160px;
  }
  </code></pre>