ottz0 ottz0 - 2 months ago 22
CSS Question

Bootstrap v4 not applying row padding

I am using

Bootstrap V4 Alpha
and I am making rows.

However I am expecting the rows to have spacing. So with every row I create it just colapses underneath the first row without any space. I am therefore having to use the bootstrap helper classes such as
p-b-3
in order to space out rows.

Have I turned something off perhaps?

enter image description here

<div class="container">
<div class="row">
<main role="content" class="col-xs-12 col-md-8">
<div class="row heading-wrapper">
<div class="col-xs-10">
<h1>testing gutters</h1>
</div>
<div class="col-xs-2 p-r-0 pull-xs-right">
<div class="utility-menu">
<i class="fa fa-life-ring utility-icon " aria-hidden="true"></i>
<i class="fa fa-chevron-down menu-chev" aria-hidden="true"></i>
</div>
</div>
</div><!-- /row -->

<div class="row p-b-2" style="background-color:blue;">
<div class="col-sm-4">
<div class="test" style="display:block; height:50px; background:red;">This is test</div>
</div>
<div class="col-sm-4">
<div class="test" style="display:block; height:50px; background:green;">This is test</div>
</div>
<div class="col-sm-4">
<div class="test" style="display:block; height:50px; background:blue;">This is test</div>
</div>
</div>

<div class="row" style="background-color:blue;">
<div class="col-sm-4" >
<div class="test" style="display:block; height:50px; background:orange;">This is test</div>
</div>
<div class="col-sm-4" >
<div class="test" style="display:block; height:50px; background:gray;">This is test</div>
</div>
<div class="col-sm-4" >
<div class="test" style="display:block; height:50px; background:black;">This is test</div>
</div>
</div>


</main>
<aside class="col-xs-12 col-md-4" style="background-color:blue;">
<p>This is the aside</p>
</aside>
</div>
</div>

Answer

On Bootstrap4 rows don't have any rule for padding-top or padding-bottom by default. If you want to achieve this behavior, I suggest adding the next to your custom CSS:

.row {
    padding-bottom : 2rem; /*For adding a 2rem padding to the bottom of each row*/
}

Hope it helps

Comments