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

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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <link rel="stylesheet" href=
        <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>

    chevron_right

    
    

  • 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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <link rel="stylesheet" href=
      
        <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>

    chevron_right

    
    

  • Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.