Vertical align DIV & Text in Bootstrap 4
Solution 1
Basically, this question has already been answered.
Use flexbox and justify-content-center
to make the box
centered, and h-100
for height:100%
...
<div class="container">
<div class="row">
<div class="col-4">
<div class="box h-100 d-flex justify-content-center flex-column">
<h6>Title 1</h6>
<p>A small description</p>
</div>
</div>
<div class="col-4">
<div class="box h-100 d-flex justify-content-center flex-column">
<h6>Title 2</h6>
<p>A bigger description goes here</p>
</div>
</div>
<div class="col-4">
<div class="box h-100 d-flex justify-content-center flex-column">
<h6>Title 3</h6>
<p>A large description is placed here to make whatever changes we need.</p>
</div>
</div>
</div>
</div>
https://www.codeply.com/go/VsyNMHZ8VG
Or, if you want to apply the same changes to .box
instead of using the Bootstrap classes...
https://jsfiddle.net/g38e9Lfm/
.box {
background-color: grey;
padding: 15px;
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}
Solution 2
You can add standard bootstrap classes and do not write extra css
<div class="container">
<div class="row">
<div class="col-4">
<div class="box d-table h-100 w-100">
<div class="d-table-cell align-middle">
<h6>Title 1</h6>
<p>A small description</p>
</div>
</div>
</div>
<div class="col-4">
<div class="box d-table h-100 w-100">
<div class="d-table-cell align-middle">
<h6>Title 2</h6>
<p>A bigger description goes here</p>
</div>
</div>
</div>
<div class="col-4">
<div class="box d-table h-100 w-100">
<div class="d-table-cell align-middle">
<h6>Title 3</h6>
<p>A large description is placed here to make whatever changes we need.</p>
</div>
</div>
</div>
</div>
</div>
Elaine Byene
Updated on June 14, 2022Comments
-
Elaine Byene almost 2 years
I have gone through many questions here as well as many articles and bootstrap 4 documentation but failed to find what I'm looking for.
DEMO: https://jsfiddle.net/zxLLqsm0/
I'm looking to create boxes with exact same height for all columns and also vertically center align the text inside the boxes. I managed to get the text vertically aligned but the heights of the boxes are different.
Here's my HTML
<div class="container"> <div class="row align-items-center"> <div class="col-4"> <div class="box"> <h6>Title 1</h6> <p>A small description</p> </div> </div> <div class="col-4"> <div class="box"> <h6>Title 2</h6> <p>A bigger description goes here</p> </div> </div> <div class="col-4"> <div class="box"> <h6>Title 3</h6> <p>A large description is placed here to make whatever changes we need.</p> </div> </div> </div> </div>
And my CSS:
.container { margin-top: 15px; } .box { background-color: grey; padding: 15px; }
-
Elaine Byene about 6 yearsI prefer the other method provided by @ZimSystem. Cleaner code but thank you. Works work beautifully too :)
-
Elaine Byene about 6 yearsThank You. It didn't come up in my search!