Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to vertically center a text in a column (bootstrap 4)?

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!

like image 254
Angelo Merlo Avatar asked Jan 24 '17 23:01

Angelo Merlo


People also ask

How do I vertically center a div in bootstrap 4?

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.


1 Answers

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.

like image 108
Pascal Martineau Avatar answered Sep 25 '22 22:09

Pascal Martineau