Bootstrap 4 row does not align to middle [duplicate] - html

Question

This question already has answers here:
Center a column using Twitter Bootstrap 3
(34 answers)
Closed 6 years ago.
I'm trying to get the content in <div class="col-md-2 col-lg-2"> in the middle to align to middle, but to no avail.
I know that setting the columns to a size of 2 will not fill the space of the grid system of 12 columns, but I want it to be aligned to the middle regardless.
<div class="row">
<div class="col-lg-12">
<h1 class="content-header">Header</h1>
<div class="row">
<div class="col-md-2 col-lg-2">
content
</div>
<div class="col-md-2 col-lg-2">
content
</div>
</div>
</div>

Answer 1

found a css trick that works
.row-centered {
text-align: center;
}
.col-centered {
display: inline-block;
float: none;
/* reset the text-align */
text-align: left;
/* inline-block space fix */
margin-right: -4px;
}

Answer 2

Bootstrap 4, like Bootstrap 3, uses offset to move or center entire columns. So in your case use offset-*-4 to move it over 4 cols in the 12 col grid.
<div class="row">
<div class="col-lg-12 text-xs-center">
<h1 class="content-header">Header</h1>
<div class="row">
<div class="col-md-2 col-lg-2 offset-md-4 offset-lg-4">
content
</div>
<div class="col-md-2 col-lg-2">
content
</div>
</div>
</div>
</div>
To center inline elements (like text), use:
text-center (this was text-center in 3.x)
To center block elements (like DIV) or columns, use:
mx-auto (this was center-block in 3.x)
Demo: http://www.codeply.com/go/Wxzbd3a6og
There are also new responsive alignment classes in Bootstrap 4 so you can align differently at various breakpoints.