Styling bootstrap carousel indicators - html

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. :/