Masonry with Bootstrap

  1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
Topic: Masonry with Bootstrap

amir reza kabiri 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

amir reza kabiri 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 lot

Ollie 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.
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Open

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: Yes
About author
amir reza kabiri
2Support score
1Questions 0Answers
0Snippets likes 0Snippets