Increasing the height of nested Bootstrap columns by stretching them out

I am trying to ensure that the first two columns in both the green and violet rows always have the same height. I initially thought of using d-flex align-items-stretch, but it seems like it is not working because those elements are not within the same row or parent element.

<div class="container">
  <div class="row" style="background-color:yellow;">
    <div class="col-6">
      <div class="row">
        <div class="col-12  d-flex align-items-stretch" style="background-color:green;">A1</div>
        <div class="col-12" style="background-color:blue;">A2</div>
        <div class="col-12" style="background-color:red;">A3</div>
      </div>
    </div>
    <div class="col-6">
      <div class="row">
        <div class="col-12  d-flex align-items-stretch" style="background-color:violet;">B1</div>
        <div class="col-12" style="background-color:orange;">B2</div>
        <div class="col-12" style="background-color:gray;">B3</div>
      </div>
    </div>
  </div>
</div>

I have been struggling with this for some time now, and I might be missing something obvious. Can someone explain why align-items-stretch is not working and possibly assist me with a solution?

Check out the full demo here: https://jsfiddle.net/2gz7bmrf/1/

htmlcssbootstrap-5

Answer №1

To ensure proper alignment, both align divs must be placed within the same parent container.

<div class="container">
      <div class="row">
        <div class="col-6 d-flex align-items-center" style="background:grey;">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dapibus tortor quis erat convallis condimentum...
        </div>

        <div class="col-6 d-flex align-items-center" style="background:grey;">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dapibus tortor quis erat convallis condimentum...
        </div>
      </div>
    </div>

    <div class="container">
      <div class="row" style="background-color:yellow;">
        <div class="col-6">
          <div class="row">
            <div class="col-12 d-flex align-items-stretch" style="background-color:green;">
              More Lorem Ipsum content...
            </div>
            <div class="col-12" style="background-color:blue;">
              Additional Lorem Ipsum content...
            </div>
            <div class="col-12" style="background-color:red;">
              More Lorem Ipsum content...
            </div>
          </div>
        </div>
        <div class="col-6">
          <div class="row">
            <div class="col-12 d-flex align-items-stretch" style="background-color:violet;">
              Continuation of Lorem Ipsum content...
            </div>
            <div class="col-12" style="background-color:orange;">
              Additional Lorem Ipsum content...
            </div>
            <div class="col-12" style="background-color:gray;">
              Generated Lorem Ipsum statistics...

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

Answer №2

It seems like restructuring my code and utilizing order-md-n is the best way forward.

<div class="container">
  <div class="row" style="background-color:yellow;">
    <div class="col-12 col-md-6 order-md-1 d-flex align-items-stretch" style="background-color:green;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus malesuada quam vulputate ex interdum accumsan. Quisque sed vulputate augue. Proin dolor arcu, rutrum vel facilisis vel, dapibus nec elit. Proin tempor pellentesque eros, eu gravida metus ullamcorper eget. Quisque eget bibendum risus, at efficitur sem. Etiam dictum dolor ligula, et condimentum urna gravida nec. Phasellus pharetra vestibulum massa, sed venenatis erat efficitur et. Mauris ultrices hendrerit elementum. Morbi ut sodales purus.

</div>
    <div class="col-12 col-md-6 order-md-3" style="background-color:blue;">A2</div>
    <div class="col-12 col-md-6 order-md-5" style="background-color:red;">A3</div>
    <div class="col-12 col-md-6 order-md-2 d-flex align-items-stretch" style="background-color:violet;">Praesent ultrices, turpis vitae mollis pulvinar, risus sem convallis velit, nec imperdiet libero est eu ipsum. Fusce eros velit, pellentesque non viverra eget, pharetra eget purus. Etiam ultrices convallis odio nec consectetur. Fusce eleifend tortor at ex convallis, a accumsan lorem bibendum. Vivamus efficitur magna eget felis imperdiet maximus. Morbi rhoncus vehicula pellentesque. Quisque ac orci augue. Suspendisse at rutrum elit, volutpat rhoncus libero. Pellentesque lorem purus, tincidunt pharetra ante id, aliquet pulvinar lacus. Curabitur semper non dolor finibus cursus.

</div>
    <div class="col-12 col-md-6 order-md-4" style="background-color:orange;">B2</div>
    <div class="col-12 col-md-6 order-md-5" style="background-color:gray;">B3</div>
  </div>
</div>

https://jsfiddle.net/myepfo52/

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

What could be causing the issue with my code where the canvas is not showing boxes beyond a y-coordinate of 8 along the x-axis?

I've been working on creating a 64 square checkerboard using the html canvas element in javascript, but I'm encountering an issue. The boxes aren't rendering properly after the first 8 squares on the y-axis, and I can't figure out where ...

javascripthtmlcanvas

An HTML document may display a segment of a URL

Is there a way to display part of a URL in an HTML document, so that if the URL changes, the corresponding content in the body also updates? For instance, www.example.com/?key=i - Is it possible for this link to be dynamically displayed within the body o ...

javascripthtml

Adjust the position of the element by lifting it slightly

