Как изменить стиль отображения индикатора (bootstrapv4)?

Question

[sunnyrio]

Как изменить стиль отображения индикатора (bootstrapv4)?
ширина почему то меняется автоматом на 20 пикселей вместо положенных 10ти, и получается эллипс а нужен круг, почему так и как решить эту задачу?

Код:

<!-- Карусель 2 начало -->
            <div  style="width: 229px;height: 402px;background-color: blue;">
            <div id="carousel_about" class="carousel slide" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#carousel_about" data-slide-to="0" style="border-radius: 50%;width: 10px !important;height: 10px;" class="active"></li>
                    <li data-target="#carousel_about" data-slide-to="1" style="border-radius: 50%;width: 10px !important;height: 10px;"></li>
                    <li data-target="#carousel_about" data-slide-to="2" style="border-radius: 50%;width: 10px !important;height: 10px;"></li>
                    <li data-target="#carousel_about" data-slide-to="3" style="border-radius: 50%;width: 10px !important;height: 10px;"></li>
                </ol>
                <div class="carousel-inner carousel_user">
                    <div class="carousel-item active" style="width: 229px ; height: 400px;">
                        <img class="d-block rounded-circle center-block" src="img/man_1.jpg" alt="First slide">
                        <H5>Robert Leonaro</H5>
                        <p>CEO at CUBEDES</p>
                    </div>
                    <div class="carousel-item" style="width: 229px ; height: 400px;">
                        <img class="d-block rounded-circle" src="img/man_2.jpg" alt="Second slide">
                        <H5>Rober 2 eonaro</H5>
                        <p>CEO 2 CUBEDES</p>
                    </div>
                    <div class="carousel-item" style="width: 229px ; height: 400px;">
                        <img class="d-block rounded-circle" src="img/wom_1.jpg" alt="Third slide">
                        <H5>Rober 3 eonaro</H5>
                        <p>CEO 3 UBEDES</p>
                    </div>
                    <div class="carousel-item" style="width: 229px ; height: 400px;">
                        <img class="d-block rounded-circle" src="img/wom_2.jpg" alt="Third slide">
                        <H5>Rober 4 eonaro</H5>
                        <p>CEO 4 UBEDES</p>
                    </div>
                </div>
            </div>
            </div>
<!-- Карусель 2 конец -->

CSS:

.carousel-indicators li:after, li:before{
    height: 10px;
    width: 10px !important;
}

Comments

[Максим Тимофеев]

Что бы ответить на Ваш вопрос, надо увидеть пример. Вы или ссылку дайте или в песочнице воссоздайте:
https://jsfiddle.net/
https://codepen.io/