Bootstrap 4 - change Carousel Indicators to text

Question

I am using Bootstrap 4 and I cannot change the indicator to appear the text in relation to the item. I tried some options of other Stackoverflow answers but none worked, if anyone can give an example of working code, thank you. Note: I’m using Sass with webpack.

<div class="container">
    <div id="carouselContent" class="carousel slide" data-ride="carousel">

      <!-- Indicators -->
      <ul class="carousel-indicators">
        <li data-target="#carouselContent" data-slide-to="0" class="active">text1</li>
        <li data-target="#carouselContent" data-slide-to="1">text 1</li>
        <li data-target="#carouselContent" data-slide-to="2">text 2</li>
      </ul>

      <div class="carousel-inner" role="listbox">
        <div class="carousel-item active text-center p-4">
          <h5>Text 1</h5>
          <p>
            text ...
          </p>
          <p>
            text ...
          </p>
        </div>
        <div class="carousel-item text-center p-4">
         <h5>Text 2</h5>
          <p>
            text ...
          </p>
          <p>
            text ...
          </p>
        </div>
      </div>
      <a class="carousel-control-prev" href="#carouselContent" role="button" data-slide="prev" data-interval="4000">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" href="#carouselContent" role="button" data-slide="next" data-interval="4000">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>

Answer 1

I do not know if I understand well, but in case you want to "hide" the Arrow, and show only the text you need to change the element that will receive the class .sr-only since this class is to "hide" elements on the screen, but leaves the elements visible to the Screen Readers (SR) screen readers.

See the class property sr-only

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

Note that this class was made so that the ordinary user could not see it on the screen, but leaves the element accessible to the Screen Readers. Here you check the official documentation on this: https://getbootstrap.com/docs/4.0/utilities/screenreaders/

---

So to solve the problem just remove the class .sr-only of span that has the text and put the attribute hidden in the span of arrows.

    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>


    <div class="container">
        <div id="carouselContent" class="carousel slide bg-primary" data-ride="carousel">

            <!-- Indicators -->
            <ul class="carousel-indicators">
                <li data-target="#carouselContent" data-slide-to="0" class="active">text1</li>
                <li data-target="#carouselContent" data-slide-to="1">text 1</li>
                <li data-target="#carouselContent" data-slide-to="2">text 2</li>
            </ul>

            <div class="carousel-inner" role="listbox">
                <div class="carousel-item active text-center p-4">
                    <h5>Text 1</h5>
                    <p>
                        text ...
                    </p>
                    <p>
                        text ...
                    </p>
                </div>
                <div class="carousel-item text-center p-4">
                    <h5>Text 2</h5>
                    <p>
                        text ...
                    </p>
                    <p>
                        text ...
                    </p>
                </div>
            </div>
            <a class="carousel-control-prev" href="#carouselContent" role="button" data-slide="prev" data-interval="4000">
                <span class="carousel-control-prev-icon" aria-hidden="true" hidden></span>
                <span class="">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselContent" role="button" data-slide="next" data-interval="4000">
                <span class="carousel-control-next-icon" aria-hidden="true" hidden></span>
                <span class="">Next</span>
            </a>
        </div>
    </div>

Dica1: In this answer there are more details about the Hidden attribute Use "left: -9999px" instead of "display: None"? But why?

Dica2: Mozilla documentation on the Hidden attribute https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden