Как прижать блок с элементами к правому краю в bootstrap 4?

Question

[ohwoow]

Есть два блока, у левого col-xl-5, у правого col-xl-7. Почему правый блок не хочет прижиматься к правому краю? Задавал row justify-content-between, пробовал менять ширину колонок, всё тщетно. Это прикол бутстрапа или я что-то не так делаю?

Вот html код:

<section class="about">

        <div class="container">
            
            <div class="row about__content">
                <div class="col-xl-5">
                    <h3 class="title">
                        О нас
                    </h3>
                    <div class="about__text">
                        Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн.
                    </div>
                </div>

                <div class="col-xl-7 about-stat d-flex">
                    <div class="about-stat__item">
                        <div class="about-stat__num">48</div>
                        <span class="about-stat__text">офисов</span>
                        <span class="about-stat__subtext">В Европе и СНГ</span>
                    </div>
                    <div class="about-stat__item">
                        <div class="about-stat__num">361</div>
                        <span class="about-stat__text">грузовик</span>
                        <span class="about-stat__subtext">Volvo, Scania</span>
                    </div>
                    <div class="about-stat__item">
                        <img src="app/img/truck-img.jpg" alt="">
                    </div>
                    <div class="about-stat__item">
                        <img src="app/img/truck-img.jpg" alt="">
                    </div>
                    <div class="about-stat__item">
                        <div class="about-stat__num">1500</div>
                        <span class="about-stat__text">сотрудников</span>
                        <span class="about-stat__subtext">профессионалов</span>
                    </div>
                </div>
            </div>

        </div>

    </section>

Вот css код:

.about {
    padding-bottom: 120px;
}

.about__text {
    line-height: 23px;
}

.about-stat {
    flex-wrap: wrap;
}



.about-stat__item {
    width: 100%;
    max-width: 200px;
    background: #FFFFFF;
    text-align: center;

    color: #000;


    border: 1px solid #C8A35F;

    img {
        display: block;
        width: 100%;
        height: 100%;
    }
    
    span {
        display: block;
    }
}

.about-stat__text {
    font-size: 18px;
    line-height: 21px;
    letter-spacing: 0.05em;

    margin-bottom: 15px;
}
.about-stat__subtext {
    font-size: 12px;
    line-height: 14px;
    padding: 0 54px;

    padding-bottom: 25px;
}

.about-stat__num {
    padding-top: 23px;
    font-weight: bold;
    font-size: 64px;
    line-height: 75px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #2F343A;;
}

Answer 1

[Alexander Lashchevsky]

Возможно вам нужно обновить версию бутстрапа, так как justify-content-end (который нужно прописывать вместе d-flex у col-xl-7) появился в Bootstrap 4 не сразу, возможно у вас версия которая пока его не поддерживает.

Comments

[ohwoow]

версия 4.4.1, вряд ли в этом проблема..

[ohwoow]

хотя, проблема как раз в этом. Я не задал justify-content-end второму блоку) Спасибо вам, уже как 2 час голову ломал)

[Alexander Lashchevsky]

ohwoow, да, вот работающий как надо пример на JSFiddle. Я только добавил justify-content-end, всё остальное 1в1 как у вас.