how to implement responsive three columns boxed layout using bootstrap? - css

Question

I am using the following to create a 3 columns layout feel to my website:
<div>
<div class="foo col-md-4">
</div>
<div class="foo col-md-4">
</div>
<div class="foo col-md-4">
</div>
<div class="foo col-md-4">
</div>
</div>
The above works great, and no matter how many foo items I added, it will format it to three columns layout automatically. However, I wanted to add a boxed feeling to each of the foo item, so that it does not look like that they're attached to each other. To achieve this, I added margin to the foo class:
.foo
{
margin: 3px 3px 3px 3px;
}
Adding the above, changes the layout become a two column layout.
My goal is to replicate responsive boxed layout, just like one we find in google plus.

Answer 1

Since the Bootstrap cols already having padding, you could make the content of your columns boxed.. For example, the panel creates a boxed effect.. No additional CSS required:
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">Title</div>
<div class="panel-body">Content here..</div>
</div>
</div>
Demo on Bootply: http://bootply.com/96277
Also, you may be interest in this Bootstrap Google+ project:
http://iatek.github.io/bootstrap-google-plus/

Answer 2

http://jsbin.com/akaQufU/3
Put a div inside the col-* this can be done.
CSS
body {background:#eee}
/* demo */
.container {padding:3%;}
/* put a div inside .foo style for demo */
.foo > div {
background:#fff;
margin-bottom:4px;
padding:2%
}
/* adjust row margins */
.row.foo-row {
margin-left: -2px;
margin-right: -2px;
}
/* adjust padding */
.row.foo-row .col-sm-4,
.row.foo-row .col-md-4,
.row.foo-row .col-lg-4 {
padding-left: 2px;
padding-right: 2px;
}
HTML
<div class="container">
<div class="row foo-row">
<div class="foo col-md-4">
<div>
something
</div>
</div>
<div class="foo col-md-4">
<div>
something
</div>
</div>
<div class="foo col-md-4">
<div>
something
</div>
</div>
<div class="foo col-md-4">
<div>
something
</div>
</div>
<div class="foo col-md-4">
<div>
something
</div>
</div>
<div class="foo col-md-4">
<div>
something
</div>
</div>
<div class="foo col-md-4">
<div>
something
</div>
</div>
<div class="foo col-md-4">
<div>
something
</div>
</div>
<div class="foo col-md-4">
<div>
something
</div>
</div>
</div>
</div>

Answer 3

how about adding inset border instead
.foo
{
border-color:transparent;
border:inset 3px;
}
because margin will be calculated as a column extra width
anyway if you want to seperate them without using borders , then just use padding
.foo
{
padding:3px 3px 3px 3px;
}

Answer 4

Your columns should already spaced properly by your code and bootstrap's grid system, you just need need to added a margin to the bottom to stop them touching.
margin-bottom: 3px;
The problem you had with it converting to a 2 column was because you were adding side margin of 3px as well, which throws bootstraps grid system out.
You can't use padding (well) because bootstrap uses it for spacing and that will be more pain than gain.