Ensuring uniform height for child elements in Bootstrap flex containers

Currently, I am in the process of converting an HTML table into Bootstrap flex divs.

I'm facing a challenge regarding maintaining consistent height for logical child elements within containers. Any tips or guidance on how to approach this?

Link to JSFiddle

When attempting to set the .content height to 100%, there seems to be an issue where the next row of elements overflows the first row, resulting in some buggy behavior.

<div class="container">
  <div class="row">
    <div class="col">
      <div class="header">
        <h2>Header</h2>

      </div>
      <div class="content d-flex">
        <div class="text-center w-50">
          <h3>Sub1</h3>
          <p>Iam sub 1.</p>
        </div>
        <div class="text-center w-50">
          <h3>Sub2</h3>
          <p>Iam sub 2.</p>
          <p>Iam sub 2.</p>
        </div>
      </div>

    </div>
    <div class="col">
      <div class="header">
        <h2>Header3</h2>
      </div>
      <div class="text-center content">
          <h3>Sub3</h3>
          <p>Iam sub 3.</p>
      </div>
    </div>
  </div>
<!--end first row -->

  <div class="row">
    <div class="col">
      <div class="header">
        <h2>Header</h2>
      </div>
      <div class="content d-flex">
        <div class="text-center w-50">
          <h3>Sub1</h3>
          <p>Iam sub 1.</p>
        </div>
        <div class="text-center w-50">
          <h3>Sub2</h3>
          <p>Iam sub 2.</p>
        </div>

      </div>

    </div>
    <div class="col">
      <div class="header">
        <h2>Header3</h2>
      </div>
      <div class="text-center content">
          <h3>Sub3</h3>
          <p>Iam sub 3.</p>
          <p>Iam sub 3.</p>
      </div>
    </div>
  </div>
</div>
I hope to achieve uniform height for all elements within each row.
htmlcssbootstrap-4flexbox

Answer №1

To ensure equal heights for your .col elements, you can simply turn them into flexboxes and utilize the flex-grow property for the .content boxes:

.col{
  display: flex;
  flex-flow: column;
}
.col .content{
  flex-grow: 1;
}

Check out the updated code on jsFiddle here: https://jsfiddle.net/qw37tbk9/

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

Gutter spacing in Bootstrap allows for cleaner and more

As a newcomer to bootstrap, I have been delving into the documentation and repeatedly coming across the term "Gutters." Unfortunately, I am struggling to grasp its meaning. Could someone please provide a clear explanation? ...

twitter-bootstrapbootstrap-4

Steps for generating a sophisticated shadow effect using CSS

Currently in the process of revamping a poorly designed website by replacing images with CSS whenever possible, along with other updates. I have encountered a challenging graphic (there are three of these, one for each active tab): https://i.sstatic.net/1 ...

htmlcss

What is the process for utilizing npm/yarn installations within a .Net Framework WebAPI project?

In my project, I utilize SCSS and would like to incorporate Bootstrap.scss in order to create a single class that inherits multiple Bootstrap classes. For instance: .myButtonClass { @col-xs-12; @col-sm-6 } This way, I can replace class="col-xs-12 col-sm- ...

css.netnpmasp.net-web-api2yarnpkg

JavaScript - Using a checkbox to activate or deactivate radio buttons

I am on the brink of success! By default, the buttons are enabled. However, when the checkbox is checked, both radio buttons are enabled; when unchecked, only one is disabled. I need a solution where checking the checkbox enables both radio buttons and un ...

javascripthtmlformscheckboxradio-button

Ways to send messages from embedded HTML to Swift to update boolean values

Hey there, I am looking to update the value of the binding variable 'click' once the onReady block in the HTML is executed. I have managed to communicate from Swift to HTML using evaluate JavaScript. However, I am now trying to figure out how to ...

javascripthtmliosswiftswiftui

The list is not responding correctly to the navbar-right functionality

Although I'm new to bootstrap, I am trying to create a navbar at the top of my webpage. The navbar should feature the brand name on the left and options on the right side. However, when using navbar-right, it does not align properly resulting in a lay ...

htmlcsstwitter-bootstrap

Gathering names by clicking a button to reveal additional names on a webpage

