A way to make Bootstrap col-xx no padding between the columns

Question

The padding defined in Bootstrap col-xx classes are sometimes wasting spaces on small screens, so I'd like to remove the padding by nesting col-xx with certain css settings like so:

<style>
div[class^=col-] > div[class^=col-] {
    padding-left: 0px;
    padding-right: 0px;
}
</style>

<div class="row">
    <div class="col-xs-12">
        <div class="col-xs-4">a</div>
        <div class="col-xs-4">b</div>
        <div class="col-xs-4">c</div>
    </div>
</div>

Does my implemention look ok ? Are there any protential styling problems for nesting col-xx directly ?

Related: http://stackoverflow.com/questions/19562903/remove-padding-from-columns-in-bootstrap-3 — roberrrt-s, Sep 05 '16 at 09:54
You should also include `margin: 0`. and you can shorten padding like `padding: 0` — Luuk Skeur, Sep 05 '16 at 10:46

score 4 · Accepted Answer · answered Sep 05 '16 at 12:12

There should be no problems, but i would not declare the 0 padding on the entire col-X, instead i would create a custom no-padding class, and apply the 0 padding to that class.

<style>
.no-padding{
    padding-left: 0px;
    padding-right: 0px;
}
</style>

<div class="row">
    <div class="col-xs-12">
        <div class="col-xs-4 no-padding">a</div>
        <div class="col-xs-4 no-padding">b</div>
        <div class="col-xs-4 no-padding">c</div>
    </div>
</div>

Its a good idea to not modify the style of boostrap core elements, because it might be confusing to other people working on the same code.

A way to make Bootstrap col-xx no padding between the columns

1 Answers1