How to create a FIXED custom col/column width in bootstrap?

I am trying to create a custom column/col using bootstrap… i have these 4 boxes which have the width of 281px each including the gutter spacing inbetween which is 15px and the container around the website is 1170px… when i use the class “col-md-3” 4 times which fills up the whole container the width is still not 281px of each box… even after i have changed the GUTTER space and set the width of the container.

Can somebody explain in simple CSS how i could re-write or create a custom column width for each box and yet to be responsive?

http://s10.postimg.org/lglov4cc8/Screen_Shot_2015_06_20_at_00_54_30.jpg

Thanks.

So if you have all those fixed widths, then what do you expect to happen when users go below 1170px in their browsers? Mobile? Tablets? This approach has some very serious flaws. You need to address these points before you consider moving forward with this.

Bootstrap makes this incredibility hard to do exactly. The easy solution is just to nest a div inside the column and just give it a margin to create some space and use that div for styling (background-color etc).

The problem is that the bootstrap columns have padding on them so you will need to add custom classes to remove the padding from the columns. The boxes will still not be exactly as your requirements because the 4 columns will be at 25% and if you apply a margin then you get a margin on them all making your boxes smaller.

Instead I would simply come out of the grid for custom design like that and do this.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<style>
.wrap {
	background:#f9f9f9;
	margin:auto;
}
.myrow-wrap {margin:0 -30px;}
.myrow {
	display:table;
	table-layout:fixed;
	width:100%;
	border-spacing:15px;
	height:300px;
}
.box {
	display:table-cell;
	vertical-align:top;
	background:#000;
	color:#fff;
}
@media screen and (max-width:760px){
	.myrow-wrap {margin:0}
	.myrow {display:block;border-spacing:0;height:auto;}
	.box {display:block;margin:0 0 15px;min-height:300px;}	
}
</style>
</head>

<body>
<div class="container wrap">
		<div class="myrow-wrap">
				<div class="myrow">
						<div class="box">Example box</div>
						<div class="box">Example box</div>
						<div class="box">Example box</div>
						<div class="box">Example box</div>
				</div>
		</div>
</div>
</body>
</html>

This is one of the major drawbacks of bootstrap in that you cannot separate columns exactly to match your design as you are always stuck inside the grid.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.