Bootstrap 3 columns next to each other?
I'm trying to create a grid of responsive images using bootstrap 3, but when I try to put them together, one of them, using the code below the last two columns, goes away from the other columns:
This is what I am trying to achieve:
HTML:
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<img class="img" src="path/to/image" />
</div>
</div>
</div>
CSS:
.row { overflow:hidden; }
.img { min-width:100%; max-width:100%; min-height:100%; max-height:100%; }
.col-md-3 { min-height:100%; max-height:100%; }
NOTE: if I am setting the max-min / height-width by pixels and I am resizing the window overlapping the columns with each other, so I have to set it as a percentage! and still not getting the result I want.
would appreciate any help.
source to share
Here you can do it by converting the mesh in this case only to inline-block
. This is the css and html below. Another way is to use a script that sets up a grid, for example masonry blocks that fit under each other, you can use jscripts like masonry, mason, isotope, shuffle and a number of other scripts. Here's a shuffle example https://jsbin.com/vaquci/2
DEMO: https://jsbin.com/rurap/1/
https://jsbin.com/rurap/1/edit?html,css,output
CSS
/* demo */
.col-sm-4 {border:1px solid red;}
.well {height:200px;}
.height1 {height:250px}
.height2 {height:300px}
/* demo */
@media (min-width:768px) {
.inline-block-row {
word-spacing: -1em;
letter-spacing: -1em;
overflow:hidden;
}
.inline-block-row .col-sm-4 {
word-spacing: normal;
vertical-align: top;
letter-spacing: normal;
display: inline-block;
float:none;
}
}
@media (min-width:992px) {
.inline-block-row .col-md-3 {
float:none;
}
}
HTML:
<div class="container-fluid">
<h1>Inline Block Grid</h1>
<div class="row inline-block-row">
<div class="col-sm-4 col-md-3">
<div class="well height1">1</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="well">2</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="well">3</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="well"> 4</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="well"> 5</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="well height2"> 6</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="well"> 7</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="well height1"> 7</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="well"> 7</div>
</div>
</div>
</div>
source to share
A simple solution
HTML:
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<img class="img-responsive" src="path/to/image" />
</div>
<div class="col-md-3">
<img class="img-responsive" src="path/to/image" />
</div>
<div class="col-md-3">
<img class="img-responsive" src="path/to/image" />
</div>
<div class="col-md-3">
<img class="img-responsive" src="path/to/image" />
</div>
</div>
<div class="row">
<div class="col-md-3">
<img class="img-responsive" src="path/to/image" />
</div>
<div class="col-md-3">
<img class="img-responsive" src="path/to/image" />
</div>
<div class="col-md-3">
<img class="img-responsive" src="path/to/image" />
</div>
<div class="col-md-3">
<img class="img-responsive" src="path/to/image" />
</div>
</div>
... more rows
</div>
CSS
div.row > div {
padding-bottom: 30%; // This will give height
}
source to share
If you don't need all boxes to have the same height, you should try using the Mansory plugin http://desandro.github.io/masonry/ . This is the best plugin for this type of mesh. But if you need all the boxes to have the same height. You can get the maximum height and fit for all boxes. For example:
HTML:
<div class="container-fluid">
<div class="row">
<div class="col-md-3 item">
<img class="img src="path/to/image" />
</div>
</div>
</div>
var highestH = 0;
var height = 0;
$('.container-fluid .item').removeAttr('style');
$('.container-fluid .item').each(function () {
// verify highest height
height = $(this).outerHeight();
if (height > highestH) {
highestH = height;
}
height = highestH;
});
$('.container-fluid .item').outerHeight(height);
source to share
You can actually solve this problem very easily, without any custom CSS and minor changes to your HTML. 2 ways actually.
1 - You can put each cols line in its own <div class="row">
:
2 - Either throw <div class="clearfix"></div>
after the last element of each line (not .row
) or combine it with helper classes hidden/visible
in case # 1 messes up with your responsive layout.
source to share