Achieve equal height columns when they are stacked vertically using Bootstrap 5

Can columns be equal height when they become rows on mobile devices?

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="57353838232423253627176279677965">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
      <div class="col-sm-6" style="background-color:red">hi</div>
      <div class="col-sm-6" style="background-color:yellow">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ullamcorper odio a maximus ultrices. Sed vitae pellentesque mi. Aenean sit amet eleifend augue. Donec lobortis lacinia nibh, nec scelerisque turpis scelerisque a. Maecenas id aliquam ante. Sed nec ornare sem. In nec fermentum odio.
      </div>
    </div>

When the screen size is reduced, columns will be stacked on top of each other. The text column will be taller, while the empty one will disappear. How can I ensure they are the same height?

cssbootstrap-5

Answer №1

Include the following JavaScript code:

if (window.screen.width <= 600) {
  const columns = document.querySelectorAll(".col-sm-6")

  const maxHeight = Math.max(columns[0].offsetHeight, columns[1].offsetHeight)

  columns.forEach(column => { column.style.height = `${maxHeight}px` })
}

Answer №2

My suggestion would be to utilize media queries to achieve the desired effect :)

First, assign the same class to both elements as shown below:

 <div class="row">
    <div class="sm-same-height col-sm-6" style="background-color:red">hi</div>
      <div class="sm-same-height col-sm-6" style="background-color:yellow">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ullamcorper odio a maximus ultrices. Sed vitae pellentesque mi. Aenean sit amet eleifend augue. Donec lobortis lacinia nibh, nec scelerisque turpis scelerisque a. Maecenas id aliquam ante. Sed nec ornare sem. In nec fermentum odio.
      </div>
    </div>

Next, apply CSS like this:

@media screen and (min-width: 375px) {
  .sm-same-height{
    height:125px; 
   }
 }

(min-width: 375px) corresponds to the responsive size of a mobile phone :)

Hopefully this solution proves to be helpful for you <3

Answer №3

After conducting some research, I stumbled upon the solution posted on Stack Overflow regarding using CSS grid layout to equalize the heights of containers when the height of the longest container is unknown.

Check out the thread on equal height rows in CSS Grid Layout

I implemented this approach specifically for smaller screens by utilizing the following CSS code snippet:

@media (max-width: 767.98px) { 
.row{
    display: grid !important;
    grid-auto-rows: 1fr;
}
}

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 can I make the arrows work on a secondary slider with EasySlider1.7?

I finally managed to get 2 sliders working on my page after reading through several other tutorials. However, I am facing an issue with the Prev & Next arrows on the second slider as they don't seem to work properly. I inherited this page from someon ...

javascriptjqueryhtmlcsseasyslider

Guide on incorporating Bootstrap JS into HTML5 reusable web elements

RESOLVED: the solution is in a comment TL;DR: Issues triggering Bootstrap's JS, likely due to incorrect import of JS scripts I've been working on integrating Bootstrap with my custom reusable web components across all pages. Specifically, I&apo ...

javascripthtmlcsstwitter-bootstrapweb-frontend

Assigning the CSS class "active" to the navigation menu in ASP Classic

Seeking assistance with setting a CSS class for the current page in an include file that contains the primary navigation menu. Here is my current progress: public function GetFileName() Dim files, url, segments, current 'obtain c ...

cssasp-classicmenuswitch-statement

Reiterating the text and determining the length of the string

Currently, the script is capable of calculating the width of the script based on user input and can also determine the width of a string. However, I am facing an issue when attempting to repeat a string entered by the user. For example, if the user input ...

jquerycss

Support with formatting a dynamic asp:CheckBoxList utilizing Bootstrap styling

I'm currently facing a challenge with styling my asp:CheckBoxList that is populated with values from a database. My framework of choice is Bootstrap 4.3.1 and I'm attempting to style the CheckBoxList using the default example below: <div cla ...

c#cssasp.netbootstrap-4checkboxlist

Why does it seem like only one div is being added?

I am facing an issue with dynamically appending multiple div elements. Despite my efforts, only one div element is showing up on the browser when I try to test the code. I have searched for similar problems but could not find any solutions. Any assistanc ...

