CODEWITHSUNDEEP
htmlbootstrap-4
Alex
Alex

Reputation: 107

Change height of rows in Bootstrap

I have the following body of html:

<body>
    <div class="container-fluid h-100 border">
        <div class="row h-50">
            <div class="col-sm-12 bg-danger">Row1</div>
        </div>
        <div class="row h-50">
            <div class="col-sm-12 bg-primary">Row2</div>
        </div>
    </div>
</body>

I want to change the heights of the 2 rows, but always having them both fill the container. As it is they both take up half of the screen. However if I change the heights to say 20 and 80, the rows just revert to 2 tiny rows at the top of the screen. The only other heights that work are 100 and 100 which just makes 2 full screen rows which is not what I want either.

Any ideas??

Upvotes: 4

Views: 37461

Answers (2)

Lucas Arbex
Lucas Arbex

Reputation: 909

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.

However, if you want specific heights you can simply create custom classes, like so:

.h-80 {
    height: 80%;
}

.h-20 {
    height: 20%;
}

Upvotes: 2

mahan
mahan

Reputation: 14935

Use flex-grow-1

Use these clasees on div.container-fluid

  1. d-flex - to make it flex
  2. flex-column - to change its direction to column
  3. h-100 - to make its height 100%.

Should you want that both of the rows fill the container equally, use flex-grow-1 on each one of them. 

body,
html {
  height: 100%;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container h-100 d-flex flex-column">
  <div class="row flex-grow-1 bg-danger"></div>
  <div class="row flex-grow-1 bg-primary"></div>
</div>

Rows fills 50% of container

Otherwise, use flex-grow-1 on one of them and control hieght of the second one. 

body,
html {
  height: 100%;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container h-100 d-flex flex-column">
  <div class="row h-25 bg-danger"></div>
  <div class="row flex-grow-1 bg-primary"></div>
</div>

The first row fills 25% of the container and the second one the rest of available space.

All of the parents of the container need to have 100% height.

Upvotes: 9

Related Questions