title: How do I make the bootstrap carousel controls appear on top of the images instead of next to them?
body: <p>I'm using the carousel code provided by bootstrap and although it's working, the controls are taking up space to the right and left of the image instead of lying on top of them.</p>
  
  <p>I'm a newbie so so far my attempt to fix this was to add</p>
  
  <pre><code>}
  .left carousel-control {
      position: absolute;
  }
  .right carousel-control {
      position: absolute;
  }
  </code></pre>
  
  <p>but it's not changing anything</p>
  
  <p>Here is the full code, the controls are on the sides of the screen instead of on top of the images:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Caroussel test&lt;/title&gt;
  &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8" &gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;link href="css/uxcore.css" rel="stylesheet"&gt;
  &lt;link href="css/customer-comp.css" rel="stylesheet"&gt;
      &lt;!-- Latest compiled and minified CSS --&gt;
  &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"&gt;
  
  &lt;!-- Optional theme --&gt;
  &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous"&gt;
  
  &lt;!-- Latest compiled and minified JavaScript --&gt;
      &lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"&gt;&lt;/script&gt;
  
  &lt;script type='text/javascript'&gt;
  var fqdn = "N1NWVPWEB066.shr.prod.ams1.secureserver.net";
  redirectToLogin = function() {
      window.location.href = "https://" + fqdn + ":8443";
  }
  &lt;/script&gt;   
      &lt;style&gt;
          .wrapper {
     position: relative;
  }
  .left.carousel-control {
      position: absolute;
  }
          }
  .right.carousel-control {
      position: absolute;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
          &lt;div id="carousel-example-generic" class="carousel slide" data-ride="carousel"&gt;
    &lt;!-- Indicators --&gt;
    &lt;ol class="carousel-indicators"&gt;
      &lt;li data-target="#carousel-example-generic" data-slide-to="0" class="active"&gt;&lt;/li&gt;
      &lt;li data-target="#carousel-example-generic" data-slide-to="1"&gt;&lt;/li&gt;
      &lt;li data-target="#carousel-example-generic" data-slide-to="2"&gt;&lt;/li&gt;
    &lt;/ol&gt;
  
    &lt;!-- Wrapper for slides --&gt;
    &lt;div class="carousel-inner" role="listbox"&gt;
      &lt;div class="item active"&gt;
        &lt;img src="1-rs.png" alt="..." class="img-responsive center-block"&gt;
        &lt;div class="carousel-caption"&gt;
          ...
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;
        &lt;img src="2-rs.png" alt="..." class="img-responsive center-block"&gt;
        &lt;div class="carousel-caption"&gt;
          ...
          &lt;/div&gt;
        &lt;/div&gt;
          &lt;div class="item"&gt;
        &lt;img src="3-rs.png" alt="..." class="img-responsive center-block"&gt;
        &lt;div class="carousel-caption"&gt;
          ...
        &lt;/div&gt;
  
      &lt;/div&gt;
      ...
    &lt;/div&gt;
  
    &lt;!-- Controls --&gt;
    &lt;a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev" style="position: absolute"&gt;
      &lt;span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;
      &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
    &lt;/a&gt;
    &lt;a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"&gt;
      &lt;span class="glyphicon glyphicon-chevron-right" aria-hidden="true"&gt;&lt;/span&gt;
      &lt;span class="sr-only"&gt;Next&lt;/span&gt;
    &lt;/a&gt;
  &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>++Update: I've tried to position the arrows on top of the images by adding position: absolute and top: 0 to carousel-control as suggested by @Swati and inspecting the element showed that those rule are being overridden by <a href="http://stockpath.bootstrapcdn.com/bootstrap/3.4.1/css/less/carousel.less:96" rel="nofollow noreferrer">http://stockpath.bootstrapcdn.com/bootstrap/3.4.1/css/less/carousel.less:96</a> and mydomain.com/:30
  What does this mean? Is there a way around it?</p>