How to Set full height in box-inner div using bootstrap 4 ?

26 Mar, 2020
The d-flex is an inbuilt class in Bootstrap 4 which can be used to set the full height to a div. We will illustrate it with the working code example below.
Syntax:
<div class="d-flex"> ... <div>
Below code create three divs in a horizontal arrangement but the problem is the height of inner-div with class box-inner is not the same in all the divs and depends on the text in the div. We want the height to be the same for all the divs and to be equal to that of div with the longest text.
Program:<!DOCTYPE html><html>  <head>    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">    <style>        .box-inner {            background: rgb(104, 201, 25);            margin: 2px;        }                  .container {            margin-top: 30px;        }    </style></head>  <body>    <h1>GeeksforGeeks</h1>    <b>A Computer Science Portal for Geeks</b>          <div class="container">        <div class="row">            <div class="col-12 col-lg-3 col-md-6 box">                <div class="box-inner">                    <p class="content">                        This is my first div.                    </p>                </div>            </div>            <div class="col-12 col-lg-3 col-md-6 box">                <div class="box-inner">                    <p class="content">                        This is my second div with a                        very very long text. Text in                        this div is longer than both                        other divs.                    </p>                </div>            </div>            <div class="col-12 col-lg-3 col-md-6 box">                <div class="box-inner">                    <p class="content">                        This is my third div.                    </p>                </div>            </div>        </div>    </div></body>  </html>
<!DOCTYPE html><html>  <head>    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">    <style>        .box-inner {            background: rgb(104, 201, 25);            margin: 2px;        }                  .container {            margin-top: 30px;        }    </style></head>  <body>    <h1>GeeksforGeeks</h1>    <b>A Computer Science Portal for Geeks</b>          <div class="container">        <div class="row">            <div class="col-12 col-lg-3 col-md-6 box">                <div class="box-inner">                    <p class="content">                        This is my first div.                    </p>                </div>            </div>            <div class="col-12 col-lg-3 col-md-6 box">                <div class="box-inner">                    <p class="content">                        This is my second div with a                        very very long text. Text in                        this div is longer than both                        other divs.                    </p>                </div>            </div>            <div class="col-12 col-lg-3 col-md-6 box">                <div class="box-inner">                    <p class="content">                        This is my third div.                    </p>                </div>            </div>        </div>    </div></body>  </html>
Output:
Solution: We will use d-flex class to increase the height of all divs and along with that we will add width: 100%; so that width of all divs is maximum of available area.
Program:<!DOCTYPE html><html>  <head>    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">      <style>        .box-inner {            background: rgb(104, 201, 25);            margin: 2px;            width: 100%;        }                  .container {            margin-top: 30px;        }    </style></head>  <body>    <div class="container">        <div class="row">            <div class="col-12 col-lg-3 col-md-6 box d-flex">                <div class="box-inner">                    <p class="content">                        This is my first div.                    </p>                </div>            </div>            <div class="col-12 col-lg-3 col-md-6 box d-flex">                <div class="box-inner">                    <p class="content">                        This is my second div with a very                        very long text. Text in this div                        is longer than both other divs.                    </p>                </div>            </div>            <div class="col-12 col-lg-3 col-md-6 box d-flex">                <div class="box-inner">                    <p class="content">                        This is my third div.                    </p>                </div>            </div>        </div>    </div>  </body>  </html>
<!DOCTYPE html><html>  <head>    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">      <style>        .box-inner {            background: rgb(104, 201, 25);            margin: 2px;            width: 100%;        }                  .container {            margin-top: 30px;        }    </style></head>  <body>    <div class="container">        <div class="row">            <div class="col-12 col-lg-3 col-md-6 box d-flex">                <div class="box-inner">                    <p class="content">                        This is my first div.                    </p>                </div>            </div>            <div class="col-12 col-lg-3 col-md-6 box d-flex">                <div class="box-inner">                    <p class="content">                        This is my second div with a very                        very long text. Text in this div                        is longer than both other divs.                    </p>                </div>            </div>            <div class="col-12 col-lg-3 col-md-6 box d-flex">                <div class="box-inner">                    <p class="content">                        This is my third div.                    </p>                </div>            </div>        </div>    </div>  </body>  </html>
Output:
Bootstrap-4
Bootstrap-Misc
Picked
Bootstrap
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.