Is there a method to ensure equal alignment of the <div class="card"> elements in Bootstrap?

I need help figuring out how to align this card uniformly with the others:

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

In the image below, you can see that the card for the top reason for downtime doesn't match the other cards. I want them all to be the same height regardless of their content.

Here is my code snippet:

<div class="container-fluid">
            <div class="row">
                <div class="col-md-3">
                    <div class="card shadow mb-4">
                        <h5 class="card-header">
                            Top Reason for Downtime
                        </h5>
                        <div class="card-body">
                            <ul id="top5Downtime">

                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-md-5">
                    <div class="card shadow mb-4">
                        <h5 class="card-header">
                            Top Down Terminals:
                        </h5>
                        <div class="card-body">
                            <ol id="mostDown">

                            </ol>
                        </div>
                    </div>
                </div>
              ... (Additional code omitted)

I attempted using align-self-stretch, but it disrupted my design. Any suggestions on how I should proceed?

cssbootstrap-4frontend

Answer №1

To ensure that each of the columns in the same row have equal height, you can apply the display: flex property (or use the .d-flex class) to each of the .col elements:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-md-3 d-flex">
      <div class="card shadow mb-4 w-100">
        <h5 class="card-header">
          Top Reason for downtime
        </h5>
        <div class="card-body">
          <ul id="top5Downtime">

          </ul>
        </div>
      </div>
    </div>
    <div class="col-md-5 d-flex">
      <div class="card shadow mb-4 w-100">
        <h5 class="card-header">
          Top Down Terminals:
        </h5>
        <div class="card-body">
          <ol id="mostDown">

          </ol>
        </div>
      </div>
    </div>
    <div class="col-md-4 d-flex">
      <div class="card shadow mb-4 w-100">
        <h5 class="card-header">
          Top Up Terminals:
        </h5>
        <div class="card-body">
          <ol id="mostUp">

          </ol>
        </div>
      </div>
    </div>
  </div>
  <!--End of div.row-->

  <div class="row">
    <div class="col-12">
      <div class="card shadow mb-5">
        <div class="card-body">
          <div id="bar-chart">
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--End of div.row-->
  <div class="row">
    <div class="col-12">
      <div class="card shadow mb-5">
        <div class="card-body">
          <div id="lineChart">
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-md-6 d-flex">
      <div class="card shadow mb-3 w-100">
        <h5 class="card-header">
          Planned vs Unplanned Event
        </h5>
        <div class="card-body">
          <div id="pieChart"></div>
        </div>
      </div>
    </div>

    <div class="col-md-6 d-flex">
      <div class="card shadow mb-3 w-100">
        <h5 class="card-header">
          Downtime vs Uptime
        </h5>
        <div class="card-body">
          <div id="pieChart2"></div>
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-12">
      <div class="card shadow mb-5">
        <div class="card-body">
          <div id="barChart2">
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-12">
      <div class="card shadow mb-5">
        <div class="card-body">
          <div id="barChart3">
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--END OF div.row-->
  <!--END OF div.row-->
</div>

Additionally, don't forget to add the .w-100 class to the cards inside the .d-flex columns to ensure they stretch to the full column width on smaller screens.

Important reminder: This approach assumes there is only one card in each .col. If you have multiple cards, you will need to include the .flex-column class in your .col as well.
For your current scenario, applying .d-flex to the .col elements should be sufficient.

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

Refresh the content of an iframe (local HTML) by clicking on buttons

When a user clicks on a button, I am loading an HTML file into a DIV (iframe). The issue arises when the user clicks another button and wants to reload the iframe with a different HTML file. This is the current code snippet: <script type="text/javasc ...

javascriptjqueryhtmlcssiframe

The same size background effect

I am looking to create a list of names that are all the same size. How can I achieve this using Bootstrap? <ul class="list-unstyled"> <li> <a class="btn btn-xs btn-warning"> <span >Loren ipsum</span> </a> ...

csstwitter-bootstrap-3

What is the best way to center align my horizontal subnav?

I am currently working on a horizontal navbar with horizontal submenus. One issue I am facing is getting the elements in mysubnav to align centrally instead of being pushed to the left all the time. If you need a visual representation of what I mean, plea ...

javascriptjqueryhtmlcssnavigation

Is it possible to use negative values in css?

Is it acceptable to utilize negative values in CSS? For instance: margin:-11px 20px -18px 0px; OR Is there a prevailing guideline that prohibits the use of negative values? ...

css

Step-by-step guide on using variables to apply CSS

In our table consisting of 6 rows and 2 columns, the second column displays a Font Awesome circle followed by various values in the database field (such as Outstanding, Very Good, Good, Needs Improvement, and Adequate). I am looking to dynamically change ...

