When suggesting a feature, include:
Carousel indicators appear as squares however the does not appear to be documentation or availability to style or change the style of the indicators. Css/Scss styling have produced no changes.
See below:
Bootstrap 4 Carousel Indicators
Bootstrap 3 Carousel Indicators
This is something that prevents us from utilizing bootstrap 4 due to the change in appearance of the feature from past version to future version.
Bootstrap 3 didn't provide alternative carousel indicator styles, so there's little change BS4 will either -- though, you could certainly propose a new feature. Luckily, it's relatively easy to create custom indicators on your own:
.carousel-indicators--round li {
border-radius: 10px;
margin: 1px 3px;
height: 10px;
max-width: 10px;
border: 1px solid #FFF;
background-color: transparent;
}
.carousel-indicators .active {
background-color: #fff;
max-width: 12px;
margin: 0 3px;
height: 12px;
}
Just add the class .carousel-indicators--round
to .carousel-indicators
.
Please keep in mind that Bootstrap is just a 'base' CSS framework. It does not have all of the answers. You should supplement the missing components with your own CSS in your projects.
It's very possible to change these with custom CSS, so closing out.
For Bootstrap 4 I entered this in my style sheet:
.carousel-indicators li {
border-radius: 12px;
width: 12px;
height: 12px;
background-color: #404040;
}
but what do you do about the fact bootstraps width trumps your width?
How to change bullet style into number style?
Most helpful comment
Bootstrap 3 didn't provide alternative carousel indicator styles, so there's little change BS4 will either -- though, you could certainly propose a new feature. Luckily, it's relatively easy to create custom indicators on your own:
Just add the class
.carousel-indicators--round
to.carousel-indicators
.Please keep in mind that Bootstrap is just a 'base' CSS framework. It does not have all of the answers. You should supplement the missing components with your own CSS in your projects.