Achieving uniform column height with Bootstrap

I am struggling to make two columns of equal height. The content is constantly changing. I have a layout with normal columns (33% width each) on desktop, but on mobile I want the columns to stack. I attempted wrapping them with .row and using 'd-flex', but it didn't work.

Check out my Codepen for reference:

https://codepen.io/olefrankjensen/pen/RxXEBN

I would appreciate any help since I'm still learning about Flexbox.

.ContractTemplateDetails {
      cursor: pointer;
      border: 1px solid #ccc;
      padding: 2rem !important;
      height: 100%;
    }
    
    /* More CSS styles here */
    
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet"/>
<div class="container">

  <div class="row d-flex component-margin-top-small justify-content-center">
    <section class="ContractTemplateDetails mt-sm-0 col-sm-4 d-inline-flex flex-column align-items-center justify-content-center unselectable mr-sm-2" data-template-id="18">
      <div class="contract-image"><img class="" src="http://freevector.co/wp-content/uploads/2010/05/29358-toy-car-outline.png" alt="Contract Basic"></div>
      
      <!-- More HTML markup here -->
      
    </section>
    <section class="ContractTemplateDetails mt-sm-0 col-sm-4 d-inline-flex flex-column align-items-center justify-content-center unselectable mt-3 checked" data-template-id="19">
      <div class="contract-image"><img class="" src="http://freevector.co/wp-content/uploads/2010/05/29358-toy-car-outline.png" alt="OmniCar Premium"></div>
      
      <!-- More HTML markup here -->
      
    </section>
  </div>

</div>
htmlcssflexboxbootstrap-4

Answer №1

To fix the layout issue, simply delete the height: 100%; line from the CSS style applied to the left column with the class .ContractTemplateDetails.

.ContractTemplateDetails {
    cursor: pointer;
    border: 1px solid #ccc;
    padding: 2rem !important;
}

Answer №2

When setting up a flex container, remember that two initial settings to keep in mind are flex-direction: row and align-items: stretch.

These settings ensure that the children of a flex container automatically share equal height.

However, it's important to note that this only works if the height on the children is set to auto. If you specify a height on a child element, it will override the align-items property and disable the equal heights feature.

To guarantee that your columns maintain equal height, make sure to remove any specified height on the flex items:

.ContractTemplateDetails {
    cursor: pointer;
    border: 1px solid #ccc;
    padding: 2rem !important;
    /* height: 100%; <--- remove this */
}

Check out the revised code on CodePen

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

Automatically scroll a div when the internal div is in focus

I want to create a scrollable div that allows for scrolling even when the mouse is over the content inside the div, not just on the blank areas beside it. Here is the code I am currently using: var main = document.getElementById('main-site'); va ...

javascriptjqueryhtmlcss

Crafting an interactive SVG element that maintains its clickability without interfering with mouseLeave events

Trying to Achieve: Changing color and displaying SVG when hovering over a row Clicking the SVG triggers a function, including external functions (not limited to ones defined inside script tags) Returning the row to its original form when mouse leaves Cha ...

javascriptcssreactjseventsreact-bootstrap

Can you explain the process of implementing @media queries in SASS?

I am having some trouble understanding the syntax for media queries in SASS. I attempted to use this particular line of code, but it resulted in an error: @media screen (max-width: 1550px) #server-name left: 80% ...

htmlcsssass

What is the best way to implement autoplay sound on a JavaScript webpage?

I'm currently working on a web system aimed at monitoring values from a database, and I have the requirement to trigger a sound alert when a specific range of values is received. Despite trying various examples found online, none of them have been suc ...

javascripthtml

Exploring the Window.prompt() method in JavaScript

Take a look at this code snippet: <!DOCTYPE html> <html> <body> <p>Click the button to show the prompt box.</p> <button onclick="myFunction()">Try it</button> <p id="demo"></p> <script> funct ...

javascriptjqueryhtmlpopupwindow

Send a MySQL query and an HTTP request to an SMS gateway through JavaScript

I have a scenario where data is being received by my confirm.php file. In this file, I have the following code and currently facing an issue with the javascript part. Any help and suggestions would be greatly appreciated. The objective of my javascript is ...

javascriptphpjqueryhtmlmysql

"The Toggle Switch/checkbox on Proto.io is stuck and not toggling as