I was presented with an interesting challenge by a coworker earlier, and I must admit that I'm a bit stumped on how to approach it. Essentially, the task involves a website containing a list of names (). My colleague needs to gather all these names ...

javascripthtmlbutton

Automatic Email Reply that Automatically populates the recipient field with the sender's information

I'm curious to know if it's possible to create a mailto link that automatically populates the TO: field with the email of the original sender, without including the email address in the link itself. For instance: "a href="mailto:ORIGINALSENDER? ...

htmlemailmailtounsubscribe

Creating dynamic selection options in an HTML select tag using PHP

When retrieving category and sub-category information from an API json file, the API returns category objects with a "parent" attribute. Main category objects have a parent attribute equal to 0, and sub-category objects have the parent attribute equal to t ...

javascriptphphtmljquerydrop-down-menu

Trouble displaying Bootstrap icons

I am currently working on an AngularJS application with a Bootstrap UI. I have been following a tutorial on YouTube, but I am facing an issue with my icon not displaying correctly. <!DOCTYPE html> <html> <head> <link data-req ...

twitter-bootstrapbootstrap-4

React - The mechanics behind a spinning roulette wheel

I've been attempting to create a React roulette spinner but I've encountered some issues with the transitions and functionality. Here is the initial version of the algorithm: The callback functions are triggered whenever the 'winner&apo ...

javascriptcssreactjsfrontend

Is it possible to make the background of the HTML Embed object transparent instead of grey?

I am currently utilizing Firefox along with an open-source plugin for video playback. The video is adjusted to fit the available space as defined by the width and height of the embed object, but occasionally a slight grey border appears on the right or bot ...

htmlcssfirefoxembedbrowser-plugin

Locate the Element containing specific text, and then navigate up several levels to select a different Element

I am in the process of developing a chrome extension that will remove a specific section from a website. In order to accomplish this, I must locate a <span> element that contains particular text and then identify the encompassing <div> tag. How ...

htmldomxpathgoogle-chrome-extension

What is the best way to ensure that the item beneath two images is always centered in HTML5?

When designing a webpage with text and images, it's important to consider the layout on different screen sizes. To avoid text wrapping under images, adjusting the spacing around the image is sometimes necessary. Similarly, when embedding a video, cen ...

csshtml

Can someone explain how to implement an onclick event for a div element inside an iframe using jquery or javascript?

Understanding the HTML Structure <iframe src="#" scrolling="no" id="gallery-frame"> <div class="gv_filmstrip"> <div class="gv_frame"> <div class="gv_thumbnail current"> <img src="images/grandstand-padang-right/1.jpg"> </d ...

javascriptjqueryhtmliframe

Activate the input autofocus feature when displaying a dialog in Vue.js

When opening a dialog with input text using v-menu upon clicking a button, how can I focus on the input text field? I have attempted to use $ref but it does not seem to work. newFolderClick(){ this.$refs["input_new_folder"].focus(); //it still appea ...

javascripthtmlvue.js

Preventing Overlapping in a Two-Column Grid: Best Practices

I recently created a new layout, however when I resize the browser window, the content in the "right" column spills over into the left column until the breakpoint is reached and Bootstrap starts stacking the items. Is there a way to solve this overflowing ...

twitter-bootstrapbootstrap-4

Is there a way to target the mat-icon element using the icon's name in CSS

I have a group of mat-icons that are automatically generated, meaning I cannot assign them ids or classes. The only way to distinguish between them is by their names: <mat-icon role="img">details</mat-icon> <mat-icon role="img ...

htmlcssangularangular-materialmaterial-ui

Issue with Flexbox Layout - Flipping Card

As a newcomer to web development, my first project is a fan-page dedicated to Metallica. Here's the link to my project on Github. I'm currently facing an issue with the flex-box layout in the "Discography" section of the page. You can view the ...

htmlcssflexbox

Button positioned in the upper right corner

Trying to create a navigation menu like the one shown in the image below. https://i.sstatic.net/N9BQ5.png I've successfully styled the right corner, but I'm struggling to extend the top left corner. https://i.sstatic.net/cL0ZK.png Below is th ...

htmlcss