Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Styling bootstrap carousel indicators

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%;
}
like image 632
cosmichero2025 Avatar asked Oct 08 '16 20:10

cosmichero2025


1 Answers

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;
}
like image 129
Jossey Ogbuanoh Avatar answered Oct 13 '22 00:10

Jossey Ogbuanoh