I wanted to center vertically my text inside a
div class="col-md-6"
and have the same height
Example:
I wanted to center vertically my text inside a
div class="col-md-6"
and have the same height
Example:
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.