When the screen size changes, the Bootstrap 4 h-100 column does not stack correctly

I've encountered an issue with Bootstrap 4 while utilizing the h-50 and h-100 helper classes along with rows incorporating columns of different breakpoints.

Consider the following scenario :

<style>
    html,body {
        height: 100%;
    }

    .red{
        background-color: red;
    }

    .green{
        background-color: green;
    }

    .blue{
        background-color: blue;
    }

    .purple{
        background-color: purple;
    }

</style>

xs
<section class="h-50 container-fluid">
    <div class="row h-100 header_content_row purple">
        <div class="col-4 h-100 red">
            foo
        </div>
        <div class="col-4 h-100 green">
            bar
        </div>
        <div class="col-4 h-100 blue">
            whiz
        </div>
    </div>
</section>

sm
<section class="h-50 container-fluid">
    <div class="row h-100 header_content_row purple">
        <div class="col-sm-4 h-100 red">
            foo
        </div>
        <div class="col-sm-4 h-100 green">
            bar
        </div>
        <div class="col-sm-4 h-100 blue">
            whiz
        </div>
    </div>
</section>

md
<section class="h-50 container-fluid">
    <div class="row h-100 header_content_row purple">
        <div class="col-md-4 h-100 red">whiz
        </div>
        <div class="col-md-4 h-100 green">bar
        </div>
        <div class="col-md-4 h-100 blue">foo
        </div>
    </div>
</section>

It's worth noting that on a full-screen computer display, the rows and columns appear correctly with full height. However, resizing the screen to a smaller size causes the second section to partially disappear behind the third.

Could this be a bug? How can this issue be resolved?

Edit: This demo by isherwood demonstrates the problem. Thanks

Answer №1

To fix the issue, simply remove the h-100 class from the inner columns.

https://www.example.com/code/C32tIprxQr

<section class="h-50 container-fluid">
  <div class="row h-100 header_content_row purple">
    <div class="col-4 red">
      foo
    </div>
    <div class="col-4 green">
      bar
    </div>
    <div class="col-4 blue">
      whiz
    </div>
  </div>
</section>

sm
<section class="h-50 container-fluid">
  <div class="row h-100 header_content_row purple">
    <div class="col-sm-4 red">
      foo
    </div>
    <div class="col-sm-4 green">
      bar
    </div>
    <div class="col-sm-4 blue">
      whiz
    </div>
  </div>
</section>

md
<section class="h-50 container-fluid">
  <div class="row h-100 header_content_row purple">
    <div class="col-md-4 red">
      whiz
    </div>
    <div class="col-md-4 green">
      bar
    </div>
    <div class="col-md-4 blue">
      foo
    </div>
  </div>
</section>

The Bootstrap 4 row utilizes display:flex, allowing the columns to automatically adjust in height. For further clarification on percentage heights, refer to this answer.

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

Arranging items to be flush at the base of several columns

I need help with positioning buttons at the bottom of three columns of text. I want them to be aligned vertically on the page when the columns are side-by-side, and then placed after each column when viewed in a single-column layout on small screens. The c ...

Using JavaScript to adjust the width of the table header

I have a table that I need to adjust the width of using JavaScript or jQuery. <div class="dataTables_scrollHeadInner" > <table class="table table-condensed table-bordered table-striped dataTable no-footer" > <thead ...

Import the JSON data into the designated storage unit

$(".btn-primary").click(function(){ runSuccessFunction(jsonObj); }); If I need to update the JSON data in the JSFiddle Code example, how can I reload only the container by clicking a button? I want to run the code every time I make a change to the J ...

What are the best tools to develop a browser-based 2D top-down soccer simulation?

I'm looking to create a 2D top-down soccer simulation game for web browsers using modern technologies and without the need for additional plugins like Flash or Silverlight, making it compatible with mobile devices as well. The game will be AI-controll ...

Is there a proper method for populating an HTML text with values from a form?

As a newcomer, I could really use some guidance here :) I'm trying to populate text with various words, numbers, and calculation results from a form. This is my initial attempt for just one field/word, and it appears to be functioning correctly. Do y ...

Incorporating a picture backdrop into a button element in a React Typescript component

