xxxxxxxxxx
<div class="jumbotron d-flex align-items-center min-vh-100">
<div class="container text-center">
I am centered vertically
</div>
</div>
xxxxxxxxxx
<div class=”row”>
<div class=”col-6 align-self-center”>
<div class=”card card-block”>
Center
</div>
</div>
</div>
xxxxxxxxxx
<!-- Using Absolute Positioning -->
.vertical{
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
<!-- Apply above css class to bootstrap container -->
Bootstrap vertical and horizontal Alignment
xxxxxxxxxx
<div class="container">
<div class="row align-items-start">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-center">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-end">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>