I'm currently struggling to make a toggle switch work on my webpage. Despite trying different approaches such as removing data or not applying it to the input element, the toggle still refuses to function properly. The data-field attribute is supposed ...

htmlcss

After processing PHP code, display the page to the user immediately

When a user is on index.php: <form align="center" action="send.php" method="post"> address:<input type="text" name="address"/><br> <input id="submit" type="submit" name="submit" value=""> </form> I want to create a f ...

phphtml

Displaying information based on selection in AngularJSIn this tutorial

I am a beginner in Angularjs and currently working on developing a website. One of the tasks I have is to create a combo box that, when an option is selected, calls a method to load values into a Scope variable and update it. Below is the code I have so fa ...

javascriptangularjshtml

Keep the entire table in place as the user scrolls

I'm trying to create a sticky table that moves while scrolling the page. I currently have two tables, one after another. However, when I scroll the page, only the first table moves about 10px and then stops. My tables don't move at all. Can anyon ...

javascriptjqueryhtml

Scroll and open a specific tab with Bootstrap by utilizing a specialized link

I have a link at the top of the page: <a data-toggle="tab" href="https://mysite.pl/#tabs3-k_tab3" class="blur-button">Check out the promotions</a> I would like this link to scroll to a specific section on the same page (the section with tabs ...

tabsbootstrap-4mobirise

The issue with the before selector causing the button label to overlap on top of the button remains

Check out the code snippet When hovering over the button, the "Sign Up!" label disappears. I tried adding color: rgba(32,32,32,1); to both the .button element and the ::before selector as a backup, but the label still won't display on top of the butt ...

htmlcsshover

instructions on implementing Arial Black font style in LESS

Using less-1.7.0.min.js, I encountered an issue when setting Arial Black as the font. @fontFamily: Arial Black,Arial Black,Gadget,sans-serif; Upon generating the CSS, it resulted in: p, span { font-size: 14px; font-family: Arial #000000, Arial #000000, ...

csslessfont-family

Unique Vertical Layout Customization with Bootstrap

I'm attempting to create a vertical row layout with Bootstrap, but I am encountering an issue where adjusting the height causes one of the columns to get pushed down and out of its intended position on the page. To provide more clarity, I have prepare ...

cssbootstrap-4vertical-alignment

Tips for customizing the color of dropdown options?

Help needed with changing the color of dropdown items in my code: I am looking to change the color of Dr. Winthrop, Dr. Chase, and Dr. Sanders. Below is the HTML/Bootstrap code snippet: <li class="dropdown"><a href="#" data-toggle="dropdown"> ...

htmlcsstwitter-bootstrap

Modifying Table Cell Background Color in ReactJS: A Guide to Conditionally Updating Cell Color Without Affecting the Entire Row

I am working on changing the background color of a cell based on its value. Currently, I am utilizing the following library: react-data-table-component Procedure: If the value is above 0, then the cell's background color will be red. Otherwise, th ...

cssreactjsdatatablefrontend

Is it possible to set a foreign key in Django as read-only and still successfully submit the form without encountering any errors?

I have been attempting to set a foreign key as read-only in my Django forms. I am developing a web application with system management capabilities and I need to prevent specific users from altering a certain field after it has been submitted. class Approv ...

htmlpython-3.xdjangoautomationweb-applications

Peek into the Outlook Calendar Event's Source Code

We are interested in analyzing the source code of calendar events in Outlook across all versions from 2010 to 2016 due to its integration with multiple platforms like Google, Exchange, and Exchange Online. Is there a method available to obtain the HTML so ...

htmlemailoutlookcalendarexchange-server

What is the best way to make text appear as if it is floating in Jade or HTML?

Currently, I am facing an issue with a Jade file that displays an error message when a user tries to log in with incorrect credentials. The main problem is that this error message disrupts the alignment of everything else on the page, as it is just a regul ...

javascripthtmlpug

Can someone show me how to verify in PHP (using codeigniter) if the following two rows contain any data?

I need to verify whether the following TWO rows or ID are not NULL. If there are no consecutive TWO rows or ID, then the income will stay at zero. foreach ($data as $row) { if(($row->id + 2) != NULL) //I am unsure about the c ...

phphtmlsqlcodeigniter