title: Bootstrap V4 Carousel Navigation Arrow Label
body: <p>Im using Bootstrap V4 and Im trying to add a label to the Carousel Navigation Arrows. 
  I decided to unhide the labels for Screen Readers but I wanted to place them under the arrow centered. </p>
  
  <p><a href="https://i.stack.imgur.com/UcU6r.jpg" rel="nofollow noreferrer">Carousel Print</a></p>
  
  <p>Currently the Arrows HTML is like this:</p>
  
  <pre><code>&lt;a class="carousel-control-prev" href="#outlookProfile" role="button" data-slide="prev" onclick="(function(event) {event.preventDefault();})(event)"&gt;
          &lt;span class="carousel-control-prev-icon" aria-hidden="true"&gt;&lt;/span&gt;
          &lt;span &gt;Previous&lt;/span&gt;
      &lt;/a&gt;
      &lt;a class="carousel-control-next" href="#outlookProfile" role="button" data-slide="next" onclick="(function(event) {event.preventDefault();})(event)"&gt;
          &lt;span &gt;Next&lt;/span&gt;
          &lt;span class="carousel-control-next-icon" aria-hidden="true"&gt;&lt;/span&gt;
      &lt;/a&gt;
  </code></pre>
  
  <p>I've tried playing around with CSS setting diferent Display properties, width, floats, etc without success :(</p>
  
  <p>Any suggestion on how I can achieve this? </p>
  
  <p>Thank you very much,
  Ralms</p>