Clever Geek Handbook

How to remove padding from first and last row element correctly in Twitter Bootstrap

I have been using bootstrap for quite some time now and this is my first time facing this problem. I really don't know how to do this. I found a lot of people suggesting to just delete padding-left

in the element first-child

and in the last one. I also tried this way at first, but then realized it couldn't work as the class .col

has a property box-sizing: border-box;

that makes the div have padding included in width. (Which is obviously necessary if you want to use a clean layout with help width: 25%;

).

So if you remove those padding on the left, the first and last div will be 15px larger, which will break the layout ... I want each col div to have exactly the same width, I want them to fit 100% of the row and do not have left or right spacers. Is there a class I don't know about in bootstrap?

Is it possible to keep the Bootstrap 3 templating system?

Sample code:

 <div class="row">
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
 </div>
+3


source to share


3 answers


I finally found a way to get around this by creating my own class, which I believe respects the way bootstrap created its layout system. Here was the best and minimal way to do it:

CSS

.layout-no-gutter-around.is-4-columns > .col-md-3{
   margin: 0 5px;
 }

.layout-no-gutter-around.is-4-columns > .col-md-3:first-child{
   margin-left: 0;
   padding-left: 0;
   width: calc(25% - 15px);
}

.layout-no-gutter-around.is-4-columns > .col-md-3:last-child{
   margin-right: 0;
   padding-right: 0;
   width: calc(25% - 15px);
}


Html

 <div class="row layout-no-gutter-around is-4-colums">
   <div class="col-md-3"></div>
   <div class="col-md-3"></div>
   <div class="col-md-3"></div>
   <div class="col-md-3"></div>
 </div>

This way I achieve exactly what I want, reuse and respect the mindset of Twitter Bootstrap (I believe). Thanks to Deja Wu who led me to the tape, I think this is a good way to achieve this. But you cannot put 15 margins on the first child and directly on the last child, as this will still create a gutter around, but using a margin.

+3


source


I was not able to solve your problem, but I have 2 ideas and maybe this will lead you to a solution.

  • Replace padding

    with margin

    s

Html

<div class="row" id="optionOne">
  <div class="col-md-3">first child</div>
  <div class="col-md-3">child</div>
  <div class="col-md-3">child</div>
  <div class="col-md-3">last child</div>
</div>

CSS

#optionOne > div:first-child {
    background-color: red; /* for display purposes only */
    padding-left: 0px;
    margin-left: 15px;
}
#optionOne > div:last-child {
    background-color: yellow; /* for display purposes only */
    padding-right: 0px;
    margin-right: 15px;
}


Not sure if this will satisfy your design requirements.

  1. recalc width

CSS

@media (min-width: 992px) {
    #optionTwo > div:first-child {
        background-color: green; /* for display purposes only */
        padding-left: 0px;
    }
    #optionTwo > div:last-child {
        background-color: grey; /* for display purposes only */
        padding-right: 0px;
    }
    #optionTwo > div:not(:first-child):not(:last-child) {
        background-color: blue; /* for display purposes only */
        width: calc(25% + 15px);
    }
}

The problem I ran into is in both cases the last child falls on a separate row: the script .

Hopefully this gives you some food for thought.

+1


source


I couldn't comment on Yann Shabo's post, but as an extension to it, I would recommend using escape values. If you don't use this, Chrome recalculates the width to 10% instead of the correct width.

CSS

width: calc(~"25% - 15px");
0


source






More articles:


All Articles