How can the height of nested rows in side-by-side cards be adjusted to match each other?

Question

How can the height of nested rows in side-by-side cards be adjusted to match each other?

I am facing a situation where I have two side-by-side cards with nested rows containing dynamic content. My goal is to make sure that the height of each row in the first card matches the height of the corresponding row in the second card.

To achieve this, I need to calculate the heights as follows: height of A1 = max(height of A1, height of A2), height of A2 = max(height of A1, height of A2), height of B1 = max(height of B1, height of B2), height of B2 = max(height of B1, height of B2).

The code snippet for my setup looks like this:

<div class="row">
    <div class="col-lg-6 mb-3">
        <div class="card">
            <div class="card-body">
                <div id="a1" class="row">
                    ...
                </div>
                <div id="b1" class="row">
                    ...
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-6 mb-3">
        <div class="card">
            <div class="card-body">
                <div id="a2" class="row">
                    ...
                </div>
                <div id="b2" class="row">
                    ...
                </div>
            </div>
        </div>
    </div>
</div>

Currently, my layout looks like this:

https://i.sstatic.net/GbcYs.png

What I am aiming for is to achieve a layout similar to this:

https://i.sstatic.net/zBwSG.png

Is there a way to accomplish this using only Bootstrap 4 and CSS?

html css twitter-bootstrap bootstrap-4

Answer 1

Answer №1

To achieve the desired layout with Bootstrap cards, you'll need to get creative. Try using custom borders on a CSS grid instead, where one card spans two rows. By omitting wrapper elements that disrupt row flow, you can create the illusion of separate cards.

For mobile responsiveness, consider adding a media query at your preferred breakpoint (such as 992px). This will ensure the "cards" stack correctly on smaller screens. While Bootstrap lacks built-in support for CSS grid, implementing custom styles allows for better control and maintains semantic order in your content structure.

Check out the provided CSS code snippet for styling guidance, and remember to organize your document content logically with headings and paragraphs. This approach ensures accessibility and readability across different viewport sizes.

Answer 2

To achieve the desired layout with Bootstrap cards, you'll need to get creative. Try using custom borders on a CSS grid instead, where one card spans two rows. By omitting wrapper elements that disrupt row flow, you can create the illusion of separate cards.

For mobile responsiveness, consider adding a media query at your preferred breakpoint (such as 992px). This will ensure the "cards" stack correctly on smaller screens. While Bootstrap lacks built-in support for CSS grid, implementing custom styles allows for better control and maintains semantic order in your content structure.

Check out the provided CSS code snippet for styling guidance, and remember to organize your document content logically with headings and paragraphs. This approach ensures accessibility and readability across different viewport sizes.

Answer 3

Answer №2

To achieve this functionality, I will be utilizing jQuery library.

var calculateMaxHeight = function(elements){
    return Math.max.apply(null, elements.map(function ()
    {
        return $(this).height();
	}).get());
}

$('.a').css('height', calculateMaxHeight($(".a")));
$('.b').css('height', calculateMaxHeight($(".b")));

.col-6{
	border: 1px solid black;
	padding: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row p-2">
  <div class="col-6">
    <div class="row match-height">
      <div class="col-12 ">
        <div class="card a">
          <div class="card-body">
            #A1
            <br>
            Extraa
          </div>
        </div>
      </div>
    </div>
    <div class="row match-height">
      <div class="col-12 ">
        <div class="card b">
          <div class="card-body">
            #B1
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="col-6">
    <div class="row match-height">
      <div class="col-12">
        <div class="card a">
          <div class="card-body">
            #A2
          </div>
        </div>
      </div>
    </div>
    <div class="row match-height">
      <div class="col-12">
        <div class="card b">
          <div class="card-body">
            #B2
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 4

To achieve this functionality, I will be utilizing jQuery library.

var calculateMaxHeight = function(elements){
    return Math.max.apply(null, elements.map(function ()
    {
        return $(this).height();
	}).get());
}

$('.a').css('height', calculateMaxHeight($(".a")));
$('.b').css('height', calculateMaxHeight($(".b")));

.col-6{
	border: 1px solid black;
	padding: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row p-2">
  <div class="col-6">
    <div class="row match-height">
      <div class="col-12 ">
        <div class="card a">
          <div class="card-body">
            #A1
            <br>
            Extraa
          </div>
        </div>
      </div>
    </div>
    <div class="row match-height">
      <div class="col-12 ">
        <div class="card b">
          <div class="card-body">
            #B1
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="col-6">
    <div class="row match-height">
      <div class="col-12">
        <div class="card a">
          <div class="card-body">
            #A2
          </div>
        </div>
      </div>
    </div>
    <div class="row match-height">
      <div class="col-12">
        <div class="card b">
          <div class="card-body">
            #B2
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

How can the height of nested rows in side-by-side cards be adjusted to match each other?

Answer №1

Answer №2

Similar questions

What is the best way to navigate to a different HTML file in a MEAN Stack application?

Utilize varied CSS files for distinct sections within two different subdirectories

Display a video-thumbnail in place of a static image when sharing a link

What is the best way to align line items containing both text and images vertically on a page?

Guide on how to organize a list into three columns using a single ul tag

Guide on how to use JavaScript to upload media stream recorder blobs onto YouTube using the YouTube API

Navigating a mobile-friendly menu anytime!

Transforming hexadecimal color codes into spans

Sending data to CSS file within Django

How can I delete a CSS class from an element?

Adding a fresh, spacious breakpoint in Bootstrap 4 with just CSS

Ensure all input-group-addons have equal width with Bootstrap 4

Centering input boxes within a panel body through the implementation of CSS grid technology

Is there a way to include an instance variable as a CSS rule in Rails?

Customizing Nav Bar Color in Bootstrap

What could be causing my toggle button to not trigger my responsive menu in JavaScript?

Retrieve data from multiple inputs with the same name in a Spring MVC form

A guide on utilizing buttons within ion list items to execute actions independently for both the button and the list item

When hovering, transition occurs unless the cursor is over a specific element

What is the best way to restrict the selection of specific days of the week on an HTML form date input using a combination of JavaScript, React, and HTML?