phpcss

What is the proper way to add my image to CSS?

I'm encountering an issue while trying to insert my picture - I keep receiving a 404 error even though I believe my path is correct. Here are my files: main-menu phone.png _menu.scss Within my _menu.scss file, the following code is p ...

cssimagesasspath

The transparency feature is malfunctioning in IE9 when using a background

This is a demonstration of a lightbox feature. You can find the code here. When you click on the link "Show Panel," a form will pop out. It works correctly in Firefox but not in IE9. The HTML code is simple: <body> <a id="show-panel" href="#"&g ...

jqueryhtmlcssinternet-explorerlightbox

The x-axis values in Amchart are transitioning rather than shifting

I'm facing an issue with my x-axis values as I'm using real-time amcharts. The x-axis values change every 3 seconds, but instead of smoothly moving, they abruptly change to the next value. I would like it to slide smoothly like this example: htt ...

javascriptcsswebamcharts

What is the best way to dynamically shift the position of an image on a page while keeping it in place in real-time?

A group of friends and I are currently collaborating on an experimental project for a presentation. Our goal is to have multiple elements (such as images, text, gifs) displayed on a page that can be dragged around in real-time using a draggable script whi ...

javascripthtmlcssdraggable

When you click on the column header to sort, the corresponding column row changes color in JavaScript

https://i.sstatic.net/4ELuv.jpg When a user clicks on a column to sort, the color of the column changes or highlights the row. In my tablesorter with ascending and descending sorting capabilities, I want the sorted column to change colors for better visib ...

javascriptjquerycssgrails

Is it better to store CSS and JavaScript in separate files or within the main HTML document

While the best practice is to place JavaScript and CSS code in separate files (such as .js and .css), many popular websites like Amazon, Facebook, etc. often include a large portion of their JavaScript and CSS code directly within the main HTML page. Whic ...

javascripthtmlcssweb

How can we align images above one another in a responsive manner using Bootstrap 3?

Looking for assistance with aligning and overlapping images on top of another image in Bootstrap while maintaining responsiveness. I've attempted the following: HTML: <div class="container"> <div class="row"> <div class="col-lg-12"> ...

csstwitter-bootstrap

"I'm experiencing a problem with display:inline in IIS 7 - can anyone

Unfortunately, our development web server cannot be accessed externally, so sharing a link is not possible. However, I can explain the issue we are experiencing. While creating markup for a new website on my local machine, everything appears as intended. ...

htmlcssiis

The footer and login form are tangled up in a web of confusion

Here is my HTML code for a login form: <div class="middle-box text-center loginscreen"> <div> <form class="" role="form" action="index.html"> <div class="form-group&q ...

htmlcsstwitter-bootstrap

What CSS property prevents a fixed header from overlapping a scrolled element?

After creating a fixed header for my HTML table, I noticed that as I scroll down the page, everything is being overlapped by the fixed header except for one slider (noUiSlider). I am curious to know which CSS property is preventing the header from overlayi ...

javascriptjqueryhtmlcss

Transforming the header to function similarly to the address bar in the Google Chrome mobile app

I have managed to create a fixed header that appears when the user scrolls up and disappears when they scroll down. However, I want it to behave like the address bar on the Google Chrome mobile app - remaining stationary until the top of the window reaches ...

jqueryhtmlcss

What is the method for adding a dark, semi-transparent overlay across the entire webpage?

Is it possible to overlay the entire webpage with a 50% opaque black div? I attempted to achieve this by creating a fixed position div at the top of the script with 100% width and height and a z-index of 1. However, this method prevents me from placing an ...

htmlcss

organize divs in a nested angular style

Looking to showcase div elements in a specific layout within my Angular project: https://i.sstatic.net/RH0lF.png The current HTML structure is as follows: <div class="outer-wrapper"> <div class="image" ng-repeat="image in images" ng-if="sho ...

htmlcssangularjs

How can we ensure that the borders of a text field automatically adjust to fit the dimensions of the text field using CSS?

I've encountered an issue with the borders of text fields while working on a project involving CSS/HTML. The problem is that in the browser, the borders appear shorter than the text fields. Initially, I attempted to adjust the border size to match th ...

htmlcss

What could be causing the width of a table row (tr) in a table element to not function properly, while the height is functioning as expected?

My code is as follows: .table1 { background-color: gray; display: flex; justify-content: ; align-items: ; height: 400px; margin-left: 40px; padding-left: ; } .table1 tr { background-color: blue; height: 50px; width: 50px; } <tabl ...

htmlcss