Create a card in Bootstrap that adjusts its height based on the response JSON values

I am dealing with a JSON response array structured as follows:

 var response2 = {
 "response": {
    "Data1": [{
      codeImage: "605313c59050dc5fc1f3372c"
      created_by: "23"
      form_name: "default"
      location: "station 1"
      image_file: "605313c59050dc5fc1f3372c123a213.png"
      image_url: "https://mysite:8241/products/view?code=605313c59050dc5fc1f3372c123a213"
      _id: "605313c59050dc5fc1f3372c",
    }],
    "Data2": [{
      codeImage: "605313fe3cdf045fbcf14be5"
      created_by: "23"
      form_name: "default"
      location: "testing testing testing testing testing"
      image_file: "605313c59050dc5fc1f3372c123a213.png"
      image_url: "https://mysite:8241/products/view?code=605313c59050dc5fc1f3372c123a213"
      _id: "605313fe3cdf045fbcf14be5",
    }]
   }}

To display the above data using Bootstrap cards, I attempted to use 'append' but encountered an issue where the card heights were not consistent due to the varying length of the 'location' values in Data1 and Data2.

Below is the code snippet for the 'append' function:

for (var i = 0; i < response2.response.length; i++)
{
    var location = response2.response[i].location
    var image= response2.response[i].image_url
    var form_name = response2.response[i].form_name

    var showImage= 
     '<div class="col-sm-12 col-md-4 col-xl-4 col-padding" style="padding-right:0px; padding-left:20px; display: table; width: 100%;">'+
          '<div class="card card-custom card-stretch gutter-b card-padding">'+
              '<div class="d-flex align-items-center row">'+
                  '<div class="col">'+
                      '<div class="col-sm-12 col-md-12 col-xl-12">'+
                            '<div class="text-muted mt-1">Location</div>'+
                            '<p class="text-dark font-weight-bolder font-size-lg mt-2">'+location+'</p>'+
                      '</div>'+
                      '<div class="col-sm-12 col-md-12 col-xl-12">'+
                            '<div class="text-muted mt-1">Form</div>'+
                            '<p class="text-dark font-weight-bolder font-size-lg mt-2">'+form_name+'</p>'+
                      '</div>'+
                  '</div>'+
                  '<div class="col">'+
                      '<div class="col-sm-12 col-md-12 col-xl-12">'+
                             '<img src="'+image+'" alt="" class="image-img">'+
                      '</div>'+
                  '</div>'+
              '</div>'+
              '<div class="row justify-content-center btn-margin" style="margin-left:-25px">'+
                    '<div class="col-sm-12 col-md-4 col-xl-4">'+
                         '<button class="btn btn-xl btn-light btn-full-width" style="margin-right:10px"><i class="fas fa-print"></i> Show Data</button>'+
                     '</div>'+
                     '<div class="col-sm-12 col-md-4 col-xl-4">'+
                         '<button class="btn btn-xl btn-primary btn-full-width" style="margin-right:10px"><i class="fas fa-edit"></i> Edit</button>'+
                     '</div>'+
                     '<div class="col-sm-12 col-md-4 col-xl-4" >'+
                          '<button class="btn btn-xl btn-danger btn-full-width" style="margin-right:10px; width: 100px;"><i class="fas fa-trash-alt"></i> Delete</button>'+
                     '</div>'+
              '</div>'+
          '</div>'+
    '</div>';
    $("#imagepadding").append(showImage);
 }

The HTML structure required for the 'imagepadding' cards is shown below:

<div class="d-flex flex-column-fluid">
    <div class="container addon-padding">
        <div class="row" id="imagepadding">    
        
        </div>
    </div>
</div>

I attempted to use 'h-100 card-body' within the 'card' div, but the issue remained unresolved. Can anyone advise on how to ensure that all bootstrap cards have the same height?

Thank you.

javascripthtmlcssbootstrap-4

Answer №1

It seems like you are in need of a card-deck to achieve your desired layout. By enclosing your cards in a 

<div class="card-deck">
, Bootstrap will automatically adjust their heights to be equal.

UPDATE: To further enhance the alignment of buttons, consider placing them within a .card-footer element. The example below demonstrates how buttons can be placed inside a 

<div class="card-footer bg-white border-0">
for consistent positioning at the bottom of each card.

Keep in mind that Bootstrap's height adjustments apply when cards are displayed side by side (in a multi-column layout). In a single col-12 setup, the heights will remain unaltered as everything is contained within a single column.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3d5f5252494e494f5c4d7d09130b">[email protected]</a>/dist/css/bootstrap.min.css">

<!-- Enclose .cards in .card-deck for uniform height -->
<div class="card-deck">
  <div class="card">
    <div class="card-body">
      <p class="card-text">station 1</p>
    </div>
    <!-- Place buttons in .card-footer for consistent alignment -->
    <div class="card-footer bg-white border-0">
      <button class="btn btn-light border">Show</button>
      <button class="btn btn-primary">Edit</button>
      <button class="btn btn-danger">Delete</button>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <p class="card-text">testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing</p>
    </div>
    <!-- Place buttons in .card-footer for consistent alignment -->
    <div class="card-footer bg-white border-0">
      <button class="btn btn-light border">Show</button>
      <button class="btn btn-primary">Edit</button>
      <button class="btn btn-danger">Delete</button>
    </div>
  </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

Leveraging jQuery template for JSON visualization

