How to vertically center a text in a column (bootstrap 4)?
Use auto-margins (my-auto
), or use the flexbox utilities..
<div class="container">
<div class="row">
<div class="col-md-6 align-self-center">
<span>Text to center</span>
</div>
<div class="col-md-6">
<p>
..
</p>
</div>
</div>
</div>
http://www.codeply.com/go/oy8H1bUOL1
Also, there are several other Bootstrap vertical centering options explained in my other answer.
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.