Menu
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;
}
904
How to Center a Div Vertically. To center a div vertically on a page, you can use the CSS position property, top property, and transform property. Start by setting the position of the div to absolute so that it's taken out of the normal document flow. Then set the top property to 50%.
The CSS vertical align property works smoothly with tables, but not with divs or any other elements. When you use it in a div, it aligns the element alongside the other divs and not the content — which is what we usually want). This only works with display: inline-block; .
Center Vertically - Using position & transform If padding and line-height are not options, another solution is to use positioning and the transform property: I am vertically and horizontally centered.
Vertically centering div items inside another div Just set the container to display:table and then the inner items to display:table-cell . Set a height on the container, and then set vertical-align:middle on the inner items.
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%;
}
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>
Demo
3
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