javascriptjqueryhtmlcss

When utilizing a JQuery .animate function to transition a div from 0px to 450px in height, an unintended margin is produced during the process

I have been attempting to implement a collapsible footer using JQuery. While I have successfully integrated all the animation functions, there seems to be an issue with the animate function affecting the div (id=draw) by creating an unseen margin beneath i ...

jquerycssjquery-animate

Utilizing JQuery to ensure that rows have consistent height in two dynamically generated tables

To meet my specific requirements, I am tasked with creating two separate tables that will contain the same number of rows but different data. The first table will display Item Information, while the second table will provide consolidated information about ...

htmljquerycssdatatables

Modify the main container width based on the size of the table

Would it be possible for the main container width to increase along with the table width? Is that achievable? <div class="container main-con"> <table class="table table-hover"> <tr><td></td></tr> </table> ...

javascriptcsshtmltwitter-bootstrap

Utilize the full width available to create a flexible div element without any fixed sizes

I have come across similar questions, but none of them quite addressed my specific situation. My dilemma involves a tabbed navigation that can vary in size depending on the number of tabs added to it. Adjacent to the navigation, there is a second area hous ...

jquerycss

Is there a way to position these divs in a line using inline-block?

I need help aligning two divs with text differently - one to the top left and the other centered but not on the same line. Here's the layout I'm aiming for: ---------------------------------------------- |Backstage |Issue 4 | | ...

htmlcss

Tips for resolving the issue of CSS blocks disappearing when designing a webpage

When creating a responsive web page, the child block "overflows" from the parent block. This causes the entire page to shift to the left and an empty bar appears on the right side, moving all the content. I need to ensure that all content is positioned cor ...

cssbootstrap-4frontend

Creating a balanced layout for text of varying lengths in a fluidRow within an R Shiny application

As I work on developing a Shiny app, I am encountering an issue with displaying text blocks. These blocks vary in length, and my goal is to color each block while also creating some spacing between them. The challenge I face is that due to the varying tex ...

cssrlayoutshinyshinydashboard

Switch over to using a for loop

I have a query regarding implementing multiple toggles within a for loop. For instance, I want a toggle menu to appear when clicking on a div. Here is the code snippet: for (var i = 0; i < myObjectString.length; i++) { var obj = JSON.parse(myObjectStr ...

javascriptjqueryhtmlcssjson

A layout featuring a grid of 3 rows and 2 columns, each containing 6

Is there a more effective method to construct this 3x2 "table" using DIVS? I'm considering using traditional tables code <table> since it's simpler, but modern practice leans towards Divs. So, what is the most polished approach to achiev ...

htmlcssgrid-layout

CSS for when the mouse hovers over an element

Two php files and a js file are involved in this scenario. The issue at hand is that when the div is clicked, it navigates to a new page with an appended # to the URL, causing it to scroll to the specified comment ID. However, instead of scrolling to the c ...

javascriptphpcsscursor

Activate a Dropdown Menu by Clicking in a React Application

I have a collapsible feature where you can click to expand or collapse a dropdown. Currently, the dropdown can only be clicked on where the radio button is located. I want the entire area to be clickable so that users can choose the dropdown by clicking an ...

javascripthtmlcssreactjsmaterial-ui

Using an image as the background for a three.js scene may cause it to appear distorted

I am struggling with setting an image as a background for my scene without it becoming blurry. I have attempted to use the following code: textureLoader.load("images/background/space.png", function(t) { scene.background = t; }); The problem arises when ...

javascriptcssthree.js

The mysterious case of the missing CSS file in Node.js

I recently set up a new Node.js Express Project. However, I am facing an issue with the index.ejs file showing the error: Undefined CSS file ('/stylesheets/style.css'). Here is the content of the index.ejs file: <!DOCTYPE html> <html& ...

javascripthtmlcssnode.jseclipse

Iterating through styles in a selector's attribute

I am creating a site map layout. Looking for a solution similar to this: ul.site-map li[data-level="1"] { margin-left: 50px; } ul.site-map li[data-level="2"] { margin-left: 100px; } ul.site-map li[data-level="3"] { margin-left: 150px; } This code ...

cssstylus