Troubleshoot: Why Equal Height Columns in Bootstrap 4 are not functioning

My design includes two columns placed side by side, each containing different content. I assumed this was a default feature in Bootstrap 4 or at least in one of its alpha versions.

I have attempted the following:

.equal {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
}
.equal > [class*='col-'] {
    display: flex;
    flex-direction: column;
}

I added this code to my CSS file.

Here is how my HTML structure looks:

<div class="row equal">
    <div class="col-md-8"></div>
    <div class="col-md-4"></div>
</div>

However, this code does not seem to have any impact.

Upon further inspection, it appears that the issue lies with the content inside the columns, as it does not occupy 100% of the parent's height.

When I set the height to 100%, it strangely becomes 100vh instead of matching the column's height.

In this CodePen example (link provided), I have nested divs inside the columns, but I require these divs to fill 100% of their parent column.

Here is an image (link provided) displaying the current layout of the row and columns, where the border represents the inner div of the column.

I aim to ensure that if there is more content in the left column, the right column automatically adjusts its height accordingly. Similarly, if the right column is taller, the left column should match its height.

Answer №1

To center a div element both vertically and horizontally, you can utilize CSS position absolute in conjunction with the transform and translate properties.

.centered-div {
 top: 50%;
 position: absolute;
 left: 50%;
 transform: translate(-50%, -50%);
}

By implementing this code, your inner div will be perfectly centered both horizontally and vertically on the page.

Answer №2

I have made some updates to the code on my codepen. Please take a look here

.equal div div {
  border: 1px solid green;
  height: 100%;
  display: flex;
  flex: 1;
}

