Topic: Masonry with Bootstrap
amir reza kabiri free asked 6 years ago
Hi!
I am using bootstrap and try to have a masonry like grid. But with columns with different height and widths I was unable to do so.
What I am looking for is something like this , but also with different width, I didn't find anything even after looking for one week! :(
<div class="row card-columns"> <!-- Grid column --> <divclass="col-lg-6 "> <!-- Card --> <divclass="card "> </div> <!-- Card --> </div> <!-- Grid column --> <divclass="row col-lg-6 "> <!-- Grid column --> <divclass="col-lg-6 "> <!-- Card --> <divclass="card "> </div> <!-- Card --> </div> <!-- Grid column --> <!-- Grid column --> <divclass="col-lg-6 "> <!-- Card --> <divclass="card "> </div> <!-- Card --> </div> <!-- Grid column --> <divclass="col-lg-6 "> <!-- Card --> <divclass="card "> </div> <!-- Card --> </div> <!-- Grid column --> <!-- Grid column --> <divclass="col-lg-6 "> <!-- Card --> <divclass="card "> </div> <!-- Card --> </div> <!-- Grid column --> </div> <!-- Grid column --> <divclass="col-lg-3"> <!-- Card --> <divclass="card "> </div> <!-- Card --> </div> <divclass="col-lg-3"> <!-- Card --> <divclass="card "> </div> <!-- Card --> </div> <!-- Grid column --> <divclass="col-lg-3 "> <!-- Card --> <divclass="card "> </div> <!-- Card --> </div> <!-- Grid column --> <!-- Grid column --> <divclass="col-lg-3 "> <!-- Card --> <divclass="card "> </div> <!-- Card --> </div> <!-- Grid column --> <!-- Grid column --> <divclass="col-lg-3 "> <!-- Card --> <divclass="card "> </div> <!-- Card --> </div> <!-- Grid column --> </div>
Start your code here
Start your code here
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Opened
Specification of the issue
- ForumUser: Free
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: Yes
- Provided link: Yes
Tags
amir reza kabiri free commented 6 years ago
In other words: I have two types of cards: A: width= col-6 & height= hA B: width= col-3 & height= hB hA>hB and I wanted to create a scheme like the link below, I would be thankful if you could help me to do so. What I want is something like what happens in Bootstrap 3 and don't want to lose the responsibility. https://image.ibb.co/bVWkMo/scheme.png Thanks a lotOllie Vincent pro commented 6 years ago
Hi, Do you mean something like this? https://codepen.io/artursden/pen/dRWeBw Obviously, this is three columns so you might need to do abit of tweaking.