I want to show text as a carousel indicators in bootstrap. The property text-indent is set to -999px for .carousel-indicators [data-bs-target] by default, I changed it 0. Here, is the code:

<div id="carouselExampleIndicators"  data-bs-ride="carousel">
   <div >
      <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" 
         aria-current="true" aria-label="Slide 1" style="
            text-indent: 0;">Test Button</button>
      <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"
         aria-label="Slide 2"></button>
      <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"
         aria-label="Slide 3"></button>
      <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3"
         aria-label="Slide 4"></button>
   </div>

   <div >
      <div >
         <!-- Some other content for this slide -->
         <img src="..."  alt="...">
      </div>
      <div >
         <!-- Some other content for this slide -->
         <img src="..."  alt="...">
      </div>
      <div >
         <!-- Some other content for this slide -->
         <img src="..."  alt="...">
      </div>
      <div >
         <!-- Some other content for this slide -->
         <img src="..."  alt="...">
      </div>
   </div>
</div>

My requirement is to carousel slide with text as indicators. Can explain why is the content out of the box? and how to show text as indicators?

Thanks in advance!

CodePudding user response：

Just put "text" class on the button that contains text:

<button type="button" >Test Button</button>

Then try this CSS:

.carousel-indicators [data-bs-target] {
            width: 20px;
            height: 20px;
            border-radius: 10px;
            overflow: hidden;
        }
        .carousel-indicators .text[data-bs-target] {
            width: auto;
            height: 20px;
            text-indent: 0;
        }

I hope this will work.