I need to change the little dot indicators on a Bootstrap 3 carousel to squares. Any ideas are appreciated.
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 V04 is a great Bootstrap 4 carousel that helps you add client feedback to your website. Whether it's for products, services, apps, you name it, Carousel V04 works for ALL OF IT. The design is minimal, so adding it to different site themes and branding regulations will breeze.
Set the border-radius
to 0
on .carousel-indicators li
I would look here to change the shapes of those indicators:
.carousel-indicators {
position: absolute;
bottom: 10px;
left: 50%;
z-index: 15;
width: 60%;
padding-left: 0;
margin-left: -30%;
text-align: center;
list-style: none;
}
.carousel-indicators li {
display: inline-block;
width: 10px;
height: 10px;
margin: 1px;
text-indent: -999px;
cursor: pointer;
background-color: #000 \9;
background-color: rgba(0, 0, 0, 0);
border: 1px solid #fff;
border-radius: 10px;
}
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