Bootstrap 4 does not have uniform row sizes

I'm currently utilizing Bootstrap 4 and attempting to achieve equal height columns, a feature I believed Bootstrap handled automatically.

Below is my current code:

<div class="row">
  <div class="col-md-4">
    <div class="table-heading">
        Lorem ipsum dolor sit amet
    </div>
    <div class="table-text">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
    </div>
  </div>
  <div class="col-md-4">
    <div class="table-heading">
        Lorem ipsum dolor sit amet, consectetur adipiscing
    </div>
    <div class="table-text">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore Lorem ipsum dolor sit amet, consectetur
    </div>
  </div>
  <div class="col-md-4">
    <div class="table-heading">
        Lorem ipsum dolor
    </div>
    <div class="table-text">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
    </div>
  </div>

</div>

The output looks like this:

https://i.sstatic.net/z6uSQ.png

I am aiming for the violet headings to be aligned with each other, along with the columns themselves.

Here are the CSS styles I have implemented:

.table-heading {
    text-align: center;
    font-weight: bold;
    vertical-align: middle;
    color:white;
    background-color: #7b2265;
    padding:10px;
}

.table-text {
    padding:10px;
    background-color: white !important;
}

Feel free to view the Pen here: https://codepen.io/anon/pen/ZxeLpO

csstwitter-bootstrapbootstrap-4

Answer №1

Update:

To ensure that both the titles and body text parts have the same height and remain responsive, a combination of re-ordering classes along with the h-100 class can be utilized for the desired outcome:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    
<style>
    .table-heading {
        text-align: center;
        font-weight: bold;
        vertical-align: middle;
        color:white;
        background-color: #7b2265;
        padding:10px;
    }
</style>

<div class="container bg-light p-3">
  <div class="row">
      <div class="col-md-4">
          <div class="table-heading h-100">
              Title1 Lorem ipsum dolor sit amet
          </div>
      </div>
      <div class="col-md-4 order-md-1">
          <div class="bg-white h-100 px-3">
              Body1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
          </div>
      </div>
      
      <div class="col-md-4">
          <div class="table-heading h-100">
              Title2 Long, long, veeery long! Lorem ipsum dolor sit amet
          </div>
      </div>
      <div class="col-md-4 order-md-2">
          <div class="bg-white h-100 px-3">
              Body2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore. Body2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore. 
          </div>
      </div>
      
      <div class="col-md-4">
          <div class="table-heading h-100">
              Title3 Short Lorem
          </div>
      </div>
      <div class="col-md-4 order-md-3">
          <div class="bg-white h-100 px-3">
              Body3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
          </div>
      </div>
      
  </div>
</div>

The use of classes like order-md-1 applies changes on medium-sized screens and above. On smaller screens, the columns maintain their original order from the HTML structure without any re-arrangements.

Answer №2

To achieve the desired behavior, simply include the class h-100 along with col-md-4 on the div elements.

The h-100 class in Bootstrap 4 is used to set the height of an element to 100%, ensuring that all columns within a row have equal heights.

<div class="col-md-4 h-100">
    ...
</div>

Additionally, you can add height: 100% to the css class .table-text to occupy any remaining space.

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

Leveraging calc() in Material UI

Goal: The aim is to design two divs positioned side by side on a webpage, covering the entire width of the page. This should be achieved using the latest versions of react + Material UI. The div on the left should have a fixed width of 200px. While the ...

cssreactjsmaterial-ui

Concealing a division at the conclusion of a <section>

Is there a way to toggle the visibility of a div based on scrolling? When reaching section 2; The 'banner' div should appear at the start of section 2 and disappear when section 2 ends. But how can I determine when section 2 is finished in this c ...

javascripthtmljquerycss

Creating a Dual Linear Gradient Background with Tailwind: Step-by-Step Guide

