Positioning

The use of Bootstraps flexbox utilities to position items on the screen.

Position an single item at the right

Use the .justify-content-end class to position on item in a .d-flex container to the right

<div class="d-flex justify-content-end">
  <button class="btn btn-success">OK</button>
</div>

Position on item in a group of items to the right

Use the .ml-auto to move the last item in ad .d-flex container to the right.

<div class="d-flex">
  <button class="btn btn-secondary mr-1">Ha!</button>
  <button class="btn btn-secondary mr-1">Jay</button>
  <button class="btn btn-secondary mr-1">Wow</button>
  <button class="ml-auto btn btn-success">OK</button>
</div>

Center items

Use the align-items-center class to align items horizontally in a container.

<div class="d-flex align-items-center p-2 bg-light">
    <div class="bg-success mr-2" style="width: 35px; height: 35px;"></div>
    <div class="bg-warning mr-2" style="width: 48px; height: 48px;"></div>
    <div class="bg-info mr-2" style="width: 20px; height: 20px;"></div>
</div>

Middle of the container

Combine the align-items-center with the justify-content-center class to position an element in the middle of a container.

<div class="d-flex align-items-center justify-content-center p-3 bg-light" style="height:100px;">
    <div class="bg-warning mr-2" style="width: 48px; height: 48px;"></div>
</div>