Arrange the trio of columns to all have equal heights

After using Bootstrap to create three columns, I noticed that they are not the same height. The left column is larger than the others, even though they were supposed to all be equal in height.

The issue lies in the fact that I did not set a specific height for the cards within each column. As a result, if one column grows in height, the rest do not automatically adjust to match it.

Is there a way to make all the columns the same height without resorting to specifying measurements in pixels (px)?

Thank you

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />


<div class="col-3">
  <div class="row">
    <div class="col" style="padding-right:0">
      <div class="card cardm">
        <div class="card-body" style="overflow-y: auto;">
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col" style="padding-right:0">
      <div class="card cardm">
        <div class="card-body">
        </div>
      </div>
    </div>
  </div>
</div>
<div class="col">
  <div class="row">
    <div class="col">
      <div class="card cardm">
        <div class="card-body">

        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <div class="card cardm">
        <div class="card-body">

        </div>
      </div>
    </div>
  </div>

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

If you are utilizing Bootstrap4, achieving the desired result is straightforward with the help of BS4 predefined classes such as h-100. Additionally, it's essential to ensure that your HTML structure aligns correctly with Bootstrap instructions.

To easily set width & height:
https://getbootstrap.com/docs/4.3/utilities/sizing/#relative-to-the-parent

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container my-2">
  <div class="row">
    <div class="col-3">
      <div class="card cardm h-100">
        <div class="card-body">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit
        </div>
      </div>
    </div>
    <div class="col-3">
      <div class="card cardm h-100">
        <div class="card-body">
          Ut enim ad minim veniam, quis nostrud exercitation ullamco.
        </div>
      </div>
    </div>
  <div class="col-3">
      <div class="card cardm h-100">
        <div class="card-body">
          Laboris nisi ut aliquip ex ea
        </div>
      </div>
    </div>
  <div class="col-3">
      <div class="card cardm h-100">
        <div class="card-body">
          Voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
        </div>
      </div>
    </div>
  </div>
</div>

Answer №2

Implemented JavaScript to complete the task, directly sourced from a linked post marked as a duplicate. The display looks distorted on smaller screens.

// Using JavaScript to scan for cards
var cards = $('.card');
var maxHeight = 0;

// Looping through all the cards to compare heights and store the maximum value
for (var i = 0; i < cards.length; i++) {
  if (maxHeight < $(cards[i]).outerHeight()) {
    maxHeight = $(cards[i]).outerHeight();
  }
}
// Setting the height of ALL card bodies to match the maximum height found
for (var i = 0; i < cards.length; i++) {
  $(cards[i]).height(maxHeight);
}
.mycontainer {
    width: 96%;
    margin-top: 148px;
    margin-right: auto;
    margin-left: auto;
}

