Bootstrap now includes Flexbox functionality which means we can use flex commands such as align-items, and justify-content.

More Info on Bootstrap Grids, Flexbox and CSS Flexbox Layout Guide.

Grid Alignment

So we start with a basic grid, one row and four columns of 3-wide each, with the text content being aligned to top and left. Remember that Flexbox works off of a main and cross axis. Since nothing has been defined, the default would be applied making the Main Axis on this page being Left to Right, and the Cross Axis being Top to Bottom

• < div class="container">
  • < div class="row">
  • • < div class="col text-bg-primary">1< /div>
    • < div class="col text-bg-warning">2< /div>
    • < div class="col text-bg-success">3< /div>
    • < div class="col text-bg-info">4< /div>
• < /div>

So we can use justify-content on the row to align the columns to the main-axis which in this case is horizontally.
*note: if your container is taking up 100% of the available row space, some properties such as space-around, and space-between will have no effect.

< div class="row justify-content-end">

or < div class="row justify-content-center">

or < div class="row justify-content-around">

And since we can align columns horizontally, we can also align them vertically (cross axis) using align-items on the row.

< div class="row align-items-end">

or < div class="row align-items-center">