CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-4bootstrap-4
ottz0
ottz0

Reputation: 2605

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>

Upvotes: 0

Views: 656

Answers (2)

Teleuko
Teleuko

Reputation: 31

It's seems that something has changed from the last vertion (alpha 5). You have to change "p-b-3" to "pb-3". Test it out!

Upvotes: 0

Edd
Edd

Reputation: 1988

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

Upvotes: 1

Related Questions