.card{
    width:100%;
    margin-top:15px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 20px #BCBCCB47;
    border-radius: 8px;
    border: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="width: 100%;height: 100%; overflow-y: auto; overflow-x: hidden;">
    <div class="row mycontainer">
      <div class="col">
        <div class="row">
          <div class="card">
            <div class="card-body" style="padding: 8px;">
            
            </div>
          </div>
        </div>>;
         <continued-copied-content></answer2>
<exanswer2><div class="answer" i="60299898" l="4.0" c="1582102784" v="-1" a="V2ltYW5pY2VzaXI=" ai="9568358">
<p>Executed JavaScript, simply duplicated from the corresponding post identified as identical. Appears peculiar on narrower screens.</p>

<p><div>
<div>
<pre class="lang-js"><code>// Concluded using JavaScript, replicated from the indicated post considered a duplicate. Looks unconventional on smaller displays.
.mycontainer {
    width: 96%;
    margin-top: 148px;
    margin-right: auto;
    margin-left: auto;
}

.card{
    width:100%;
    margin-top:15px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 20px #BCBCCB47;
    border-radius: 8px;
    border: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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

How come my script is able to access files mentioned in my HTML even though I didn't specifically designate them to be read using ioutil.ReadFile() in GoLang?

I am working on a GoLang script that dynamically constructs webpages based on an input query in the browser. The query looks like this http://localhost:8000/blog/post#, where the post# portion identifies which JSON data file to parse into the HTML template ...

htmljsonhttpgo

Is there a way to include a textarea or text input in a table row and have it expand upon clicking or dragging, without increasing the row height?

I am looking for a way to allow a textarea to expand or grow when clicked or dragged, without affecting the height of the table row it is in. You can see an example of the issue on this CodePen: https://codepen.io/kerastensorflow/pen/PobaRvK?editors=1010 ...

htmlcssreactjs

Tips for breaking out of an infinite loop while loading HTML containing a carousel into a blank <div> within another HTML file using jQuery's $(document).ready() function

Currently, I am studying HTML, CSS, Bootstrap 4, jQuery3, and JavaScript (ES6+), and to enhance my skills, I have devised an exercise for practice and consolidation. I have created 4 HTML files, all featuring responsive design based on Bootstrap 4: inde ...

jqueryhtmlcssajaxbootstrap-4

When a row is selected in Angular UI-Grid, copy the data from that row onto the clipboard

In need of a function to copy an entire row's data to the clipboard with a simple click. I have a Plunker link where I can only copy cell text: http://plnkr.co/edit/EVrB5Ib9ZuqhbAMsV9Eg?p=preview Below is the pseudocode for the Grid Options: $scope ...

cssangularjsangular-ui-gridui-grid

Issue with color display inconsistency in webgrid across various segments

https://i.sstatic.net/UW17M.png My goal is to display section status colors in a webgrid and divide them percentage-wise, but I am facing issues with some of the rows. Here is the cshtml script for the webgrid section status: webGrid.Column(header: "Sec ...

htmlcssasp.net-mvcgridwebgrid

Finding the XPath for a modal using Selenium

I must locate and select this input field... (name="BtnNext" value="İLERİ" class="NavigationButtonNextLightBox ") ...using XPath after a modal popup. I am unable to use .FindByClass because there are identical classes on the main page, but I specifical ...

htmlseleniumxpath

Creating a background color without using the <canvas id> element can be achieved by utilizing CSS properties such as

As a novice in the world of HTML and CSS, I find myself working on creating my website using HTML. Upon inspecting my site, I notice that the default background color is white. Despite trying to change it by using #canvas { background-color: black; } in ...

htmlcssbackground-color

Form submission leaves modal field blank

When a user submits a comment using the modal, the form-backing-object reaches the post endpoint but the field remains empty. <!-- Modal --> <div class="modal fade" id="exampleModalCenter" tabindex=&q ...

spring-bootbootstrap-4thymeleaf

Issue with setting Y Axis intervals using ticks in d3 library

I am trying to set the Y Axis from 0 to 100 percent with intervals of 0-25-50-75-100. Despite setting ticks to 4, I am seeing Y axis intervals of 0-20-40-60-80-100 How can I adjust the Y axis to display intervals of 0-25-50-75-100? Here is the code I am ...

javascripthtmljqueryreactjsd3.js

Issues with ASP.net rendering stylesheets

Here is the layout of my Index.cshtml page: <html> <head runat="server"> <link href="~/Content/index.css" rel="stylesheet" type="text/css" /> <asp:ContentPlaceHolder ID="HeadContent" runat="server" /> </head> < ...

htmlcssasp.net

How can content be kept from dropping below a stationary header?

One thing I've noticed when creating a fixed header is that I often resort to using padding in order to push the content back into view if it falls below the header. Is there a way to create a fixed header without relying on padding or margin to keep ...

htmlcss

I am encountering a problem with validating my form using JavaScript

I've been working on a project where I'm developing a website using JavaScript, HTML, and CSS to search for movies and purchase tickets. While the basic functionalities are working fine, I'm encountering some challenges with form validation. ...

javascripthtmlcss

``There seems to be an issue with CSS Transform/Transition not functioning properly

Here is some CSS code that I used to animate a list of items on my website: selector { display: flex; } #primary li a { -webkit-background-clip: text; -webkit-text-fill-color: transparent; ...

csssafaritransformtransitionwebkit-transition

Tips on arranging two buttons vertically so that they each occupy 50% of the total height

I am looking to create + and - buttons in Bootstrap where the + is stacked on top of the - with both buttons occupying 50% of the height of the full div each. Here's an example of what I would like to achieve: https://i.sstatic.net/DrnEt.png To imp ...

htmlcssbootstrap-4

What is the best way to rate a particular image?

while ($row = mysqli_fetch_array($result)) { echo ""; echo "<div id='img_div'>"; echo "<i class='fas fa-times'></i>"; echo "<img class='photoDeGallery' s ...

javascriptphpjquerycssajax

Internet Explorer does not display CSS effectively

Having issues with CSS on Internet Explorer While this page displays correctly in Firefox, Chrome, and Opera, on IE the "date bar" is overlapping on the first <li> bar View the issue here: The current CSS code is: #content h2.other-posts { he ...

cssinternet-explorerfirefoxcross-browserhtml

Could someone please clarify a specific aspect of how floats work?

Could someone simplify this explanation for me? A float is positioned next to a line box if there is a vertical space that meets these conditions: (a) at or below the top of the line box, (b) at or above the bottom of the line box, (c) below the top margi ...

cssspecifications

extract the heading tag to retrieve the title

for(i=0;i<headingsallowed.length;i++){ var x=allhtml.getElementsByTagName(headingsallowed[i]); } In my script, I am trying to process all the headings and extract the title from each one. The array headingsallowed contains the allowed heading type ...

javascripthtml

Leverage the power of Bootstrap 4 without incorporating its pre-built components

Is it possible to utilize Bootstrap 4 without its components? The diagram below seems to suggest otherwise, correct? My Scenarios: I need to implement Angular Material components instead of Bootstrap components. It's acceptable to use Bootstrap 4 ...

htmlcssangularbootstrap-4angular-material

Having difficulty changing the $theme-color variable in bootstrap

Utilizing Bootstrap 4.0 along with SASS Within my style.scss file, you will find the following code: @import "../bootstrap/scss/bootstrap"; @import "colors"; @import "main"; Meanwhile, the _colors.scss file contains the following code: $bg-white : whi ...

twitter-bootstrapbootstrap-4sassbootstrap-5