CODEWITHSUNDEEP
csstwitter-bootstrapbootstrap-4
user3384674
user3384674

Reputation: 837

customize the carousel indicators in Bootstrap 4

In Bootstrap 4 I have a carousel with two slides. I want to customize the carousel indicators.

As shape I would like to use dots, the color of the active dot should be red, the color of the inactive dot should be black. The two dots should be surrounded by a white pill-like shape to stand out from the gray background.

It should look like this:

enter image description here

I managed to change the shape of the indicators according to the answer https://stackoverflow.com/a/47235368/3384674 as well as the colors:

.carousel-indicators li {
        width: 10px;
        height: 10px;
        border-radius: 100%;
        background-color: black;
        opacity: 1;
      }

.carousel-indicators li.active {
        background-color: red;
      }

However I don't know how I can get the white pill-like shape around the indicators so that they always fit nicely around the dots.

Upvotes: 1

Views: 1485

Answers (1)

Jay Ukani
Jay Ukani

Reputation: 442

.carousel-indicators{
    max-width: 120px;
    margin-left: auto;
    margin-right: auto;
    background: #fff;
    border-radius: 25px;
    padding: 8px;
    align-items: center;
}
.carousel-indicators li{
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background: black;
    opacity: 1;
    border: 0;
}
.carousel-indicators li.active {
    background-color: red;
}

Upvotes: 3

Related Questions