Creating consistent height for elements in different columns using Bootstrap 5

I'm struggling with keeping the ".item" elements equal height in different columns. Does anyone have a solution for this?

<div class="container">
  <div class="row">
    <div class="col-8">
      <h3>Title</h3>
      <div class="item p-3 border mb-3">
        Content goes here...
      </div>
      <div class="item p-3 border mb-3">
        More content...
      </div>
      <div class="item p-3 border mb-3">
        Additional content...
      </div>
    </div>
    <div class="col-4">
      <h3>Title</h3>
      <div class="item p-3 border mb-3">
        Content goes here...
      </div>
      <div class="item p-3 border mb-3">
        More content...
      </div>
      <div class="item p-3 border mb-3">
        Additional content...
      </div>
    </div>
  </div>
</div>

Looking for some assistance with this issue. Any ideas?

cssflexboxbootstrap-5

Answer №1

Thank you for your response. While your solution appears to be functional, it does present a potential loop issue when implemented in PHP:

<div class="container">
  <div class="row">
    <div class="col-8">
      <h3>Title</h3>
      <?php foreach( 6 items );?>
      <div class="item p-3 border mb-3">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus tempora deleniti aliquam assumenda modi, fugit. Harum, consequuntur, explicabo. Ab accusantium libero fugit nam vero aspernatur aperiam facilis ratione enim consequatur.
      </div>
      <?php endforeach();?>
    </div>
    <div class="col-4">
      <h3>Title</h3>
      <?php foreach( 3 items );?>
      <div class="item p-3 border mb-3">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus tempora deleniti aliquam assumenda modi, fugit. Harum, consequuntur, explicabo. Ab accusantium libero fugit nam vero aspernatur aperiam facilis ratione enim consequatur.
      </div>
      <?php endforeach();?>
    </div>
  </div>
</div>

Considering this potential issue, I believe utilizing JavaScript to ensure equal item distribution would be a more effective approach. However, I am curious if achieving this objective solely through CSS is a viable option.

Answer №2

One possible solution is to approach it in the following way:

<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />

        <!-- Bootstrap CSS -->
        <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e0828f8f949394928190a0d5ced1ced1">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous" />

        <title>Hello, world!</title>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="row">
                        <div class="col-8">
                            <h3>Title</h3>
                        </div>
                        <div class="col-4">
                             <h3>Title</h3>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-8">
                            <div class="item p-3 border h-100">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus tempora deleniti aliquam assumenda modi, fugit. Harum, consequuntur, explicabo. Ab accusantium libero fugit nam vero aspernatur aperiam facilis
                                ratione enim consequatur.
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="item p-3 border h-100">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus tempora deleniti aliquam assumenda modi, fugit. Harum, consequuntur, explicabo. Ab accusantium libero fugit nam vero aspernatur aperiam facilis
                                ratione enim consequatur.
                            </div>
                        </div>
                        
                    </div>
                    <div class="row mb-3">
                        <div class="col-8">
                            <div class="item p-3 border h-100">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus tempora deleniti aliquam assumenda modi, fugit. Harum, consequuntur, explicabo. Ab accusantium libero fugit nam vero aspernatur aperiam facilis
                                ratione enim consequatur.
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="item p-3 border h-100">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus tempora deleniti aliquam assumenda modi, fugit. Harum, consequuntur, explicabo.
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-8">
                            <div class="item p-3 border h-100">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus tempora deleniti aliquam assumenda modi, fugit. Harum, consequuntur, explicabo.
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="item p-3 border h-100">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus tempora deleniti aliquam assumenda modi, fugit. Harum, consequuntur, explicabo. Ab accusantium libero fugit nam vero aspernatur aperiam facilis
                                ratione enim consequatur.
                            </div>
                        </div>
                    </div>
                    
                   
                </div>
            </div>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="07656868737473756677473229362936">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
    </body>
</html>

Another option is to utilize JavaScript to create equal height divs

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

I am experiencing an issue where the repeat-x property on my background image is causing it

Currently, I'm facing an issue with a background image that has the repeat-x property. Oddly enough, it appears to be working properly on Windows OS but not on Mac. Whenever I access the website, there seems to be a significant amount of white space c ...

cssbackground

The dropdown menu in the navigation bar is overlapping with the datatable, creating a transparency effect

Working on a website layout that features a navbar at the top and a datatable below. However, when hovering over the navbar to reveal subitems, I notice a transparency issue where the navbar overlaps with the datatable. Below is a simplified version of my ...

javascripthtmlcssdatatables-1.10

What is the best way to eliminate unexplained spacing at the bottom of a webpage using CSS?

I am struggling to create a basic webpage using Bootstrap and D3, and I can't seem to figure out how to remove the excess whitespace at the bottom. Any tips on how to resolve this issue would be greatly appreciated. I attempted to set the min-height ...

cssd3.jsbootstrap-5whitespace

Why is margin-top behaving unexpectedly?

