How to Make a Bootstrap 4 Row Occupy Remaining Height?-CSS Tutorial-php.cn

How to Make a Bootstrap 4 Row Occupy Remaining Height?

Linda Hamilton

Release： 2024-11-29 10:23:11

Original

444 people have browsed it

How to Make a Bootstrap 4 Row Occupy Remaining Height?

How to Make a Row Fill Remaining Height in Bootstrap 4

Question

In Bootstrap 4, how can you make a row stretch to occupy the remaining available height? Adding h-100 to the row class leaves a white space at the bottom of the screen.

Sample Code

<div class="container-fluid h-100">
  <div class="row justify-content-center h-100">
    <div class="col-4 bg-red">
      <div class="h-100">
        <div class="row justify-content-center bg-purple">
          <div class="text-white">
            <div>

Copy after login

Solution

To fill the remaining space in the red column with the blue row, use the Bootstrap 4.1 class flex-grow-1.

...
<div class="row justify-content-center bg-blue flex-grow-1">
  <div class="text-white">ROW 2 - grow remaining height</div>
</div>
...

Copy after login

Revised Code

<div class="container-fluid h-100">
  <div class="row justify-content-center h-100">
    <div class="col-4 bg-red">
      <div class="h-100 d-flex flex-column">
        <div class="row justify-content-center bg-purple">
          <div class="text-white">
            <div>

Copy after login

Example

[See live demo](https://codeply.com/go/Iyjsd8djnz)

The above is the detailed content of How to Make a Bootstrap 4 Row Occupy Remaining Height?. For more information, please follow other related articles on the PHP Chinese website!