How do you style Bootstrap 4 carousel indicators to have no fill and only circular outlines?

Question

I made a carousel and I want to make my indicators (the ones at the bottom of the carousel) white hollow circles with no or white fill. By default, they are long, rectangular and white. I managed to make them circular and dark by doing this to my CSS:

.carousel-indicators > li {
    border-radius: 50%;
    width: 10px;
    height: 10px;
}

.darken {
    filter: invert(40%);
}

But I want the circles to only have an outline and no fill so how can I do that? I tried adding color: red to experiment but the colour of the circles won't change.

Answer 1

All you need to do is to override some CSS properties.

.carousel-indicators li{
    margin-right: 3px;
    margin-left: 3px;
    background-color: #fff;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
}

Set background-color: transparent and border: 0 to remove bootstrap style and set box-shadow for nice outline. Increase margin so elements are nicely separated.

Notice: You don't need !important in your code, it was required here in this code snippet otherwise the example wouldn't work.

.carousel-indicators li {
  width: 10px !important;
  height: 10px !important;
  margin-right: 5px !important;
  margin-left: 5px !important;
  border-radius: 50% !important;
  border: 0 !important;
  background-color: transparent !important;
  box-shadow: 0 0 0 .2rem rgba(0,0,0,1) !important;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>


<div id="carousel-1" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carousel-1" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-1" data-slide-to="1"></li>
        <li data-target="#carousel-1" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <div class="carousel-item active"><img src="https://via.placeholder.com/800x400/007bff/ffffff" class="d-block w-100" alt=""></div>
        <div class="carousel-item"><img src="https://via.placeholder.com/800x400/dc3545/ffffff" class="d-block w-100" alt=""></div>
        <div class="carousel-item"><img src="https://via.placeholder.com/800x400/28a745/ffffff" class="d-block w-100" alt=""></div>
    </div>
    <a class="carousel-control-prev" href="#carousel-1" role="button" data-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="sr-only">Previous</span></a>
    <a class="carousel-control-next" href="#carousel-1" role="button" data-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="sr-only">Next</span></a>
</div>