Bootstrap 3: Remove Bottom Margin From The Columns At The Bottom Of Row

I have a grid with multiple columns. All columns are in one row and the number of columns may vary. Since I needed some vertical space between columns, I added margin-bottom on col

Solution 1:

Well, in case you want the wrapper to have some padding, a super quick-fix would be to set the bottom padding to be equal (initial padding - margin bottom of columns). On your example it's just gonna be padding-bottom: 0 for your wrapper. This is definitely not an ultimate fix, but is super simple and works in described case.

Here's a fiddle: https://jsfiddle.net/kLr8sog6/

Solution 2:

Assuming you don't change the number of columns, nth child selectors could help:

//mobile and tablet view@media(max-width:992px) {
    .mb:nth-last-child(-n+2) {
        margin-bottom:0px; 
    }
}
//wider views@media(min-width:993px) {
    .mb:nth-last-child(-n+3) {
        margin-bottom:0px; 
    }
}

EDIT: Updated your fiddled to show this in effect: https://jsfiddle.net/rhhyu6h2/8/

Again, only for this specific layout. For variable columns layouts, you have to solve in a wrapper or through JS.

EDIT2: from reading your other comments, you could use a wrapper adjustment class on selective rows: https://jsfiddle.net/rhhyu6h2/9/ This doesn't require any new HTML.

Solution 3:

@Antonio, in order to remove the bottom-margin dynamically you gotta use jQuery/JavaScript. On appropriate event add the class which has margin-bottom:0px.

Example:

CSS Code:

.removeBottomPadding{
margin-bottom:0px!important; 
}

JavaScript Code: [Ensure to add an id to the wrapper]

window.onload = function() {
document.getElementById('wrapper').className = 'removeBottomPadding';
};

OR

jQuery Code:

$(function() {
$('.wrapper').addClass('removeBottomPadding');
});

That's all.

Good luck & hope that helps.