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

Last Updated : 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: 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: 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:
Comment

Explore