Styling bootstrap carousel indicators

Question

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

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 1

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> 

Answer 2

Great css! I played with it to come up with ball indicators in half-white and the active indicator in yellow.

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

ol.carousel-indicators li,
ol.carousel-indicators li.active {
   width: 1rem;
   height: 1rem;
   margin: 0;
   border-radius: 50%;
   border: 0;
   background: transparent;
}

ol.carousel-indicators li {
   background: rgba(255,255,255,0.39);
   margin-left: .5rem;
   margin-right: .5rem;
}

ol.carousel-indicators li.active {
   background: yellow;
}

Answer 3

i have just wrote similar code for myself, i think it will help you a little bit more. by using Flex layout you can similarly stretch indicators without worrying about their width flex-grow:1; makes this job

https://codepen.io/ophiuch/pen/Jzowbo

 .carousel /*slider */ { position: relative; } .carousel .carousel-indicators /* indicator wrapper*/ { position: absolute; bottom: 0; left:0px; width: 100%; margin: 0; left: 0; right: 0; width: 100%; display: flex; /* this is for indicators */ } #headcarousel_container .carousel-indicators li /* indicators*/ { flex-grow: 1; /* make all indicator li similarly stretched */ height: 40px; border-radius: 2px; } #headcarousel_container .carousel-indicators li.active { background-color:rgba(251,222,87,0.5) ;/* changes indicators color when it is active*/ } .carousel .carousel-inner .item img { width: 100%; height: 100vh; object-fit: cover; } 

 <!DOCTYPE html> <html lang="en"> <head> <title>Carousel</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> </head> <body> <!--slider --> <div class="container-fluid" id="headcarousel_container" style="padding: 0;"> <div id="headcarouselid" class="carousel slide" data-ride="carousel"> <!-- indicators --> <ul class="carousel-indicators"> <li class="active" data-target="#headcarouselid" data-slide-to="0"></li> <li class="" data-target="#headcarouselid" data-slide-to="1"></li> <li class="" data-target="#headcarouselid" data-slide-to="2"></li> <li class="" data-target="#headcarouselid" data-slide-to="3"></li> <li class="" data-target="#headcarouselid" data-slide-to="4"></li> </ul> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <img src="https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569_960_720.jpg" title="slidepicture" alt="slidepicture"> </div> <div class="item"> <img src="https://cdn.pixabay.com/photo/2014/07/28/20/39/landscape-404072_960_720.jpg" title="slidepicture" alt="slidepicture"> </div> <div class="item"> <img src="https://cdn.pixabay.com/photo/2018/08/23/07/35/thunderstorm-3625405_960_720.jpg" title="slidepicture" alt="slidepicture"> </div> <div class="item"> <img src="https://cdn.pixabay.com/photo/2017/09/08/20/29/chess-2730034_960_720.jpg" title="slidepicture" alt="slidepicture"> </div> <div class="item"> <img src="https://cdn.pixabay.com/photo/2018/05/30/15/31/rustic-3441673_960_720.jpg" title="slidepicture" alt="slidepicture"> </div> </div> <!-- Left and right controls --> <a class="carousel-control left" href="#headcarouselid" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="carousel-control right" href="#headcarouselid" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> </div> </body> </html> 

Answer 4

This snippet changes prev and next Carousel icon controls for library react-bootstrap :

& span.carousel-control-prev-icon, & span.carousel-control-next-icon{
        background-color: black;
    }

Yeah, only the background. The icon itself is an xml image so couldn't find a way to change the colors. :/