Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change Bootstrap carousel dot indicators to squares

I need to change the little dot indicators on a Bootstrap 3 carousel to squares. Any ideas are appreciated.

like image 295
wibberding Avatar asked May 21 '14 20:05

wibberding


People also ask

How do you change the shape of carousel indicators?

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% .

Is Bootstrap carousel good?

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.


2 Answers

Set the border-radius to 0 on .carousel-indicators li

like image 103
Will Avatar answered Oct 31 '22 16:10

Will


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;
}
like image 44
webdad3 Avatar answered Oct 31 '22 17:10

webdad3