ARTICLE AD BOX
1️⃣ Use Bootstrap’s grid system for main columns
You already have three main columns (col-lg-3 | col-lg-6 | col-lg-3) — this is correct. This will give you the general three-column layout.
<div class="row g-4 align-items-start"> <!-- Left column --> <div class="col-lg-3"> <!-- Your left text + card here --> </div> <!-- Center column --> <div class="col-lg-6"> <div class="row g-4"> <!-- Large top image --> <div class="col-12"> <figure class="image-card large"> <img src="assets/images/top.png" class="img-fluid" alt=""> <figcaption>Consider it done!</figcaption> </figure> </div> <!-- Two smaller images side by side --> <div class="col-md-6"> <figure class="image-card book"> <img src="assets/images/book.png" class="img-fluid" alt=""> </figure> </div> <div class="col-md-6"> <figure class="image-card pink"> <img src="assets/images/pink.png" class="img-fluid" alt=""> <figcaption>See my goal?</figcaption> </figure> </div> </div> </div> <!-- Right column --> <div class="col-lg-3"> <p class="grid-text">This is multipurpose grid...</p> <div class="row g-4"> <div class="col-6"> <div class="mini-card alphabet"> <img src="assets/images/a.png" class="img-fluid" alt=""> </div> </div> <div class="col-6"> <div class="mini-card blue"> <img src="assets/images/shoe.jpg" class="img-fluid" alt=""> </div> </div> <div class="col-12"> <div class="mini-card"> <img src="assets/images/building.png" class="img-fluid" alt=""> </div> </div> </div> </div> </div>2️⃣ Use nested rows for smaller grids
Notice how the center column has a row inside it, and the right column also has a nested row. This allows you to control the placement of smaller cards/images while keeping the main columns aligned.
3️⃣ Optional: Use CSS for spacing / masonry effect
If you want a more “masonry-like” feel (images of different heights stacking naturally), Bootstrap’s grid won’t do that automatically. You can add:
.image-card img { width: 100%; display: block; border-radius: 8px; } /* Optional: make figcaption overlay on image */ .image-card figcaption { position: absolute; bottom: 10px; left: 10px; color: white; font-weight: bold; } /* For mini-cards */ .mini-card img { width: 100%; border-radius: 8px; display: block; }4️⃣ Tips for better layout
Use g-4 or g-* classes for consistent gutters.
Use col-md-6 or col-12 to control responsiveness.
If you want true masonry stacking (like Pinterest), consider CSS Grid with grid-auto-flow: dense or Bootstrap 5 + Masonry JS.
✅ With this setup, your left, center, and right columns will align correctly, and your nested grid will give the mixed layout you want. You don’t need hundreds of divs—just rows and columns nested appropriately.
