Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Make row occupy full height in Bootstrap 4

I want to create a Bootstrap grid whose second row occupies the full height of the page, in a very similar fashion to Twitter bootstrap 3 two columns full height. However, the "non-hacky" answer provided, which uses Bootstrap 4's h-100, doesn't seem to be working. Here's the code and its output:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="wiewport" content="width=device-width, initial-scale=1 user-scalable=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <style>
    html {
        height: 100%;
    }
    body {
        min-height: 100%;
        background-color: lightblue;
    }
    main {
        background-color: yellow;
    }
    #second-row {
        background-color: green;
    }
    textarea {
        height: 100%;
        width: 100%;
    }
    </style>
  </head>
  <body>
      <main class="container-fluid h-100">
          <div class="row">
              <div class="col-sm-6">
                  Hello,
              </div>
              <div class="col-sm-6">
                  World!
              </div>
          </div>
          <div class="row h-100" id="second-row">
              <div class="col-sm-8">
                  <textarea></textarea>
              </div>
              <div class="col-sm-4">
                  <textarea></textarea>
              </div>
          </div>
      </main>
  </body>
</html>

Output of the code

Update: Bootstrap 4: How to make the row stretch remaining height?, a similar question, has an answer that uses Bootstrap 4's flex-grow class. I tried it like so:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="wiewport" content="width=device-width, initial-scale=1 user-scalable=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <style>
    html {
        height: 100%;
    }
    body {
        min-height: 100%;
        background-color: lightblue;
    }
    main {
        background-color: yellow;
    }
    #second-row {
        background-color: green;
    }
    textarea {
        height: 100%;
        width: 100%;
    }
    </style>
  </head>
  <body>
      <main class="container-fluid d-flex h-100 flex-column">
          <div class="row">
              <div class="col-sm-6">
                  Hello,
              </div>
              <div class="col-sm-6">
                  World!
              </div>
          </div>
          <div class="row flex-fill d-flex justify-content-start" id="second-row">
              <div class="col-sm-8 portlet-container portlet-dropzone">
                  <textarea></textarea>
              </div>
              <div class="col-sm-4 portlet-container portlet-dropzone">
                  <textarea></textarea>
              </div>
          </div>
      </main>
  </body>
</html>

Output remains unchanged.

like image 515
Lucca Avatar asked Sep 09 '18 19:09

Lucca


People also ask

How can I fix the height of a row in Bootstrap?

Firstly, you have to set html and body to 100% height. Then you can use predefined bootstrap classes, like h-50 or h-75 to fill the container as you desire - that is no such class like h-80 , as you can check here.

How can I make Bootstrap 4 columns all the same height?

You just have to use class="row-eq-height" with your class="row" to get equal height columns for previous bootstrap versions.

How do I stretch a row in Bootstrap?

Use the . align-items-stretch class to stretch single rows of items in Bootstrap 4.


1 Answers

You should use flex-grow:1; as explained in the other answer: Bootstrap 4: How to make the row stretch remaining height?

The problem is that body should be height:100%; not min-height...

<main class="container-fluid d-flex h-100 flex-column">
  <div class="row">
      <div class="col-sm-6">
          Hello,
      </div>
      <div class="col-sm-6">
          World!
      </div>
  </div>
  <div class="row flex-grow-1" id="second-row">
      <div class="col-sm-8 portlet-container portlet-dropzone">
          <textarea></textarea>
      </div>
      <div class="col-sm-4 portlet-container portlet-dropzone">
          <textarea></textarea>
      </div>
  </div>
</main>

https://www.codeply.com/go/tpecZ31njp

like image 195
Zim Avatar answered Oct 13 '22 04:10

Zim