@sunnyrio

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

Как увеличить расстояние между блоками текста (bootstrapv4)? см. screen ниже

<div class="col-md-4">
                <div class="media">
                    <img class="align-self-start mr-3" src="img/icon/customize.png" alt="Generic placeholder image">
                    <div class="media-body">
                        <h5 class="mt-0">Accusan timar</h5>
                        <p class="h4block2">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantiu</p>
                    </div>
                </div>
                <div class="media">
                    <img class="align-self-start mr-3" src="img/icon/time.png" alt="Generic placeholder image">
                    <div class="media-body">
                        <h5 class="mt-0">Accusan timar</h5>
                        <p class="h4block2">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantiu</p>
                    </div>
                </div>
                <div class="media">
                    <img class="align-self-start mr-3" src="img/icon/music.png" alt="Generic placeholder image">
                    <div class="media-body">
                        <h5 class="mt-0">Accusan timar</h5>
                        <p class="h4block2">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantiu</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <img src="img/phone.png">
            </div>
            <div class="col-md-4">
                <div class="media">
                    <img class="align-self-start mr-3" src="img/icon/support.png" alt="Generic placeholder image">
                    <div class="media-body">
                        <h5 class="mt-0">Accusan timar</h5>
                        <p class="h4block2">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantiu</p>
                    </div>
                </div>
                <div class="media">
                    <img class="align-self-start mr-3" src="img/icon/send.png" alt="Generic placeholder image">
                    <div class="media-body">
                        <h5 class="mt-0">Accusan timar</h5>
                        <p class="h4block2">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantiu</p>
                    </div>
                </div>
                <div class="media">
                    <img class="align-self-start mr-3" src="img/icon/camera.png" alt="Generic placeholder image">
                    <div class="media-body">
                        <h5 class="mt-0">Accusan timar</h5>
                        <p class="h4block2">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantiu</p>
                    </div>
                </div>
            </div>


59ea3a9aa5e03810296630.png
  • Вопрос задан
  • 254 просмотра
Пригласить эксперта
Ответы на вопрос 2
arsenty
@arsenty
Full Stack Designer
Либо перенос строки <br/> в нужном количестве, либо соответствующие правила в CSS.
Ответ написан
@Alexandr59
Блоку можно задать классы:
Если padding, то пишется p-
Если margin, то пишется m-
Также указывается с какой стороны и через тире размер отступа от 1 до 5.

Пример:
class="pt-5"   Это паддинг топ 5й уровень
class="ml-3"  Это margin left 3й уровень


Сторона указывается по первой букве
t = top
l = left
r = right
b = bottom

Еще пример.
Надо увеличить отступы справа и снизу у блока div.

<div class="pt-5 pb-5">
</div>
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы