Can a masonry column layout be achieved using the flexbox grid provided by Bootstrap 4? It appears that all the columns have the same height.
Can a masonry column layout be achieved using the flexbox grid provided by Bootstrap 4? It appears that all the columns have the same height.
Utilizing the standard Bootstrap 4 classes makes achieving this layout quite feasible. The documentation even dedicates an entire section to the Card columns feature.
According to the documentation:
Cards can be structured into columns resembling a Masonry layout through CSS by enclosing them in the .card-columns class. Cards utilize CSS column properties instead of flexbox for more straightforward alignment. Cards are arranged from top to bottom and left to right.
Note that the behavior of card columns may vary. To prevent cards from breaking across columns, they should be set to display: inline-block as column-break-inside: avoid isn’t a perfect solution yet.
To implement this layout, simply enclose your cards within a container with the class .card-columns like so:
<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>
<!-- Additional Card Elements Go Here -->
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>There are numerous options available for creating Mosonry Grid Layouts.
If you are interested, you can explore 10 Code Snippets for Creating Masonry Grid Layouts
Personally, I prefer using CSS
.masonry { /* Styling for Masonry container */
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
-webkit-column-gap: 1em;
-moz-column-gap: 1em;
column-gap: 1em;
margin: 1.5em;
padding: 0;
}
body {
font-family: sans-serif;
margin: 0;
background: #f2f2f2;
}
h1 {
text-align: center;
margin-top: 50px;
}
p {
text-align: center;
margin-bottom: 60px;
}
h4{
text-align: center;
line-height: 80px;
font-weight: normal;
}
.masonry { /* Styling for Masonry container */
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
-webkit-column-gap: 1em;
-moz-column-gap: 1em;
column-gap: 1em;
margin: 1.5em;
padding: 0;
-moz-column-gap: 1.5em;
-webkit-column-gap: 1.5em;
column-gap: 1.5em;
font-size: .85em;
}
.item {
display: inline-block;
background: #fff;
padding: 1em;
margin: 0 0 1.5em;
width: 100%;
-webkit-transition: 1s ease all;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-shadow: 2px 2px 4px 0 #ccc;
}
.item img{max-width:100%; height: auto;}
@media only screen and (max-width: 320px) {
.masonry {
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
}
}
@media only screen and (min-width: 321px) and (max-width: 768px){
.masonry {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}
@media only screen and (min-width: 769px) and (max-width: 1200px){
.masonry {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
}
@media only screen and (min-width: 1201px) {
.masonry {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
}
}<h1>Responsive Masonry Grid</h1>
<p>A pure CSS-only responsive masonry layout.</p>
<div class="masonry">
<div class="item">
1
<img src="http://www.pixeden.com/media/k2/galleries/468/001-business-card-clip-brand-mock-up-vol-20-psd.jpg">
</div>
<div class="item">
2
<img src="http://www.graphicsfuel.com/wp-content/uploads/2015/11/branding-mockup-psd.jpg">
</div>
<div class="item">
3
<img src="http://www.pixeden.com/media/k2/galleries/511/001-business-card-mockup-vol-22-box-brand-psd.jpg">
</div>
<div class="item">
4
<img src="http://freede.ru/wp-content/uploads/2015/01/6546546542.jpg">
</div>
<div class="item">
5
<img src="https://blog.spoongraphics.co.uk/wp-content/uploads/2013/mockup/23.jpg">
</div>
<div class="item">
6
<img src="http://jquerypluginplus.com/wp-content/uploads/2015/09/Psd_Business_Card_MockUp.jpg">
</div>
<div class="item">
7
<img src="http://www.pixeden.com/media/k2/galleries/754/001-businesscard-mockup-presentation-psd-free-resource.jpg">
</div>
<div class="item">
8
<img src="http://designdecoding.com/wp-content/uploads/2014/09/001-a4-paper-brand-stationery-isometric-print-mock-up-psd-1.jpg">
</div>
<div class="item">
9
<img src="http://www.blugraphic.com/wp-content/uploads/2014/04/Folded-Page-Mockup1.jpg">
</div>
<div class="item">
10
<img src="http://cdn.designinstruct.com/files/542-free-branding-identity-mockups/29-branding-identity-mock-up-vol-8-full.jpg">
</div>
<div class="item">
11
<img src="http://www.thomsoon.com/img/portfolio/7clean/7-clean-business-card-mockup-psd-3.jpg">
</div>
<div class="item">
12
<img src="http://www.pixeden.com/media/k2/galleries/640/001-business-card-cardboard-mockup-presentation-wall-free-psd.jpg">
</div>
</div>
<h4>Images sourced from <a href="https://www.google.com.tw/search?q=mock+up&espv=2&tbm=isch&source=lnt&tbs=isz:m&sa=X&ved=0ahUKEwidx5_s29DLAhVIj5QKHRblBf8QpwUIEw&dpr=1&biw=1920&bih=971"> Google Images</a>.</h4>Through a stroke of luck, I stumbled upon a potential solution to the ordering issue raised by @erik-thiart on Bootstrap 4 masonry layout utilizing flexbox grid
If you want your mason-like grid to maintain a left-to-right, top-to-bottom order, simply add a ROW to the class:
<div class="row card-columns">
The rows may be constrained by the larger card size, but it will still keep the order intact.
https://i.sstatic.net/A1eUh.png I am currently working on a project where I want to divide the screen into three sections. One section will cover half of the screen to display an image slider, and the remaining half will have two sections which is already ...
As I develop a Chrome Extension, my goal is to incorporate a sidebar into all webpages without overlapping the existing content. The sidebar should be placed beside the content, effectively reducing the width of the body of the webpage to the initial width ...
Issue Description: I am working on a project using React JS and have implemented the bootstrap datepicker. I have set the input type to "date" for the date of birth field, but I need to restrict users from selecting current or future dates. How can I achie ...
Imagine you have 2 buttons The first button <button class="arguments variation-one">Some text</button> - this button has dynamic classes like: variation-one, variation-two, variation-three, but the .arguments class remains static. a ...
Take a look at my JSFiddle demo: <http://jsfiddle.net/xrtk9enc/2/> I suspect that the issue lies within the javascript section. My html code includes an Unordered List that serves as the tab menu. Each href of the menu corresponds to a tab content, ...
I've spent countless hours trying to achieve the desired results, but unfortunately, I haven't been successful. Below is a summary of my efforts so far. Any helpful tips or suggestions would be greatly appreciated. Thank you in advance. Upon rec ...
I'm looking to customize my Bootstrap carousel by adding unique background images to each item. Here's a snippet of my HTML: <!-- Start of carousel --> <div id="mainCarousel" class="carousel slide carousel-fade" d ...
My website has a menu layout that features a logo on the left and an icon for the menu on the right side. When the icon is clicked, the menu slides in from the right side of the window, and when clicked again, it slides out. However, I am facing two issues ...
Can someone help me center the icons in my second navigation bar? I've tried aligning them left and right, and that works, but when I try to center them, it doesn't work at all. Did I miss something in the code or make a mistake? Any assistance w ...
I encountered an issue when attempting to include a background image in react js. ./src/index.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./src/index.css) Unable to locate module: An attem ...
I have a unique setup where my Angular 5 application resides in a subdirectory within another parent application. The parent application consists of JSP and other AngularJS applications among other things. My goal is to include a CSS file from the parent ...
I am attempting to rotate the cube and expand its faces. I have experimented with the following code: .wrapper{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .cube-wrap { width: 40px; height: 40px; ...
How can I resolve the height issue with sidebar and content area on smaller devices, maintaining 100% height for both? I'm having trouble fixing it with the current code. I am aiming to create a fixed-width sidebar that expands to full width on small ...
I have a large chart that I need to showcase on my website, but due to its size it would take up too much vertical space and potentially overwhelm the user upon their first visit. My goal is to provide a preview of the chart, similar to an excerpt of text ...
I'm having an issue with aligning multiple images on my webpage. I want them to be left justified when the page is resized, while still keeping the div block centered. Currently, they are all being centered: See below: Here is the HTML and CSS code ...
Let me start by saying that I have already looked into the issue of "Recaptcha is broken" where adjusting the line-height was suggested as a solution. Unfortunately, that did not work for me. After implementing Google's impressive Recaptcha on my web ...
while ($row = mysqli_fetch_array($result)) { echo ""; echo "<div id='img_div'>"; echo "<i class='fas fa-times'></i>"; echo "<img class='photoDeGallery' s ...
I found a code snippet online that animates items as they appear on scroll. However, the code only triggers animation for one item at a time. How can I modify the code to trigger the animation for all items? const observer = new IntersectionObserver(e ...
For a current project I am working on, my goal is to fill the entire .container with 7 columns within my grid system. To achieve this, I plan on adjusting the Less variable (@grid-columns) before compiling a bootstrap.css file at http://getbootstrap.com/cu ...
I'm attempting to create an expand and collapse animation effect on a card without relying on bootstrap or any external libraries. I have tried adding a transition property but it doesn't seem to work when the button is clicked. Here is the comp ...