Can you use two linear backgrounds on a single element in Tailwind CSS? I found this CSS code that seems to achieve it: background-image: linear-gradient(to right, #f8fafb 50%, #161616 50%), linear-gradient(to right, #161616 50%, #f8fafb 50%); I att ...

cssbackgroundbackground-imagetailwind-csslinear-gradients

Adjusting the input label to be aligned inside the input box and positioned to the right side

I am currently working on aligning my input label inside the input box and positioning it to float right. The input boxes I am using have been extended from b4. Currently, this is how it appears (see arrow for desired alignment): https://i.stack.imgur.co ...

htmlcssvue.js

Issue with Django 1.9 admin interface not displaying CSS formatting

I am currently learning django and following the tutorial. Everything is going smoothly, but I keep encountering an issue where my admin site loses its CSS styling and ends up looking like this: https://i.sstatic.net/YTXET.png This seems to be a common pr ...

cssdjango

Tips for stopping the web page from moving due to scrollbar placement?

On my website, I have DIVs that are center-aligned. However, some pages require scrolling while others don't. Whenever I switch between these two types of pages, the appearance of a scrollbar causes the page to move slightly to the side. Is there a wa ...

htmlcss

Align an element in the middle next to its sibling element

Utilizing the pagination component in Bootstrap, the structure of the pagination itself is quite straightforward: <ul class="pagination"> <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo; ...

htmlcss

What is the best way to arrange a bootstrap .container?

I've been struggling to position a content DIV on a bootstrap carousel, but so far I haven't been successful in figuring it out. Below is a screenshot of the current output from my code, which is not what I am aiming for. What I'm trying t ...

htmlcsstwitter-bootstrapcss-position

Align an image in the middle of the page

I have created a website showcasing images in a gallery. Currently, the images are aligned to the top and I would like them to be centered within the DIV. Below is the code I am using: .carousel .item { height: 900px; background-color: #777; } .carou ...

cssimagecss-positioncentervertical-alignment

How to make a range slider using HTML

I am currently working with a range slider that displays only one value, but I want to show two limits - the minimum and maximum values. This is similar to a price range slider where users can select a range of prices. I need to store both the min and max ...

javascriptjqueryhtmlcss

Adjust both scrollLeft and scrollTop at the same time

Is there a way to adjust both scrollLeft and scrollTop of a div at the same time? It seems to work in Chrome, Safari, and Opera when set sequentially, but Firefox (older than 4) and IE (even in IE9!) experience glitches where the page moves left and then d ...

javascripthtmlcss

"The issue with the addClass function not properly executing within an if

I am trying to make a feature where the class changes based on my selection. The issue I am facing is that when I change it for the first time, it switches from being classified as "black" to "colored". However, upon changing it back, it remains labeled as ...

jquerycss

Unable to locate href within form when button is clicked

Whenever I try to click the borrow button, it directs me back to itself instead of executing the borrowing.php action. Can anyone suggest a solution for this issue? <form id = "myform" action="includes/borrowing.php" method = "POST" enctype ="multipart ...

phphtmlmysqlformsbootstrap-4

What is the connection between border radius and box shadow?

Take a look at this CSS code snippet: div { background: rgba(0,0,0,.05); width: 200px; height: 200px; padding: 50px; } div > div { background: rgba(0,0,0,.2); width: 200px; height: 200px; border-radius: 5px; padding: 0; box-shadow: ...

cssgoogle-chrome

Designing a webpage with CSS to include an offset

I've been struggling to adjust this HTML by 300 pixels vertically and horizontally, without any luck. If you have any resources or tips on how to achieve this, I would greatly appreciate it. I already have three frames in place, and I'm attemptin ...

htmlcssframeoffset

Tips for aligning sections of a navigation bar in different directions: left and right

I'm attempting to float a logo to the left side of a nav bar and have the text float to the right of the nav bar using Bootstrap. I've tried adding float and text align classes to outer divs and specific elements but haven't had success yet. ...

htmlbootstrap-4

Is there a way to customize the look of the close button on a Bootstrap 5 search box?

I am currently in the process of designing a blog template using Bootstrap 5. While working on creating the search box, I encountered a minor issue. The code snippet below has provided me with a small close button: .input-group-append .btn { border-bot ...

csstwitter-bootstrapbootstrap-5

The CSS dropdown navigation bar designed for mobile devices functions properly, however, it is not visible on iPhones

After building this website from scratch using only HTML and CSS, I encountered an issue with the dropdown menu not appearing on iPhones. Despite testing it extensively across different browsers and devices, the problem persists on Apple products. While i ...

htmlcss

What is the best way to alter the background-color of an element that is contained within a GatsbyJS component, depending on the specific page where the component is being utilized?

As a first-time GatsbyJS website builder, I am working on creating reusable components for my site. One of these components is the footer, and I have already structured it. Now, I have a dilemma - I want to change the color of a specific <div> within ...

javascripthtmlcssreactjsgatsby

Attempting to align navigation bar in the middle of the page

I'm facing some issues with centering the navigation bar on my website. I attempted to use a wrapper div to center it, but unfortunately, it didn't work out as expected. The only thing that seems to be working within that div is adjusting the lef ...

htmlcssnavigationcenter