How to manage bootstrap Mansory col height? - html

Question

I don't understand how to change the height of my column in a way to have three elements in my first and second column. I'm new to design element so a little help would be very helpful for me
Mock-up that I want to create:
My code looks like this:
<div class="card-columns pl-5 pr-5">
<!-- col 1-->
<div class="mb-3">
<h1>Lorem Ipsum</h1>
</div>
<div class="card">
<img class="card-img-top" src="assets/Familly-card-hide.png" alt="Card image cap">
</div>
<div class="card">
<img class="card-img-top" src="assets/Twiter-card-hide.png" alt="Card image cap">
</div>
<!-- col 2-->
<div class="card">
<img class="card-img-top" src="assets/Twiter-card-hide.png" alt="Card image cap">
</div>
<div class="card">
<img class="card-img-top" src="assets/Dog-card-hide.png" alt="Card image cap">
</div>
<div>
<span>Lorem ipsum ipsum<img src="assets/Circle-arow-btm.png" alt=""
style="padding-left: 10px; transform: rotate(270deg);"> </span>
</div>
<!-- col 3-->
<div class="card" style="width: 300px;height: auto;">
<img class="card-img-top" src="assets/Fried-card-hide.png" alt="Card image cap">
</div>
<div class="card" style="width: 300px;height: auto;">
<img class="card-img-top" src="assets/work-card-hide.png" alt="Card image cap">
</div>
</div>
I hope you can help me to understand how Masonry work in a way to help me with this code.

Answer 1

Bootstrap Masonry using .card-columns is not so flexible solution for this case. Better to use simple Bootstrap grid system. I made three columns, which are .col-sm-6, .col-sm-4 and .col-sm-2. As you probably now, BS grid contains of 12 columns, so we have 6+4+2=12 columns here. In my example the sizes of the blocks will depend on the proportions of image inside. .img-fluid class makes images max-width: 100%; so thew will not tear the parent block.
This example made by using only Bootstrap 4 classed, for instance. If you want to add some specific setting - you will need to write additional CSS classes and their properties.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<div class="container mt-5">
<div class="row">
<!-- col 1-->
<div class="col-sm-6 px-1">
<div class="mb-2">
<h1>Lorem Ipsum</h1>
</div>
<div class="mb-2">
<img class="img-fluid" src="https://via.placeholder.com/1000x600">
</div>
<div class="mb-2 text-right">
<img class="img-fluid w-75" src="https://via.placeholder.com/1000x600">
</div>
</div>
<!-- col 2-->
<div class="col-sm-4 mt-1 px-1">
<div class="mb-2">
<img class="img-fluid" src="https://via.placeholder.com/1000x600">
</div>
<div class="mb-2">
<img class="img-fluid" src="https://via.placeholder.com/1000x1000">
</div>
<div class="text-right">
<span>Lorem ipsum ipsum<img src="https://via.placeholder.com/36x36" alt=""style="margin-left: 10px; transform: rotate(270deg);"> </span>
</div>
</div>
<!-- col 3-->
<div class="col-sm-2 px-1">
<div class="mb-2 mt-4">
<img class="img-fluid" src="https://via.placeholder.com/1000x1300">
</div>
<div class="mb-2">
<img class="img-fluid" src="https://via.placeholder.com/1000x1100">
</div>
</div>
</div>
</div>
More about Bootstrap technologies I used in this exapmple:
Grid https://getbootstrap.com/docs/4.0/layout/grid/
Spacing https://getbootstrap.com/docs/4.0/utilities/spacing/
image-fluid https://getbootstrap.com/docs/4.0/content/images/
Sizing https://getbootstrap.com/docs/4.0/utilities/sizing/