Check out example codes for "flex center bootstrap". It will help you in understanding the concepts better.

Code Example 1

<!-- Classic -->
<div class="justify-content-center"></div>
<!-- Small -->
<div class="justify-content-sm-center"></div>
<!-- Medium --> 
<div class="justify-content-md-center"></div>
<!-- Large -->
<div class="justify-content-lg-center"></div>
<!-- XL -->
<div class="justify-content-xl-center"></div>

Code Example 2

<div class="d-flex align-items-start">...</div>
<div class="d-flex align-items-end">...</div>
<div class="d-flex align-items-center">...</div>
<div class="d-flex align-items-baseline">...</div>
<div class="d-flex align-items-stretch">...</div>

Code Example 3

<div class="d-flex justify-content-end">...</div>

Learn ReactJs, React Native from akashmittal.com