ineztia ineztia - 2 months ago 25
CSS Question

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

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 ?

Answer

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.

Comments