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

Question

[sunnyrio]

Как увеличить расстояние между блоками текста (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>

Answer 1

[arsenty]

Либо перенос строки <br/> в нужном количестве, либо соответствующие правила в CSS.

Comments

[sunnyrio]

перенос строки <br/> чтоли?

[arsenty]

sunnyrio, да, разметку съел парсер, не знал, что на тостере такое есть :)

[sunnyrio]

arsenty, как сделать без <br/>

[sunnyrio]

arsenty, у меня там каждый блок текста еще в <div> заключаться будет для дальнейшей подсветки каждого блока при наведении курсора, то есть 3 блока <div> как между ними это растояние сделать?

[arsenty]

sunnyrio, выше я уже написал: либо перенос строки (простейший способ, не знаю, почему он вас не устраивает), либо добавление CSS-стилей.

Answer 2

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