Tips for designing a masonry grid with Bootstrap 4

I'm attempting to achieve a specific layout using Bootstrap 4, JavaScript, CSS, and HTML. I have not been able to find something similar on Stack Overflow, but I did come across the Bootstrap 4 Cards documentation. However, I am unsure if this is the correct approach: Bootstrap 4 Cards

Could someone provide guidance on the best method for creating this layout?

Thank you.

EDIT: This question is different from others that may appear similar. In my scenario, the 'cards' do not align in columns but each has its own width. Please note the distinction between my query and others.

EDIT2: Success! Check out how I achieved it here: https://youtu.be/CvmeGvKbPlM

javascripthtmlcsstwitter-bootstrapbootstrap-4

Answer №1

Using the .card-columns class, as suggested by @Yan, can help achieve a Masonry layout. For more details, refer to the Bootstrap 4 documentation.

Below is an example of how the code should appear:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<div class="container">
<div class="card-columns">
  <div class="card">
    <img class="card-img" src="http://via.placeholder.com/450x350" alt="Card image cap">
  </div>
  <div class="card">
    <img class="card-img" src="http://via.placeholder.com/150x150" alt="Card image cap">
  </div>
  <div class="card">
    <img class="card-img" src="http://via.placeholder.com/250x150" alt="Card image cap">
  </div>
  <div class="card">
    <img class="card-img" src="http://via.placeholder.com/250x150" alt="Card image cap">
  </div>
    <div class="card">
    <img class="card-img" src="http://via.placeholder.com/150x150" alt="Card image cap">
  </div>
  <div class="card">
    <img class="card-img" src="http://via.placeholder.com/350x150" alt="Card image cap">
  </div>
</div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

Answer №2

Using just CSS, Bootstrap Cards can be styled to appear in Masonry-like columns by enclosing them in the .card-columns container.

Take a look at this example of working masonry layout with cards!


 <div class="card-columns">
    <div class="card">
       Card 1
    </div>

    <div class="card">
      Card 2
    </div>

    <div class="card">
       Card 3
    </div>
 </div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The type 'MutableRefObject<undefined>' cannot be assigned to the type 'LegacyRef<HTMLDivElement> | undefined'