.equal>[class*='col-'] {
  display: flex;
  flex-direction: column;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />

<div class="row equal">
  <div class="col-md-8">
    <div>
      <p style="background-color:pink;">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quis quibusdam nobis praesentium hic vero quo quia error sed commodi cumque, illo porro eaque ad ipsa. Error maxime consequatur officiis alias fuga mollitia quas, magnam delectus necessitatibus
        illum, quos aperiam doloremque eaque explicabo architecto dolor? Placeat quos nemo natus velit aliquam?</p>
    </div>
  </div>
  <div class="col-md-4">
    <div>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci blanditiis commodi sapiente totam sequi consectetur provident. Voluptatibus corrupti odit reiciendis, aliquid temporibus dolores tempore optio delectus nesciunt ipsam veritatis quisquam
        facilis voluptatem voluptates inventore aliquam, praesentium, assumenda ducimus ratione quasi nisi sunt consequatur corporis soluta. Deleniti quam harum soluta alias minima voluptas iusto voluptates, iure necessitatibus assumenda ex. Minus numquam
        beatae vero aperiam cupiditate assumenda ipsam hic ad corporis placeat facere consequuntur consectetur sint, aspernatur mollitia optio odit eos officia nostrum? Totam asperiores quia sequi autem. Ex nostrum fuga, et, illo iusto inventore officiis
        facere minima hic sint obcaecati consectetur.</p>
    </div>
  </div>
</div>

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

Regular expressions in Python do not function properly on text data

In my HTML file, I am using lxml and BeautifulSoup to convert it to text. However, I am encountering a problem with ill-formed HTML that I want to remove. I attempted to use a regular expression to match the problematic string, but it did not work as expec ...

What is the solution to determining the width in AngularJS without taking the scrollbar size into account

How can I retrieve the window inner height without including the scrollbar size when using $window.innerHeight? ...

Unexpected display issues with CSS shapes in Bootstrap framework

Been experimenting with creating custom shapes in Bootstrap - they display correctly in HTML and CSS, but Bootstrap distorts them. It seems like there are no conflicting classes. Could it be necessary to use '!important' on some of the elements? ...

What is the best way to prevent the collapse v-b-toggle event from being triggered by an

I am currently using a v-b-toggle to toggle another div on and off. However, within the div where the v-b-toggle is located, there is an input checkbox. The issue that I am facing is that when I click on this checkbox, the toggle functionality is activa ...

Adjust the width of the unordered list to match the width of its widest child element

I'm encountering a minor issue with displaying a ul element as I am just starting to learn CSS. My goal is to set the width of my ul to match the widest listitem it contains. Below is the HTML code I have used: <div id="sidebar"> <ul i ...

Is there a way to align these side by side?

Is it a silly question? Perhaps. But I can't seem to figure out how to align my text and colorpicker on the same line instead of two. Take a look at my fiddle. I've tried removing display:block and clear:both, but that didn't do the trick. H ...

custom gradient generator for jquery and css3

Is there a jQuery CSS3 plugin available that can handle cross-browser gradients? I've noticed that most gradient plugins out there involve creating multiple elements. Thank you. Edit: I apologize for any confusion - I'm not attempting to force ...

How can I incorporate a counter into my ng-repeat loop in Angular?

Do you know where I can find documentation on adding a numbered count to each item returned by an ng-repeat in Angular? This is not like assigning an Id, but more like, if 4 items are returned, each JSON object could include a number before the data. Her ...

How can I align the text in a dropdown menu to the center on Safari?

How can I center the option text in a drop down menu using CSS? display: block; height: 60px; margin-left: 10%; margin-right: 10%; margin-top: 10px; min-height: 60px; text-align: center; The option text is centered in Firefox browser, but not in Safari. ...

Customizing SVGs for Ion Icons Version 5 in a React Application

I have been using ion icons in React by importing them directly into my index.html. While this method has been working well with the icons from ion icons found here, I know that you can also use custom SVGs by specifying an src attribute in the ion-icon ta ...

Navigational Scroll Parallax Issues

I have been trying to implement a basic 2 layer parallax effect using ScrollMagic on my index page. The layout consists of a large image with content below it, but I am facing some challenges. Despite going through the documentation and source code multipl ...

Styling Iframe Borders with HTML and CSS: A Guide to Custom

Hello there, I am still learning the ropes of HTML and CSS and I have a question regarding styling a div with CSS to look like a default iframe in Internet Explorer. Despite my efforts and searches on Google, I haven't been able to achieve the desired ...

Tailwind's implementation of CSS Grid allows for the creation of a grid structure where specific cells can be selectively populated

I am currently using Tailwindcss with my Next.js application to showcase multiple images retrieved from a Supabase database in a grid layout. However, I am facing a problem where the images are being displayed in rows instead of columns within the grid whe ...

Modify the width of the progress bar in Bootstrap using AngularJS

I'm new to AngularJS and I'm attempting to dynamically update the width of a progress bar based on changes in my controller. Here is what I currently have: <span id="percentage">$ {{getTotal()}} ({{getPercentage()}}%)</span> <div ...

What is the best approach for testing an HTML element that does not have distinct attributes?

Currently, I am utilizing Coded UI Test to conduct tests on a web application. In my workflow, I rely on a class called Locator to store specific information necessary for CUIT to locate a control. When it comes to interacting with a control, a page objec ...

Achieve a stylish masonry layout using Bootstrap 4

I am looking to achieve a specific layout (refer to the image link below): https://i.sstatic.net/U6xa2.png Main requirements: The blocks should seamlessly "merge" together like in a masonry layout, without any margins in between One block needs to be d ...

Challenges with Hangman in JavaScript

As a beginner in JavaScript, I recently developed a simple hangman-like game. However, I encountered some challenges that I need help with. One issue is related to my lettersGuessed array. Currently, the array displays every time a key is pressed and repea ...

Connecting an image to its corresponding content through hover effect

Can someone please assist me? I am trying to create a hover effect on an image with an "add to cart" link similar to what is shown here: I seem to be having trouble with the code, could you provide some guidance? .hunderter { background: url(http ...

Adjusting the Transparency of the Background in a Pop-Up

I am experiencing an issue with my popup where I want the background to be transparent. However, when I set the opacity in CSS to 0.5 or less, the text also becomes transparent and very dark. How can I achieve a background with 50% opacity while keeping th ...

Radio buttons in 'Block Style' functioning perfectly on all devices except for iPad

I am facing an issue with a group of radio buttons that I have styled to display as block elements, making them look like buttons while hiding the actual radio button itself. This setup works perfectly on Chrome and Firefox on desktops and Android tablets, ...