Vertically Center Text Bootstrap

Viewed 40926

I wanted to center vertically my text inside a

div class="col-md-6"

and have the same height

Example:

...

9 Answers

this is bootstrap 4:

<html><head>    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  </head>
  <body>
<div class="row">
<div class="col-6">
    <img src="https://media.haircutinspiration.com/photos/20181204011855/boy-hairstyle-e1536810585307.jpg" class="img-fluid">
</div>
    <div class="col-6 align-self-center">
        hello hello
    </div>

</div>
  </body>

in Bootstrap 4, use the class align-self-center in the parent element.

<div class="align-self-center">
    hello hello
</div>

Based on Bootstrap 4, which is now flex-based, you can use the align-items-center utility on a Bootstrap row to vertically centre the row's content.

For instance:

<div class="container">
  <div class="row align-items-center">
    <div class="col-4">
      <img alt="img" src="http://asianmeditour.com/assets/images/post/1542457653tourism.jpg" class="img-fluid">
    </div>
    <div class="col-8">
      Text vertically centred!
    </div>
  </div>
</div>

JSFiddle here.

I found about the align-items-center keyword here.

Related