Solution 1 :

First, you are overrating the power of h-100, then you mixed h-100 with css incorrectly, basically you set on container and row height with h-100 and then in css you defined .left and .right with height of 100% so… Since your containers cannot be higher then 100% and contents (.left and .right) are 100% your “.right” is hidden out of bounds of your row because .left already took all available space…

For a starter I’ve would recommend to use weather bootstrap classes or css, it’s pretty easy to have all that without defining your own css in bootstrap…

Problem :

I created a simple webpage with bootstrap that include two containers :
First container :

  • A white column taking 7/12 of the first row
  • A black column taking 5/12 of the second row
    Second container (under the first one)
  • A grey page

The first container takes all the page and if you scroll down to the second container, it also takes all the page height


<div class="container-fluid h-100 nopadding">
    <div class="row h-100 nopadding">
        <div class="col-md-7 left nopadding">
        <div class="col-md-5 right nopadding">

<div class="container-fluid h-100 padding">
    <div class="row h-100">
        <div class="col details nopadding">details</div>


body {
    height: 100%;

.nopadding {
    margin: 0 !important;
    padding: 0 !important;

.left {
    background: white;
    color: black;
    height: 100%;

.right {
    background: black;
    color: white;
    height: 100%;

.details {
    background: grey;
    color: white;
    height: 100%;

Here are screenshots of the page (when the page has place to display the black column, everything works. But when I resize the window, it goes under the grey container [I saw that using z-index]) :

Top when it works
Bottom when it works

Top when it doesn't work
Bottom when it doesn't work

I would like the black column to be right under the white one when I resize and the grey column to be under the black column when I resize.