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:
<!DOCTYPE html><html><head><linkrel="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><divclass="container"><divclass="row"><divclass="col-12 col-lg-3 col-md-6 box"><divclass="box-inner"><pclass="content">This is my first div.</p></div></div><divclass="col-12 col-lg-3 col-md-6 box"><divclass="box-inner"><pclass="content">This is my second div with avery very long text. Text inthis div is longer than bothother divs.</p></div></div><divclass="col-12 col-lg-3 col-md-6 box"><divclass="box-inner"><pclass="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><linkrel="stylesheet"href=<style>.box-inner {background: rgb(104, 201, 25);margin: 2px;width: 100%;}.container {margin-top: 30px;}</style></head><body><divclass="container"><divclass="row"><divclass="col-12 col-lg-3 col-md-6 box d-flex"><divclass="box-inner"><pclass="content">This is my first div.</p></div></div><divclass="col-12 col-lg-3 col-md-6 box d-flex"><divclass="box-inner"><pclass="content">This is my second div with a veryvery long text. Text in this divis longer than both other divs.</p></div></div><divclass="col-12 col-lg-3 col-md-6 box d-flex"><divclass="box-inner"><pclass="content">This is my third div.</p></div></div></div></div></body></html> - Output:
Please Login to comment...