Fix Bootstrap Padding On Nested Columns

Fix Bootstrap Padding On Nested Columns

Bootstrap 3 applies a 15px left and right padding on columns.
This is causing me trouble because my layout has a lot of nested columns:

See Fiddle.
I don’t need to just remove the padding because I need the separation between the elements.
The result I’m after, visually, is this: http://jsfiddle.net/Aeup8/8/
My first approach was to set:
[class^=’col-‘] {
padding:0;
}
[class^=’col-‘] + [class^=’col-‘] {
padding-left: 15px;
}

However, this will not fix columns that wrap onto a second row.
See Fiddle
My second approach was using JavaScript:
(function($) {
var $els = $(‘[class^=”col-“‘);
//console.log($els);
var cols = {};
$els.each(function(i, col) {
var classes = $(col).attr(‘class’).split(‘ ‘);

classes.forEach(function(str) {
var match = str.match(/col-(\w+)-(\d+)/);
if ( match ) {
//console.log($els.eq(i));
cols[match[1]] = cols[match[1]] || {};
var current = cols[match[1]];

if ( match[2] == 12 ) {
current.ids = [];
current.sum = 0;

$els.eq(i).css({ padding: 0 });
return
}

current.ids = current.ids || [];
current.sum = current.sum || 0;
current.sum += ( +match[2] );
current.ids.push(i);
if (current.sum == 12) {
//console.log(current);
current.ids.forEach(function(id) {
$els.eq(id).css({ ‘padding’: 0, ‘padding-right’: ’15px’ });
if (id == i) $els.eq(id).css({ ‘padding’: 0, ‘padding-left’: ’15px’ });
});
current.ids = [];
current.sum = 0;
}
}
});
});
})(jQuery);

Related:  Bootstrap 3 grid, set 1 column size for all displays

See Fiddle
But it has problems:

It does not traverse the DOM in the desired order, so it won’t do nested ones well.
I don’t even want to fix that because it seems like this is a very bad solution (it would happen every time the viewport size changes)

What do I do?

Solutions/Answers:

Solution 1:

You can counter the duplicated padding when nesting columns by wrapping each layer in its own .row:

<div class="row">
    <div class="col-md-6"></div>
    <div class="col-md-6"></div>
    <div class="col-md-12">
        <div class="row">
            <div class="col-md-6">
                <div class="row">
                    <div class="col-md-12"></div>
                    <div class="col-md-12"></div>
                </div>
            </div>
            <div class="col-md-6"></div>
        </div>
    </div>
</div>

The gap between the 2 primary columns will remain, but the nesting won’t continue to indent further: http://jsfiddle.net/5uqmE/.

They currently accomplish this by apply a negative margin that opposes the outer padding:

// Row
//
// Rows contain and clear the floats of your columns.

.row {
  .make-row();
}
// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
  margin-left:  (@gutter / -2);
  margin-right: (@gutter / -2);
  &:extend(.clearfix all);
}
Related:  open source admin theme for twitter bootstrap [closed]

Solution 2:

On your container

.row  .row {
    margin: 0px -15px;
}

Solution 3:

One simple css based solution can be creating custom classes and applying them to col-* for clearing paddings on inner divs or where you do not want padding.

<div class="col-md-6 mmLR15"></div>
<div class="col-md-6 mM15"></div>
<div class="col-md-12 mM15">
    <div class="row">
      <div class="col-md-6 mmR15">
        <div class="col-md-12 mm15"></div>
        <div class="col-md-12 mm15"></div>
      </div><!-- col-md-6 -->
      <div class="col-md-6 mmL15"></div>
    </div><!-- row -->
</div><!-- col-md-12 -->

Now for mmLR15, mmR15, mmL15 is to clear the bootstrap columns padding where needed. Below have written classes declaration to help you understand my point clearly.

.mmLR15 {
  margin: 0px -15px;
}
.mmR15 {
  margin-right: -15px;
}
.mmL15 {
  margin-left: -15px;
}

This will only clear bootstrap classes on div you don’t want. Have to include class where needed. You can create a separate file and include after bootstrap so your code is cleaner. mmR15 & mmL15 are only for div’s in row as row clears left and right margin.

Related:  Force enabled look to readonly input with bootstrap CSS

For media break points where bootstrap makes columns 100% you can reset them depending upon ur need or should I say upon you layout. Hope this helps you.

References