34

I am using Bootstrap 4 Beta 2 version to do a carousel. The code looks like below:

                <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>
                </ol>

And the carousel indicator show as lines: enter image description here

Is there a way I can change the indicators into dots instead of lines? I would assume it is an bootstrap option but I didn't find that relevant document. Do I need to write custom css for that?

8 Answers 8

81

Yes, I think you need to write custom CSS for doing lines into dots.
You just need to override two properties (width and height) and add a new one, border-radius, to .carousel-indicators li.
Make width and height values equal eg: 10px each and give a border-radius of 100%.

.carousel-indicators li {
  width: 10px;
  height: 10px;
  border-radius: 100%;
}
2
  • 1
    i just get rounded corners unless i do..not dots
    – Glen
    Apr 20, 2020 at 23:20
  • Why does "" border-radius: 100% "" work when "" border-radius: <pixel unit> "' does not work? Mar 13, 2021 at 15:06
9

In bootstrap 5 if you change what's in the comments it works.

.carousel-indicators [data-bs-target] {
    box-sizing: content-box;
    flex: 0 1 auto;
    width: 10px; /* change width */
    height: 10px; /* change height */
    padding: 0;
    margin-right: 3px;
    margin-left: 3px;
    text-indent: -999px;
    cursor: pointer;
    background-color: #fff;
    background-clip: padding-box;
    border: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    opacity: .5;
    transition: opacity .6s ease;
    border-radius: 100%; // /* add border-radius */
}

Example: image of dots

3
  • OP question is for bootstrap 4
    – Sfili_81
    Jun 18, 2021 at 9:46
  • 3
    @Sfili_81: Yes. But Bootstrap 5 wasn’t available when the OP asked the question. Offering an updated answer based on subsequent versions seems valuable to the community moving forward. Jun 27, 2021 at 2:40
  • 4
    Thanks @JeremyCaney. I actually was looking for a solution for BS5 and came up with this post so I thought why not sharing a solution for anyone like me.
    – TOPAiiN
    Jun 30, 2021 at 14:03
3

I had to include .carousel for it to work properly.

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

You just need to change the icon path in case you have one, using the inspect element you can get the class name. I used Mozilla to get the class name and then I used two svg icons for changing the default icons to custom icons.

.carousel-control-prev-icon {

    background-image: url("images/carousel/back.svg");

}

.carousel-control-next-icon {

    background-image: url("images/carousel/next.svg");

}
0

You must override the inline style using the word !important. This overrides any other styling that the element has.

I was able to style the indicators into circles with a bluish color by doing the following:

.carousel-indicators button {
    height: 10px !important;
    width: 10px !important;
    margin: 0 10px !important;
    border-radius: 100%;
    background-color: #1963ac !important;
}

The modern Bootstrap carousel is now laying them out as buttons.

0

use this:

.carousel-indicators li {
        width: 1rem;
        height: 1rem;
        border: 1px solid;
        border-radius: 50%;
        background-color: #E0E0E0;
    }
    
    .carousel-indicators .active {
        background-color: #000000;
    }
0

I used this for big circle:

.carousel-indicators [data-bs-target] {
    width: 15px;
    height: 15px;
    border-radius: 100%;
}
0

Now at Bootstrap V5.3 The Carousel Indicators " changed to be "button" not "ol" anymore so to Change Bootstrap V5.3 Carousel Indicators into dots?

This how it looks at the HTML

<div class="carousel-indicators">
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
      </div>

all you need to do to change it to Dots

Write this at CSS

.carousel-indicators .active {
     background: white !important;
}

#carouselExampleCaptions .carousel-indicators button {
    width: 10px;
    height: 10px;
    border-radius: 100%;
    border: 2px solid white;
    background: transparent;
}

and now you got dots with white background for active slide and transparent background for the rest

I hope this help.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.