Bootstrap 4 masonry layout utilizing flexbox grid
This is pretty much doable with standard Bootstrap 4 classes. There is even a whole section in the documentation about the Card columns feature.
From the docs:
Cards can be organized into Masonry-like columns with just CSS by wrapping them in .card-columns. Cards are built with CSS column properties instead of flexbox for easier alignment. Cards are ordered from top to bottom and left to right.
Heads up! Your mileage with card columns may vary. To prevent cards breaking across columns, we must set them to display: inline-block as column-break-inside: avoid isn’t a bulletproof solution yet.
So, all you have to do is to wrap your .cards into a .card-columns container like this:
<div class="container"> <div class="card-columns"> <div class="card"> <img class="card-img-top" src="http://via.placeholder.com/1600x900/483D8B/ffffff?text=Card+1" alt="Card image cap"> <div class="card-body"> <h5 class="card-title">Card title that wraps to a new line</h5> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> </div> </div> <div class="card p-3"> <blockquote class="blockquote mb-0 card-body"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer class="blockquote-footer"> <small class="text-muted"> Someone famous in <cite title="Source Title">Source Title</cite> </small> </footer> </blockquote> </div> <div class="card"> <img class="card-img-top" src="http://via.placeholder.com/1600x450/9400D3/ffffff?text=Card+2" alt="Card image cap"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> <div class="card bg-primary text-white text-center p-3"> <blockquote class="blockquote mb-0"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p> <footer class="blockquote-footer"> <small> Someone famous in <cite title="Source Title">Source Title</cite> </small> </footer> </blockquote> </div> <div class="card text-center"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> <div class="card"> <img class="card-img" src="http://via.placeholder.com/1600x1600/FF1493/ffffff?text=Card+3" alt="Card image"> </div> <div class="card p-3 text-right"> <blockquote class="blockquote mb-0"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer class="blockquote-footer"> <small class="text-muted"> Someone famous in <cite title="Source Title">Source Title</cite> </small> </footer> </blockquote> </div> <div class="card"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div></div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>How to stack/align images in CSS/Bootstrap horizontally regardless of orientation?
U need to use a javascript library to do it.
This type of layout is called Masonry layout.
Refer the following link for more info on how to implement it
Masonry Layout (Requires Jquery)
Alternative to this library Macy.js (Pure javascript)
More libraries
https://isotope.metafizzy.co/layout-modes/masonry.html
http://callmecavs.com/bricks.js/
How to avoid bootstrap 4 to set same height all columns?
There is a way to do this using cards. Take a look at this
It will look like this
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="card-columns"> <div class="card"> <img src="http://placekitten.com/50/50" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card title that wraps to a new line</h5> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> </div> </div> <div class="card p-3"> <blockquote class="blockquote mb-0 card-body"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer class="blockquote-footer"> <small class="text-muted"> Someone famous in <cite title="Source Title">Source Title</cite> </small> </footer> </blockquote> </div> <div class="card"> <img src="http://placekitten.com/50/50" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> <div class="card bg-primary text-white text-center p-3"> <blockquote class="blockquote mb-0"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p> <footer class="blockquote-footer text-white"> <small> Someone famous in <cite title="Source Title">Source Title</cite> </small> </footer> </blockquote> </div> <div class="card text-center"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">This card has a regular title and short paragraphy of text below it.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> <div class="card"> <img src="http://placekitten.com/50/50" class="card-img-top" alt="..."> </div> <div class="card p-3 text-right"> <blockquote class="blockquote mb-0"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer class="blockquote-footer"> <small class="text-muted"> Someone famous in <cite title="Source Title">Source Title</cite> </small> </footer> </blockquote> </div> <div class="card"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div></div>Grid layout using masonry and bootstrap
Here is a solution you want with masonry. And there are more technique to clear that white-space.
Remove & Added: remove clear div and img width add bootstrap default img-responsive.
Important: bootstrap grid system each row contain 12 col.
$(document).ready(function(){ $('.grid').masonry({ // options itemSelector: '.grid-item', columnWidth: '.grid-item', percentPosition: true }); });<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.1.1/masonry.pkgd.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><body><div class="container"> <div class="row grid"> <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 bg-primary grid-item"> <img src="https://cdn.spacetelescope.org/archives/images/large/heic1307a.jpg" class="img-responsive" /> Boursin stilton caerphilly. Cheddar macaroni cheese fromage frais macaroni cheese cheesecake halloumi emmental smelly cheese. </div> <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 bg-info grid-item"> <p> Ricotta monterey jack cow. Paneer cheese and biscuits everyone loves fromage frais monterey jack caerphilly camembert de normandie lancashire. Danish fontina everyone loves pepper jack lancashire hard cheese bocconcini edam cheese and wine. Cheese and wine manchego rubber cheese blue castello blue castello rubber cheese queso cheesy grin. Say cheese pecorino smelly cheese halloumi cheesy feet cheese slices ricotta croque monsieur. Blue castello parmesan caerphilly mozzarella bavarian bergkase say cheese red leicester macaroni cheese. Edam cheese strings camembert de normandie cheese and wine red leicester gouda cream cheese everyone loves. Cheddar who moved my cheese manchego chalk and cheese boursin lancashire. </p> <p>Boursin stilton caerphilly. Cheddar macaroni cheese fromage frais macaroni cheese cheesecake halloumi emmental smelly cheese. Taleggio squirty cheese croque monsieur macaroni cheese fondue cheddar bavarian bergkase st. agur blue cheese. St. agur blue cheese cottage cheese swiss everyone loves swiss dolcelatte babybel monterey jack. Gouda monterey jack fromage feta taleggio cheese triangles parmesan cheddar. Rubber cheese fromage frais stinking bishop boursin red leicester camembert de normandie fromage frais gouda. Halloumi ricotta port-salut hard cheese squirty cheese cheese slices brie. </p> <p>Babybel cheese on toast feta. Ricotta dolcelatte mozzarella cheese and wine goat rubber cheese cheesy feet cheesy feet. Boursin stinking bishop cheesecake bocconcini mascarpone cut the cheese bocconcini cut the cheese. Hard cheese fromage caerphilly cheeseburger cheese on toast emmental bocconcini bocconcini. Ricotta cheese strings cheese and wine camembert de normandie cut the cheese feta babybel bocconcini. Cauliflower cheese lancashire parmesan everyone loves cheese and wine cauliflower cheese mascarpone when the cheese comes out everybody's happy. Fromage cheese and biscuits. </p> <p>Mozzarella queso emmental. Queso manchego gouda blue castello blue castello macaroni cheese mozzarella roquefort. Who moved my cheese cauliflower cheese caerphilly mozzarella cut the cheese the big cheese say cheese rubber cheese. Cheeseburger mozzarella emmental paneer blue castello taleggio who moved my cheese cream cheese. Croque monsieur cheese triangles cheddar halloumi cheesecake goat queso fromage. Airedale who moved my cheese cheesy grin cheese and biscuits pepper jack chalk and cheese cheese slices. </p> <p>Squirty cheese mascarpone lancashire. Cottage cheese mozzarella st. agur blue cheese squirty cheese brie pecorino danish fontina smelly cheese. Babybel cheese and wine bavarian bergkase gouda bocconcini stinking bishop macaroni cheese gouda. Lancashire cheese strings chalk and cheese cheesecake mozzarella monterey jack the big cheese monterey jack. Goat who moved my cheese cheese on toast danish fontina pepper jack gouda queso the big cheese. Airedale monterey jack airedale cauliflower cheese. </p> </div> <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 bg-success grid-item"> Boursin stilton caerphilly. Cheddar macaroni cheese fromage frais macaroni cheese cheesecake halloumi emmental smelly cheese.Boursin stilton caerphilly. Cheddar macaroni cheese fromage frais macaroni cheese cheesecake halloumi emmental smelly cheese.Boursin stilton caerphilly. Cheddar macaroni cheese fromage frais macaroni cheese cheesecake halloumi emmental smelly cheese.Boursin stilton caerphilly. Cheddar macaroni cheese fromage frais macaroni cheese cheesecake halloumi emmental smelly cheese.Boursin stilton caerphilly. Cheddar macaroni cheese fromage frais macaroni cheese cheesecake halloumi emmental smelly cheese.Boursin stilton caerphilly. Cheddar macaroni cheese fromage frais macaroni cheese cheesecake halloumi emmental smelly cheese.Boursin stilton caerphilly. Cheddar macaroni cheese fromage frais macaroni cheese cheesecake halloumi emmental smelly cheese.Boursin stilton caerphilly. Cheddar macaroni cheese fromage frais macaroni cheese cheesecake halloumi emmental smelly cheese.Boursin stilton caerphilly. Cheddar macaroni cheese fromage frais macaroni cheese cheesecake halloumi emmental smelly cheese. </div> <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 bg-danger grid-item"> Boursin stilton caerphilly. Cheddar macaroni cheese fromage frais macaroni cheese cheesecake halloumi emmental smelly cheese.Boursin stilton caerphilly. Cheddar macaroni cheese fromage frais macaroni cheese cheesecake halloumi emmental smelly cheese.Boursin stilton caerphilly. Cheddar macaroni cheese fromage frais macaroni cheese cheesecake halloumi emmental smelly cheese.Boursin stilton caerphilly. Cheddar macaroni cheese fromage frais macaroni cheese cheesecake halloumi emmental smelly cheese.Boursin stilton caerphilly. Cheddar macaroni cheese fromage frais macaroni cheese cheesecake halloumi emmental smelly cheese.Boursin stilton caerphilly. Cheddar macaroni cheese fromage frais macaroni cheese cheesecake halloumi emmental smelly cheese. </div> </div> </div> </body>Related Topics
Browsers Scrollbar Is Under My Fixed Div
Laravel - Barryvdh Pdf - How Include External CSS File into HTML View
Header and Footer in Each Page in Print Mode With CSS
Canvas Is Stretched When Using CSS But Normal With "Width"/"Height" Properties
How to Align a ≪Div≫ to the Middle (Horizontally/Width) of the Page
Why Does Height 100% Work When Doctype Is Removed
How to Style Html5 Range Input to Have Different Color Before and After Slider
Semi-Transparent Color Layer Over Background-Image
Add Bootstrap Glyphicon to Input Box
Css3 Transition Animation on Load