How to vertically center a text in a column (bootstrap 4)? The structure is basic, see:
<div class="row"> <div class="col-md-6"> <span>Text to center</span> </div </div>
Ty guys!
Answer: Use the align-items-center Class In Bootstrap 4, if you want to vertically align a <div> element in the center or middle, you can simply apply the class align-items-center on the containing element.
You can add the my-auto class to the parent <div class="col-md-6">
to achieve this. This class sets automatic margins on the y-axis, see the link above for more details.
It would look like this:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <div class="col-xs-6 my-auto"> <span>Text to center</span> </div> <div class="col-xs-6"> <h1>Hello</h1> <h1>Hello</h1> <h1>Hello</h1> </div> </div> </div>
You might be tempted to use vertical alignment utilities but these will only work on inline, inline-block, inline-table, and table cell elements.
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