I've been struggling for days to understand how to render JSON data using jQuery templates with no luck. I was hoping someone could help me figure out where I'm making a mistake. The JSON data I am working with looks something like this: [{"pk" ...

javascriptjqueryjsonjquery-templates

Every single checked value in the checkbox variable

Encountered a small hiccup. Let me explain. In my form, there are 8 checkboxes. The goal is to loop through and capture the value of each checked checkbox using a variable. However, I'm always getting the same value from the first checkbox. Here&apo ...

javascriptjquery

Is there a way to design a side menu navigation bar that reveals items by sliding them out to the right?

Currently, I am attempting to emulate a website as practice since I am relatively new to HTML, CSS, and JavaScript. As part of this exercise, I have designed a navigation bar on the left side (similar to the example provided for food items). The objectiv ...

javascripthtmlcss

Is it feasible to incorporate the CSS and Bootstrap (CDNs) specific to an HTML component without affecting the styling of other pages?

One way I am able to recycle the HTML component is using this code: $.get("nav.html", function(data) { $("#fulloptions").replaceWith(data) }) However, there’s a conflict because nav.html uses a different version of Bootstrap than my index file does ...

htmlbootstrap-4

Troubleshooting unexpected behavior with Custom Guest middleware in Nuxt Project

I have implemented the Nuxt auth module for my project. To manage the login page, I created a custom middleware called guest.js, which has the following code: export default function ({ $auth, store, redirect }) { if (!process.server) { if ($auth ...

javascriptvue.jsnuxt.js

In need of clarification on the topic of promises and async/await

I have been utilizing Promises and async/await in my code, and it seems like they are quite similar. Typically, I would wrap my promise and return it as needed. function someFetchThatTakesTime(){ // Converting the request into a Promise. return new ...

javascriptnode.jsasync-await

react-intersection-observer is specifically designed to function with the final elements

I am currently working on implementing the Lazy Loading feature using react-intersection-observer. The main objective is to load images in the boxes only when they appear within the viewport. At the moment, as I scroll down to the last elements, all the i ...

javascriptreactjsreact-refreact-intersection-observer

What is the best way to retrieve the value of a custom attribute from a dropdown list using either JavaScript or jQuery?

I have a dropdown list on a web form and I need to have a 'hidden' variable for each item in the list that can be retrieved using the onchange event on the client side. To achieve this, after databinding the dropdownlist, I am setting a custom at ...

javascriptjqueryhtmlasp.net

Increase the border thickness around my title and add a border after an image

I'm encountering difficulties when trying to replicate the style showcased in this image using CSS. My specific challenge lies in creating a yellow horizontal line above the title "nossos numeros" and blue vertical lines between "Cursos", "Alunos", an ...

csstwitter-bootstrap-4

The functionality ceases to operate properly once a new element has been added

I am encountering an issue with the "click" action on a newly created element through a jQuery function, as it is not functioning properly. To demonstrate this problem, I have set up a JSFiddle at the following link (JSFiddle), however, please note that t ...

javascriptjqueryhtmlcssajax

When navigating to a new route using history.push in React, it's important to ensure that the correct state is

My goal is to implement a smooth exiting animation with framer motion based on the user's current route and next destination. I specifically want the background to slide away only when transitioning from route A to route D. To achieve this, I decided ...

javascriptreactjsanimationroutesstate

Issue with uniform sizing of Bootstrap card-deck components

I have set up a display of card decks to showcase a collection of articles pulled from a database. The code snippet I am currently using is fairly simple: HTML <div class="row"> <div class="card-deck"> <template is="dom-repeat" ...

cssbootstrap-4

Position the ion-radio element in the middle of the layout

As I work on creating a privacy page in HTML using Ionic 3, my desired output should resemble the following: https://i.sstatic.net/lxzc9.png However, with my current code, the result I'm seeing is different from what I expected: https://i.sstatic.net ...

cssionic-frameworksassionic3

Learning how to pass multiple rows of data using d3 is essential for effective data

Here is some code that I am working with: var row = 4; var col = 4; var stack = d3.layout.stack(); var layers = stack( d3.range(row).map(function() { return CmcLayer(col); })); function CmcLayer(col) { var a = [1, 2, 3, 4]; return a.map(func ...

javascriptd3.js

output the value of a variable and choose it

I am attempting to display a variable as the placeholder value in a search box that will be used to search on Google Maps. The variable is stored as $address. $address = $_SESSION['mylocation']['address']; Then, in my HTML form I hav ...

phphtmlvariablesecho

What is the process for incorporating a service into a shared function?

After creating a 'popping' message component similar to Android toast, I have integrated it as a sibling in all other components through a shared service. Now, I want to utilize this component within a utility function like the following: export ...

javascriptangulartypescript

React Hooks findByID method is throwing an error stating that it cannot read the property 'params' because it is undefined

As I dive into learning React hooks, I'm realizing that it's crucial to stay up-to-date with the latest trends in web development. Despite hours of research and tinkering around, I can't seem to wrap my head around some key concepts. The fac ...

javascriptreactjsaxiosreact-hooks

What is the method for retrieving field names of a JavaScript object in HTML that has been transferred from the backend?

For instance: var obj={name:bob,} I am trying to access an array containing keys of obj like [name], rather than just the value bob. <h1>{{ pagename|title }}</h1> <ul> {% for author in collections %} <li > {{ author.uno } ...

htmlnode.jsexpressswig-template

Incorporating a dropdown menu into an HTML table through jQuery proves to be a

I loaded my tabular data from the server using ajax with json. I aimed to generate HTML table rows dynamically using jQuery, with each row containing elements like input type='text' and select dropdowns. While I could create textboxes in columns ...

javascriptjqueryhtmlajax

Materialize experiencing issues with labels overlapping pre-existing content

My goal is to fill out a form using Materialize, but the written content is overlapping the input's placeholder. The JS code I'm currently using is: $("label[for='firstname']").addClass("active"); document.getElementById("firstname"). ...

javascriptjquerygoogle-chrome-extensionmaterializeautofill