Как выравнять колонки в bootstrap 4?

Question

[olesya777]

Как сделать чтобы текст во втором ряду шел ровно под первым рядом?

Проблема появилась после добавления иконок. Я так понимаю из-за того что у них разная ширина. Как тогда их поставить ровно? Я пробовала дать им отдельный столбец, но все-равно все летит. Если поставить на before и позиционирование то тоже все криво получается. Как их выровнять тогда, подскажите пожалуйста.
В два ряда если делать то тоже все криво

<div class="row">

                <div class="col-lg-4">
                    <div class="features d-flex">
                        <i class="fa fa-tablet feature__icon"></i>
                        <div class="feature__block">
                            <h3 class="feature__title">
                                Fully Responsive
                            </h3>
                            <p class="feature__text">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae eros eget tellus
                                tristique bibendum.
                            </p>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4">
                    <div class="features d-flex">
                        <i class="fa fa-link feature__icon"></i>
                        <div class="feature__block">
                            <h3 class="feature__title">
                                Fully Layered PSD
                            </h3>
                            <p class="feature__text">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae eros eget tellus
                                tristique bibendum.
                            </p>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4">
                    <div class="features d-flex">
                        <i class="fa fa-folder feature__icon"></i>
                        <div class="feature__block">
                            <h3 class="feature__title">
                                Font Awesome Icons
                            </h3>
                            <p class="feature__text">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae eros eget tellus
                                tristique bibendum.
                            </p>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4">
                    <div class="features d-flex ">
                        <i class="fa fa-code feature__icon "></i>
                        <div class="feature__block">
                            <h3 class="feature__title">
                                HTML3 & CSS3
                            </h3>
                            <p class="feature__text">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br> Praesent vitae eros eget
                                tellus tristique bibendum.
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="features d-flex">
                        <i class="fa fa-envelope feature__icon"></i>
                        <div class="feature__block">
                            <h3 class="feature__title">
                                Email Template
                            </h3>
                            <p class="feature__text">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae eros eget tellus
                                tristique bibendum.
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="features d-flex">
                        <i class="fa fa-download feature__icon"></i>
                        <div class="feature__block">
                            <h3 class="feature__title">
                                Free to download
                            </h3>
                            <p class="feature__text">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae eros eget tellus
                                tristique bibendum.
                            </p>
                        </div>
                    </div>
                </div>

            </div>

Answer 1

[mahmudchon]

Из простого - берете значение самой широкой и прописываете его для всех, например, на уровне min-width и тп.

.features i {
    min-width: 50px;/* или любое другое значение */
}