cosmichero 2025 cosmichero 2025 - 1 month ago 14
CSS Question

Styling bootstrap carousel indicators

Hello I'm trying to get the default bootstrap carousel indicators to be very thin yellow lines stuck att he bottom as shown below.

https://gyazo.com/43b9bdbcb63dde3f5fe9b982d4b96b37

I got them to be at the bottom of the page but I can't seem to change them into rectangles or change their color.

HTML

<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>


CSS

.carousel-indicators {
margin: 0px;
height: 0px;
}

.carousel-indicators ol {
width: 100%;
}


.carousel-indicators li{
height: 3px !important;
border-radius: 0px !important;
width: 25%;
}

Answer

Something like this? Note that the width is not totally accurate because I just made it 33%.

.item img {
  width: 100%;
  height: auto
}

.carousel {
  position: relative;
  width: 200px;
  height: 100px;
}

ol.carousel-indicators {
  position: absolute;
  bottom: 0;
  margin: 0;
  left: 0;
  right: 0;
  width: auto;
}

ol.carousel-indicators li,
ol.carousel-indicators li.active {
  float: left;
  width: 33%;
  height: 10px;
  margin: 0;
  border-radius: 0;
  border: 0;
  background: transparent;
}

ol.carousel-indicators li.active {
  background: yellow;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div id="carousel" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carousel" data-slide-to="0" class="active"></li>
    <li data-target="#carousel" data-slide-to="1"></li>
    <li data-target="#carousel" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="http://placehold.it/200x100" alt="Slide 1">
      <div class="carousel-caption">
        Slide 1
      </div>
    </div>
    <div class="item">
      <img src="http://placehold.it/200x100" alt="Slide 2">
      <div class="carousel-caption">
        Slide 2
      </div>
    </div>
    <div class="item">
      <img src="http://placehold.it/200x100" alt="Slide 3">
      <div class="carousel-caption">
        Slide 3
      </div>
    </div>
  </div>
  <a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>