How To Make A Masonry Layout Grid In Bootstrap 3?
I am using boostrap to make a masonry layout. But I am having a problem. As you can see in my code, I have 5 divs. I want Div 4 and 5 to move up(check the attached image) but I hav
Solution 1:
In this specific case you can use nesting..
<divclass="col-md-12"><divclass="row"><divclass="col-md-8"><divclass="row"><divclass="col-md-6 div1">Div1</div><divclass="col-md-6 div2">Div2</div><divclass="col-md-12 div4">Div4</div><divclass="col-md-12 div5">Div5</div></div></div><divclass="col-md-4"><divclass="row"><divclass="col-md-12 div3">Div3</div></div></div></div></div>Or, use pull-right on div3...
<divclass="col-md-12"><divclass="row"><divclass="col-md-4 div1">Div1</div><divclass="col-md-4 div2">Div2</div><divclass="col-md-4 div3 pull-right">Div3</div><divclass="col-md-8 div4">Div4</div><divclass="col-md-8 div5">Div5</div></div></div>If you want to use Masonry, see my answer for Bootstrap Masonry solutions.
Solution 2:
It wouldn't be masonry, per say, but from your image what you want is
<divclass='row'><divclass='col-md-8'><divclass='row'><divclass='col-md-6 div1'>Div1</div><divclass='col-md-6 div2'>Div2</div><divclass='col-md-12 div4'>Div4</div><divclass='col-md-12 div5'>Div5</div></div></div><divclass='col-md-4 div3'>Div3</div></div>Solution 3:
you can do it this way:
// external js: masonry.pkgd.js
$('.grid').masonry({
itemSelector: '.grid-item',
columnWidth: '.grid-sizer',
percentPosition: true
});<html><head><!-- Latest compiled and minified CSS --><linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"crossorigin="anonymous"><linkrel="stylesheet"type="text/css"href="css/font-awesome.min.css"><style>.div1{
border: 2px solid;
height: 40px;
}
.div2{
border: 2px solid;
height: 40px;
}
.div3{
border: 2px solid;
height: 100px;
}
.div4{
border: 2px solid;
height: 40px;
}
.div5{
border: 2px solid;
height: 40px;
}
</style></head><body><divclass="col-md-12"><divclass="container-fluid"><!-- add extra container element for Masonry --><divclass="grid"><divclass="grid-sizer col-xs-4"></div><divclass="grid-item col-xs-4 div1"></div><divclass="grid-item col-xs-4 div2"></div><divclass="grid-item col-xs-4 div3"></div><divclass="grid-item col-xs-8 div4"></div><divclass="grid-item col-xs-8 div5"></div></div></div></div><!-- Loading minified js. jQuery and Bootstrap --><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script><scriptsrc="http://masonry.desandro.com/masonry.pkgd.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"crossorigin="anonymous"></script></body></html>
Post a Comment for "How To Make A Masonry Layout Grid In Bootstrap 3?"