Bootstrap: Carousel Indicators for rotators cannot be changed to round shape.

Created on 26 Apr 2017  路  5Comments  路  Source: twbs/bootstrap

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
b4indicators

Bootstrap 3 Carousel Indicators
b3indicators

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.

css v4

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:

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

All 5 comments

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?

Was this page helpful?
0 / 5 - 0 ratings

Related issues

fohlsom picture fohlsom  路  3Comments

eddywashere picture eddywashere  路  3Comments

iklementiev picture iklementiev  路  3Comments

steve-32a picture steve-32a  路  3Comments

kamov picture kamov  路  3Comments