I am working on a React project with TypeScript and using a Material UI library. I am trying to set a background image for a button, but when I use src or imageURL, it gives me a TypeScript error. The CSS style also does not show the picture. Here is my ...

Looking to achieve a stretch-auto-auto column layout in Bootstrap 4 - how can this be done?

Essentially, I am looking for something similar to this: https://i.sstatic.net/ss3Ir.png Can this layout be achieved using columns instead of floats? <div class="clearfix"> <div class="float-left"><button class="rounded btn btn-outline ...

The Safari browser appears to be disregarding the positioning and size of input checkboxes, and also slightly shifting them after they are

After searching everywhere online, I still can't find a solution to this particular issue. I have a parent div that centers all elements, but for some reason the checkbox won't center in Safari. I've tried adjusting it using various methods ...

How can the selected value be shown in the dropdown menu after moving to a different webpage in HTML?

My application features 4 roles displayed in a dropdown menu. When a specific role is clicked, it should go to the corresponding href link that was specified. However, I encountered an issue where after navigating to the second HTML page, the selected rol ...

Can I use JavaScript to generate an element similar to <ion-icon name="heart"></ion-icon>?

Currently, I am utilizing a website called to incorporate icons into my buttons. It is quite straightforward with HTML when introducing a new element containing the icon. All you need to do is define a button and insert this code within it: ion-icon name= ...

How to align radio_button_tag and label_tag side by side in Rails using Twitter Bootstrap 2?

Struggling to align the radio_button_tag horizontally with its label_tag. (Utilizing HAML) =radio_button_tag(:animal, "dog") =label_tag(:animal, "Dog") Which classes should I use for these form helpers to have them positioned side by side as shown below: ...

AngularJS - Unchecked radio button issue

Within my code, there is an ng-repeat including several radio buttons: <div class="panel panel-default" ng-repeat="item in vm.itemList"> ... <td ng-show="item.edit"> <div class="row"> ...

Similar to the :has() in jQuery, the equivalent in CSS

Consider the code snippet below: <div class="section"> <div class="row">...</div> <div class="row"> <!-- bottom margin here needs to be 0 --> <div class="section"> &l ...

Attaching a click event to an input field

Seeking to serve html files from the server without relying on template engines. Below is the script used to start the server. // script.js const express = require("express"); const bodyParser = require("body-parser"); const app = express(); app.use(expr ...

Ways to incorporate a while loop into a randomizing function

I've been diving into JavaScript and managed to create a website that displays random gifs when clicked from an array. Now, my goal is to implement a while loop to prevent duplicate images from being shown consecutively. However, I seem to be facing ...

What could be the reason my Bootstrap 5 dropdown menu is not functioning correctly?

As of late, I've delved into web development and have been utilizing Bootstrap v5.0 for creating a website. The code below is from a file named "grage.php": <!-- HERE SHOULD BE THE CODE OF GARAGE --> <div class="container-fluid" ...

Using JQuery to visually enhance the menu selection by displaying an image and altering the background color upon hovering

Hello fellow JQuery/Javascript beginners! I recently put together a menu and wanted to add some interactive elements. Specifically, I want the background color to change when a user hovers over an item (simple enough with CSS), but I also want to include a ...

Using HTML nested lists in Wordpress sites

Working on nested, ordered lists using ol types and encountering an issue where the code appears correctly in Wordpress preview but displays incorrectly in Firefox and IE. The lists are showing as numbered instead of the specified types in the code provide ...

The vertical alignment of the button text with SVG is not properly aligned

I'm facing a challenge in vertically centering text in a button while also using SVG. The text is centered properly when the SVG is removed. How can I maintain the SVG size and still achieve vertical text centering? https://i.sstatic.net/PJRtR.png ...

Everything seems to be functioning properly on the local server, but once the media files or players (mp3 and mp4) are uploaded, the background fails to work entirely

function playMusic() { var songs = [ "pump.mp3", "ybwm.mp3", "bb.mp3", ]; var randomIndex = Math.floor(Math.random() * songs.length); var selectedSong = songs[randomIndex]; var audio = new Audio(selecte ...