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:
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?
To do that, the only change we need to make to the HTML code is adding the class carousel-fade to the main carousel div. In our example it's the div with the ID element my-carousel . Next, we can just copy and paste the CSS code below and you will be good to go!
The Data-interval attribute is used to set the interval time between two carousel item by default its value is 3000 milliseconds.
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%;
}
I had to include .carousel for it to work properly.
.carousel .carousel-indicators li {
width: 10px;
height: 10px;
border-radius: 100%;
}
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With