Expanding the height of Bootstrap 4 cards

I'm having an issue with Bootstrap 4's card columns where the height of the shorter card ends up stretching to match the one beside it. This only occurs when I add the 'row' class to the parent div. If I remove the 'row' class, the cards stack on top of each other in Chrome (a known bug) and don't stack on smaller screens in Safari. Another problem is that applying 100% height to the cards causes them not to stretch, leaving a gap between cards.

I was hoping to achieve a Masonry look with the card columns, but they aren't behaving as expected. I suspect the flexbox properties on the 'row' class may be causing the issue, but I need them for the layout in two columns.

Below is my code. Any suggestions or solutions would be greatly appreciated!

.row {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-wrap:nowrap;
    flex-wrap:nowrap;
    margin-right: 30px;
    margin-left: 30px;
}

.card-columns .card {
    width: 320px !important;
    display: inline-block !important;
    height: auto;
}

.card-columns {
    -webkit-column-count: 2 !important;
    -moz-column-count: 2 !important;
    column-count: 2 !important;
    -webkit-column-gap: 1.25rem;
    -moz-column-gap: 1.25rem;
    column-gap: 1.25rem
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
      <div class="card-columns row">
      <div class="d-inline-block bg-dark mr-md-3 pt-3 pt-md-5 px-sm-3 pb-3 mb-3 pb-5 text-center text-white card centered">
        <div class="my-3 p-3">
          <h3 class="display-6">TITLE</h3>
          <p class="lead-portfolio">Some text</p>
        </div>
      </div>
          
      <div class="d-inline-block bg-light pt-3 pt-md-5 pb-5 px-sm-3 mb-3 text-center card centered">
        <div class="my-3 p-3">
          <h3 class="display-6-dark">TITLE</h3>
          <p class="lead-portfolio-dark">Some text</p>
        </div>
      </div>
        </div>
        </div>

htmlcsstwitter-bootstrapbootstrap-4bootstrap-cards

Answer №1

You only need to make 2 simple adjustments to get it functioning correctly.

  1. Avoid setting a fixed width for your cards - this can disrupt the responsiveness and cause them to not display correctly (overlapping or stacking) on certain screens.

  2. Omit using row since you are utilizing card-columns - refer to the Bootstrap Documentation for Card Columns.

(There is also no necessity to set display:inline-block or height:auto for `.card-columns .card, but this is not what's causing the issue as it will still function with those properties.)

You can view the operational code snippet below:

.card-columns {
    -webkit-column-count: 2 !important;
    -moz-column-count: 2 !important;
    column-count: 2 !important;
    -webkit-column-gap: 1.25rem;
    -moz-column-gap: 1.25rem;
    column-gap: 1.25rem
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
   <div class="card-columns">
        [Your card content goes here]
   </div>
</div>

Answer №2

Ensure to use card-column and row classes properly within your HTML structure. It is recommended to utilize the row class in the parent div and card-column in the child div. Your code snippet should resemble this:

<div class=row">
    <div class="card-columns">
        <?php
        // Create and check connection

        if ($result->num_rows > 0) {

            // output card design
            while($row = $result->fetch_assoc()) {

                echo '<div class="card">
                        <img class="card-img-top" src="dance' . $row["id"] . '.jpg" alt="' . $row["name"] . '">
                        <div class="card-block">
                            <h4 class="card-title">' . $row["name"] . '</h4>
                            <p class="card-text">Text. Card content.</p>
                        </div>
                        <div class="card-footer text-muted">
                            <ul class="list-inline">
                                <li><i class="fa fa-user"></i></li>
                                <li>14</li>
                            </ul>
                        </div>
                      </div><!-- card -->';
            }
        } else {
            echo "0 results";
        }

        $conn->close();
        ?>
    </div><!-- container card-columns -->
</div><!-- row -->`

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

Ensuring the checkbox is disabled prior to editing

Check out my table below: https://i.stack.imgur.com/7byIa.png Whenever I click the edit button, I can modify the status field and action field. This feature works correctly. However, the issue is that I am able to change the values of status and action e ...

javascriptjqueryhtmlnode.js

Creating smooth and natural movement of a div element using Javascript (rotating and moving)

After struggling to use jquery plugins for smooth motion with the div elements I'm working on, I've decided it's time to seek some assistance. I have a group of div elements that all share a class and I want them to move around the screen c ...

javascriptjqueryhtmlcss

The jQuery div enclosure technique

I am trying to wrap HTML around an existing div, here is what I have attempted: HTML: <input type="text" data-placeholder="username" /> It should look like this when rendered: <div class="placeholding-input"> <input type="text" data-pl ...

javascriptjqueryhtmlcss

Modify the pseudo element when a different class is active

I've encountered an issue while attempting to modify the after pseudo element when the .active class is applied. Despite my efforts, it doesn't seem to be functioning as intended. My current project setup involves using scss with Vue. I have tri ...

css

When utilizing jQuery's .on() method, sometimes the data being passed to the handler may appear

I have three anchor tags that are dynamically added from an ajax $.get() response. Whenever one of them is clicked, I want to trigger a second request. The parameters for the second request should be set based on the global data attributes in these an ...

jqueryhtmlajax

CSS Class ID selection for selectpicker

I have two classes: selectpicker with different IDs: selected_Test_Platforms and selected_SIL_relevant I am trying to assign a preselection from an array called "availableTestPlatforms" to the selected_Test_Platforms. Currently, when I use the selector $( ...

javascriptjquerycsscss-selectors

Creating a Contact Form with Email Submission using Html and Php

Establishing Database Connection $server = 'localhost:8080'; $username = 'root'; $password = ''; $database = 'resort'; $connect = mysqli_connect($server, $username, $password ) or die(mysqli_error.&apos ...

phpjqueryhtml

What is the best way to ensure that my search box is responsive in HTML and CSS while also horizontally centering the search_box div?

Question 1: I need assistance in making this search box responsive. Every time I try to adjust the screen width, the button ends up below the input field. How can I resolve this issue? Question 2: Is there a way to horizontally center the div class=" ...

htmlcssresponsive-designbootstrap-5

Tips for extracting HTML content from JSON data as valid HTML code

I am attempting to extract HTML content from a JSON object response.indexText, which has been validated with JSONLint. { "indexText": "<div id=\"content-home\"><h1> Hello World! <\/h1> <p>Some text.<\/p> ...

javascripthtmljsonweb

Having trouble with the collapse feature on my DataList cards

I have a sample card and a DataList on my webpage. The collapse functionality is functioning correctly on the example card, but I am unable to get it to work on the actual cards. Below is the code snippet for reference: <div class="resultadosEspe ...

htmlasp.netbootstrap-4

Choosing particular contenteditable divisions using jQuery

Consider the following HTML structure for a specific type of blog post editor: <div class="entry"> <div class="title" contenteditable="true"> <h2>Title goes here</h2> </div> <div class="content" contenteditable ...

javascriptjqueryhtmlcsscontenteditable

What could be causing this Jasmine test to fail, and is it necessary for all functions to be within the scope in order to be tested

My inquiry involves two separate questions: Question One When conducting Jasmine based Angular testing, is it necessary for all functions to be on the scope in order to be tested? For instance, when I attempt to call a function within the test suite like ...

jqueryhtmlangularjsjasmine

Twice the clicking actions triggered by the event

Whenever I try to trigger a function by clicking on the label text, the click event seems to be firing twice. HTML <label class="label_one"> Label One <input type="checkbox"/> </label> However, if I modify the HTML code as f ...

javascriptjqueryhtmlcss

Responsive CSS images with overlays

I need to stack two images on top of each other while ensuring they remain responsive with a percentage width and height. <div class="container"> <img src="res/bigger.png/> <img src="res/smaller.png class="icon"/> </div> ...

htmlimagecssresponsive-design

Is there a way to right-align the labels and input fields simultaneously?

Is there a way to line up the labels and inputs on the right side so they all appear in the same row? .radioContainer{ width: fit-content; margin: 5px; margin-top: 20px; background-color: aqua; padding-bottom: 25px; } <div class=" ...

htmlcss

What is the best way to limit the top margin for a fixed element?

Recently, I came across this code snippet: jQuery(document).ready(function($){ $( window ).scroll(function() { var current_top = $(document).scrollTop(); var heights = window.innerHeight; document.getElementById("sHome").styl ...

jquerycssscrollfixed

Altering calendar dates using VBA for web scraping

Seeking assistance with creating a VBA program for automatically downloading historical stock data from a website. The code I have currently works for downloading data, but I'm facing challenges in changing the date using my code. You can view the co ...

htmlvbaseleniumweb-scraping

EJS: Warning when the "<%= %>" tag is used multiple times within the code

I am currently working on incorporating EJS with Node.js and Express.js. I have defined an array variable called "kindOfDay" containing the names of days as strings, such as "Sun", "Mon"... Within the EJS views folder, there is a file named list.ejs. The i ...

htmlnode.jsexpressejs

Using jQuery validation to verify that a minimum of one radio button holds a true value

I have a form with two questions. The first question asks if the product value exceeds a certain fixed amount, and the second question asks if the product value is below that fixed amount. Upon submitting the form, validation should ensure that at least on ...

javascriptjqueryhtmlvalidationjquery-validate

What is the reason for ng-submit not being prevented by a mandatory select field?

In an HTML5 form, when a select element is required and no option is selected, the appropriate styling for invalidation is applied. However, the ng-submit still allows the form to be submitted. Why does this occur and is there a way to prevent submission ...

htmlangularjsforms