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:
<!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>
|
- 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=
<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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...