Bootstrap grid issue when specify custom column widths

[afridy]

Hi folks,

• Bootstrap 3.3.7

In my website, there is a section called “Partners” in that i use to display parter companie’s logos.
in pc i want to have 1x5 logos while in mobile just 1x1 (1 per line).

my css code as follows

.partners .col-sm-2, .hp_partners .col-md-2{ 
    width: 20% !important;
    margin: 0;
    padding: 0;
}	

html

<div class="row partners" style='height:120px;text-align:center'>
	
	<div class='col-xs-12 col-sm-2 col-md-2'>
		<img style='height:120px' src='images/partners/8.jpg'></img>
	</div>
	
	<div class='col-xs-12 col-sm-2 col-md-2'>
		<img style='height:120px' src='images/partners/8.jpg'></img>
	</div>

	<div class='col-xs-12 col-sm-2 col-md-2'>
		<img style='height:120px' src='images/partners/8.jpg'></img>
	</div>

	<div class='col-xs-12 col-sm-2 col-md-2'>
		<img style='height:120px' src='images/partners/8.jpg'></img>
	</div>

	<div class='col-xs-12 col-sm-2 col-md-2'>
		<img style='height:120px' src='images/partners/8.jpg'></img>
	</div>		
	
</div>

my problem is, col-xs-12 is not firing at all. it only works if i remove the above css code.

what could be the problem?

here is the mobile view (browser inspect).

i also sees this in firebug

[PaulOB]

@afridy

.partners .col-sm-2, .hp_partners .col-md-2{ width: 20% !important; margin: 0; padding: 0; }

You need to put the rule in a media query.

e.g.

@media screen and (min-width:768px){
	.partners .col-sm-2, .hp_partners .col-md-2{ 
    	width: 20%;
    	margin: 0;
    	padding: 0;
	}
}

Don’t ever use !important unless you know why you are using it

Also be careful with modifying the padding on the bootstrap columns as they are offset with negative margins on the row and once you start fiddling with them you end up breaking the grid.

For a custom layout that doesn’t fit into bootstraps 12 columns structure you may have found it easier to write your own code for that section rather than modifying the grid.

[afridy]

Thank You PauOB,

Worked charm. also i will refrain from altering the default grid margins and padding.

cheers.