Menu
I am using the Bootstrap grid for a project and I was wondering if it would be possible to make the columns float vertically. As of right now I can't seem to find a method that makes this possible. I am looking for a solution to this problem in form of some custom css for the Boostrap grid or using another grid. However I would prefer that the grid is set up using css only, no JavaScript.
There's an image and a link for the example:
Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<title>Test</title>
<style type="text/css">
body {
margin-top: 20px;
}
.container {
padding: 0 10px;
}
@media (min-width: 768px) {
.container {
width: 768px;
}
}
@media (min-width: 992px) {
.container {
width: 868px;
}
}
.div1, .div2, .div3, .div4, .div5, .div6 {
background-color: #999;
border-radius: 6px;
width: 100%;
display: table-cell;
text-align: center;
vertical-align: middle;
font: bold 28px 'Arial';
}
.div1 {
height: 120px;
}
.div2 {
height: 260px;
}
.div3 {
height: 140px;
}
.div4 {
height: 180px;
}
.div5 {
height: 200px;
}
.div6 {
height: 90px;
}
.row {
background-color: #CCC;
border-radius: 6px;
padding: 5px;
margin: 0;
}
[class*="col-"] {
display: table;
padding: 5px;
}
</style>
</head>
<body>
<div class="container">
<h2><b>Using Bootstrap</b><br>Each DIV is 6 columns wide with a variable height.<br>They're inside the same row.</h2><br>
<div class="row">
<div class="col-xs-6">
<div class="div1">DIV 1</div>
</div>
<div class="col-xs-6">
<div class="div2">DIV 2</div>
</div>
<div class="col-xs-6">
<div class="div3">DIV 3</div>
</div>
<div class="col-xs-6">
<div class="div4">DIV 4</div>
</div>
<div class="col-xs-6">
<div class="div5">DIV 5</div>
</div>
<div class="col-xs-6">
<div class="div6">DIV 6</div>
</div>
</div>
</div>
</body>
</html>
624
col-lg-2: This class is used when the device size is large or greater than 992px and the maximum width of container is 960px and when you want size equal to 2 columns.
col-md- stands for column medium ≥ 992px. col-xs- stands for column extra small ≥ 768px. The pixel numbers are the breakpoints, so for example col-xs is targeting the element when the window is smaller than 768px(likely mobile devices)...
The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). You can use nearly any combination of these classes to create more dynamic and flexible layouts.
col-sm-4 are available for quickly making grid layouts. Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .
You need a masonry layout to do this. Use masonry library with your bootstrap code. You can follow this sitepoint post to do this.
Again here is a masonry template using bootstrap on github.
123
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
