Twitter Bootstrap Question posted in

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

I’ve been using bootstrap for quite a while now and I’m facing this problem for the first time. I really don’t know how to do this. I have found many people suggesting to just remove padding-left on the first-child element and the last one. I also tried this way at first but then I realized that it couldn’t work, since the .col class has the box-sizing: border-box; property which makes the div to have padding included in the width. (Which is obviously necessary if you want a clean layout using width: 25%;).

So, if you remove these padding on the left, the first and last div are going to be 15px larger, which breaks the layout… I want every col div to have exactly the same width, I want them to fit 100% of the row and have no padding left or right. Is there a class that I’m not aware of in bootstrap?

Is it possible while keeping the Bootstrap 3 templating system?

Code example:

 <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>
Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    I finaly found a way around it by creating my own class, that I believe respect the way bootstrap made their layouting 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, it's reusable and respect the Twitter's Bootstrap thinking (I believe). Thanks to Deja Vu who leaded me to the calc thiking, I believe it's a good way to achieve this. But you cannot put 15 margin left on the first child and right on the last child since that would still create a gutter around but using the margin.


  2. 0

    I wasn’t able to solve your problem but I have 2 ideas and maybe it will lead you to the solution.

    1. Replace paddings with margins

    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 that would 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 faced was – in both cases last child falls onto the separate row:
    fiddle.

    Hope this will give you some food-for-thought.

    Login or Signup to reply.
  3. 0

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

    CSS

    width: calc(~"25% - 15px");
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search