I have created a customized hook that takes a ref object and observes its behavior: import { useState, useEffect, MutableRefObject } from "react"; const UseOnScreen = (ref: MutableRefObject<undefined>) => { const [isIntersecting, setI ...

javascriptreactjstypescriptnext.js

Jquery Error in Bootstrap and DataTables Integration

My knowledge of frontend coding is limited, so please bear with me. Initially, my website was using MVCContrib grid along with its own CSS style. Recently, I switched to Bootstrap which caused MVCContrib to stop working. I've been struggling to integ ...

csstwitter-bootstrapdatatables

utilizing the setState function to insert an object into a deeply nested array

Currently, I am utilizing iReact setState to attempt posting data to my object which consists of nested arrays. Below is how my initial state looks: const [data, setData] = useState({ working_hours: [ { id: '', descrip ...

javascriptreactjs

What steps can be taken to ensure an animation does not continually reset to its original state when run infinitely?

I am looking to create an animation that continues infinitely without returning to its original state after completion, similar to a sun moving animation. Below is a sample project: .animator3{ -webkit-animation-name:j3; -webkit-animation-delay:0s; -web ...

htmlcssanimation

Incomplete JSON stringification

Could someone provide insight into the reason behind this behavior? let data = JSON let date = '10-7' data['id'] = [] data['id'][date] = [[1,2,3]] data['id'][date].push([1,1,1]) console.log(data) // Outputs: { i ...

javascriptjsonstringify

My Jquery "animate" is only triggered once instead of on each function call. What could be causing this issue?

I have set my navigation to dock at a specific document height on the top of the viewport, and when it docks, it should display a dropdown animation. $(document).scroll(function(){ var x = $(window).scrollTop(); if(x>=700){ $("header ...

javascriptjqueryhtmlcss

Utilize JSON data in d3.js for creating a scatterplot visualization

I have recently started working with d3.js and I'm facing some challenges. From what I understand, the second parameter passed in d3.json() is used to process data from a JSON file. Here is my code: d3.json(base_url() + "data/data.json", clean_data) ...

javascriptjsond3.js

Maintain the state of various panels on page load with the Bootstrap Accordion feature

I have implemented a Bootstrap accordion on my form page which allows users to open multiple panels simultaneously. Upon submitting the form, I want to preserve the state of any open Bootstrap accordion panels. To achieve this, I utilized code from stack ...

javascriptjqueryjsontwitter-bootstrapaccordion

remain on the multi drop down page for a specified duration

I have created a dropdown menu with a second level drop-down page that is a form. Now, I want the second level drop-down page to stay open longer, so I have used the following JavaScript code: <script> var timer; $(".parent").on("mouseover", functio ...

javascriptphphtml

Using a variable in a Joomla module to create a JavaScript object with PHP

I am currently developing a Joomla module that features a progress bar utilizing the ProgressBar.js plugin. Since this module is designed to load multiple objects on a single page, hardcoding the IDs of these objects is not feasible. To address this, I uti ...

javascriptphpjqueryjoomla-extensions

Having difficulty adjusting the text to match the image alignment

Having trouble aligning the text tag inside the H1 above the image. It keeps appearing in the wrong place, either on the left or right. I've tried including the h1 inside the container, but it just disappears. <!doctype html> <html> <h ...

htmlcss

What is the most effective method for accurately tallying the number of matches in a Datalist using the Input value as a reference

I have set up a datalist element with an associated input element for autocompletion in modern browsers: HTML code <input type="search" id="search" list="autocomplete" /> <datalist id="autocomplete"> <option value="c++" /> < ...

javascripthtmlautocomplete

Tips for quietly printing a PDF document in reactjs?

const pdfURL = "anotherurl.com/document.pdf"; const handleDirectPrint = (e: React.FormEvent) => { e.preventDefault(); const newWin: Window | null = window.open(pdfURL); if (newWin) { newWin.onload = () => ...

javascriptreactjstypescript

Checking and locating elements using Jquery's distinctive style

Within my code, I am searching for the DIV element that has the class .se and also has the attribute display: block. Once found, I need to retrieve the ID of this particular DIV. Unfortunately, it seems like my current approach is not correct. var usedse ...

jquerycssattr

Steps to retrieve a file following an AJAX request

Is it possible to automatically download a file following an AJAX call? Currently, when I make the AJAX request, it redirects me to the resource instead of initiating the file download. This is the AJAX function I am using: $('.download').click ...

javascriptjqueryajax

How can we ensure that specific criteria are displayed once a selection is made?

Users have multiple options to choose from. When a user selects one option, I want to display additional options that are dependent on the initial selection. For example, if the user can select between 1 or 2 gates, upon choosing a number I will show all t ...

phpjqueryhtmlcss

The Object filter is experiencing a delay with processing 10,000 items

When an API returns over 10,000 objects in the format of {firstName:'john',lastName:'Cena'}, I am faced with a performance issue. In my parent React component, I make the API call in componentDidMount and pass this object to child compo ...

javascripttypescript

Incorporating a CSS Module into a conditional statement

Consider the following HTML structure <div className={ `${style.cell} ${cell === Player.Black ? "black" : cell === Player.White ? "white" : ""}`} key={colIndex}/> Along with the associated CSS styles .cell { ...

cssreactjstypescript

Padding has an impact on the widths of flexbox items

Take a look at this code snippet: http://jsfiddle.net/56qwuz6o/3/ <div style="display:flex"> <div id="a">a</div> <div id="b">b</div> <div id="c">c</div> </div> div div { ...

cssflexbox

Setting up Mongoose with Admin JS in NestJS: A Step-By-Step Guide

After successfully configuring adminJS in my Nest JS application, it now runs smoothly on localhost:5000/admin. @Module({ imports: [ import('@adminjs/nestjs').then(({ AdminModule }) => AdminModule.createAdminAsync({ ...

javascriptnode.jsmongoosenestjsadminjs