Greetings! I have a website created using css, html, and php. Take a moment to review this code: <?php session_start(); include_once "mysql_connect.php"; $log = null; if(isset($_SESSION["ID"])){ $log = $_SESSION["ID"]; }e ...

htmlcss

The concept of transparency and visual representation

Is there a way to prevent the opacity of the parent div from affecting the opacity of the img? <div class="parent_div" style="opacity:0.2"> <p>Some text</p> <img class="gif" style="opacity: 1;" src="ht ...

css

Is there a way to adjust the spacing between cards in Bootstrap?

I am attempting to replicate the layout shown in the attached picture. How can I adjust this property? Expected output: I would like the elements to be closer together and centered on the page, but I am struggling to achieve this. I have tried adjusting ...

htmlcssbootstrap-5

What purpose is served by the use of '.src' in Next.js?

When working with Next.js, I encountered a situation where I needed to set a background image. After doing some research, I came across a solution that involved adding .src at the end of the image reference like this: import bgImg from '../public/imag ...

cssreactjsnext.js

Troubleshooting a Dynamic Navigation Bar Problem with jQuery Integration

Having developed a responsive navbar, an issue arises during iPad breakpoints where attempting to close the active navbar by clicking the hamburger icon triggers the jQuery script to also perform .removeClass(".active").slideToggle() on two buttons, causin ...

htmljquerycssresponsive-nav

Utilize a dynamic approach to add the active class to navigation list items

My files all have a header that includes a navigation bar. I am trying to use jQuery to add the 'active' class to the relevant list items (li). The method I initially thought of involved setting a variable on each page, assigning an ID equal to ...

javascriptjqueryhtmlcssnav

Print directly without the need for a preview or dialog box

Is there a way to easily print content with just one click, without having to go through the preview or print dialog box? Here is a snippet of my code: <head> <style type="text/css"> #printable { display: none; } @media print { #non-pr ...

javascriptjqueryhtmlcss

Use multiple lines to create a stunning visualization using morris.js. Let your data

I need help creating a graph using morris.js with 2 lines. I have two sets of data in one array, but I can't seem to display both lines on the graph simultaneously. When I use todos[0], only the first line is visible, and when I use todos[1], only the ...

javascriptphphtmlcssmorris.js

The element selector for the <code> tag is not recognized in SCSS

Update on 2020/02/23: I have made some additions to my project. Apologies for the lack of information provided earlier. The project I am working on is a modified version of the [Gatsby + Netlify CMS Starter][1]. In the process, I swapped out all.sass wit ...

csssass

Unconventional appearance of WordPress Jetpack sharing buttons on unique custom theme

Currently, my wordpress blog has a unique theme and is powered by Jetpack. I've activated Sharing and added various social media sharing services like Facebook, Twitter, Google+, Digg, among others in the "Enabled Settings" section. However, the sha ...

phphtmlcsswordpress

What is the best way to incorporate a sliding effect into my cookie form?

I created a cookie consent form for my website and I'm looking to include a sliding effect when it first appears and when it disappears after the button is clicked. How can I implement this sliding effect into the form? Here's the HTML, CSS, and ...

javascripthtmljquerycss

Disable, Hide, or Remove Specific Options in a Single Dropdown Selection

A challenge I am facing involves creating a form with multiple select options that need to be ranked by the user from 1-8. However, I am encountering some difficulties in hiding, removing, or disabling certain select options. Below is an excerpt from my f ...

javascriptjqueryhtmlcssforms

Trouble with Chrome's CSS making table cell display as block

After searching, I stumbled upon this question that appeared to have the solution I needed. Surprisingly, even when using chrome 32.0.1700.102, the fiddle provided in the first answer worked perfectly for me. However, when I copied the HTML code into a ne ...

htmlcssgoogle-chrome

What measures can be taken to keep the rightmost element from moving when hovered over?

While I am generally happy with the layout, there seems to be a slight jump to the left when hovering over the right-most image (you need to click "show images" to view them). Strangely, this issue does not occur with the last row of images. Any suggestion ...

javascriptjqueryhtmlcss

js The correct value is not being set to the div's style.top

function gamestart(){ var gr; var gr = true; console.log(gr==true); if(gr == true){ console.log("we have activated pointer key detection dear Mr.ketsebaot") document.onkeydown = checkk; } } function checkk(e){ cons ...

javascripthtmlcss

Horizontal scrolling alone is proving to be ineffective

My current HTML code includes a table that is integrated with PHP Laravel. The data is being pulled from Admin.php to populate the table, resulting in it being wider than the screen window. To address this, I added a horizontal scroll bar for navigation pu ...

javascriptphpjqueryhtmlcss

The persistent space between the navbar and the index page remains despite the suggested fixes provided

There appears to be a discrepancy between the navigation bar and the rest of the page. Despite my efforts to adjust margins, I haven't been able to resolve it. The system is prompting me for more details before posting this question, but I'm unsu ...

csstwitter-bootstrap