I am looking to adjust the positioning of the number "01 / 04" to match the layout shown in this image: https://i.sstatic.net/3MNA5.png Here is what I have accomplished so far: https://i.sstatic.net/6ayOx.jpg This is how the code structure looks like i ...

cssvue.jssass

CSS: incorrect text alignment

I'm encountering an error with text-align. I want my text aligned to the left, but it's starting from the center. I've tried to fix it without success. Can someone please review and correct my code? CSS .text { width: 100%; height: ...

htmlcss

CSS transition effect to show content: display: block

After experimenting with different styles for another element, I added padding, height, and opacity to the div. However, there seems to be no transition effect with the current CSS code. Can anyone explain why? When a button is clicked, the class .show is ...

jqueryhtmlcss

How come the hidden container does not reappear after I click on it?

I'm having an issue with a hidden container that holds comments. Inside the container, there is a <div> element with a <p> tag that says "Show all comments". When I click on this element, it successfully displays the comments. However, cli ...

javascriptjqueryhtmlcss

Implementing a dynamic navigation bar that expands and collapses on mouse hover in a React application

I have a side navigation bar on my webpage that I obtained from a React Bootstrap website, so the class names are already pre-loaded. Instead of using a toggle hamburger icon to expand or collapse the navigation, I want to achieve this functionality based ...

javascripthtmlcssreactjs

jQuery template does not respond to input text when a click event is enabled on an iPhone device

Below is a jQuery template I have: <div class="parent-class"> <div class="sub-class"> <div clas="sub-input-class"> <input type="text" /> </div> </div> </div> Recently, I ...

javascriptjqueryhtmliphonejquery-templates

using `clear: both` does not stop text from wrapping

Currently, I am facing an issue with positioning 3 divs in my layout. Two of the divs are floating to the left and right respectively, while the third one should be placed under the two others. I tried using clear: both but it doesn't seem to work as ...

htmlcsscss-float

Defeat the all-powerful !important tag and enable dialog customization for positioning

I am currently developing a browser extension and I am encountering an issue with using JQueryUI to display a modal dialog. The problem arises when certain websites, for example espn.com, also utilize JQueryUI but do not properly scope their own elements. ...

javascriptjquerycssjquery-ui

Error: JSDOM - The document variable has not been declared

After creating a basic webpage that displays a single message, I decided to experiment with JSDOM and encountered an error. Despite researching online examples and Stack Overflow questions, I have struggled to resolve even the most straightforward scenario ...

javascripthtmljsondomjsdom

No visible changes from the CSS code

As I create a small HTML game for school, I'm facing an issue with styling using CSS. Despite my efforts to code while using a screen reader due to being blind, the styling of an element isn't being read out as expected. The content seems to be c ...

javascripthtmlcssng-animatescreen-readers

What is the way to retrieve an array property in a typescript interface?

Imagine a scenario with three interfaces structured as follows: registration-pivot.ts export interface RegistrationPivot { THead: RegistrationPivotRow; TBody: RegistrationPivotRow[]; } registration-pivot-row.ts export interface RegistrationPivotR ...

javascripthtmlcssangulartypescript

Ways to execute a function when a button is clicked with a shared variable?

When creating buttons in HTML to control video speed, I encountered a strange issue. After successfully implementing the buttons for one video, they only worked on a second video and had no impact on the first one. Deleting the second video seemed to resol ...

javascripthtmljquery

Unable to apply a dotted border to a horizontal rule when a Bootstrap 5 link is present

As I strive to add a dotted border-style to the horizontal rule on my website, an interesting challenge arises when the Bootstrap-5 CDN is included. The border-style does not take effect as expected. Even on Codeply, the border-style works perfectly until ...

htmlcsswebbootstrap-5

Simple method to restrict duration of video uploads using HTML5's capture attribute

I'm working on a website that allows users to take photos and videos with their smartphones. Everything is running smoothly with HTML5 and some javascript, but I want to set a maximum time limit for the videos without requiring users to start recordin ...

htmlvideolimitcapture

Is there an alternative solution to resolving this issue with OTP verification?

Working on a verification system where users are redirected to verify their account with an OTP code after signing up. However, I encountered an issue where the code doesn't seem to work as expected and no error messages are being displayed. <?php ...

phphtml

Step-by-step guide on utilizing jQuery to fade out all elements except the one that is selected

There are multiple li elements created in this way: echo '<ul>'; foreach ($test as $value){ echo '<li class="li_class">.$value['name'].</li>'; } echo '</ul>'; This code will generate the fol ...

jquerycssfade

Possible conflict between CSS and JavaScript on Magento website

Problem Description: Visit this link for more details I am facing an issue with the product upload process when using certain attributes. It appears to be related to a positioning problem. Despite trying various solutions, such as removing the position at ...

javascriptjquerycssmagento

Fluid percentage-based layout

I have four separate Divs that I would like to position on my page in a specific layout. Here is an image showing how I want them positioned: https://i.sstatic.net/KBZ1U.png In the future, I plan to add multiple svg files to Div 4 and I want it to be scro ...

htmlcss