Alignment
top-center
center
bottom-center
left-center
right-center
top-left
top-right
bottom-left
bottom-right
center-horizantal
center-vertical
<div class="row center-thing-responsive">
<div class="col-4 col-md-3 col-xxl-2">
<div class="center-thing mt-3">
<div class="top-center">
<i class="ph-light ph-text-align-center"></i>
</div>
</div>
<p class="f-s-16 text-center m-2">top-center</p>
</div>
<div class="col-4 col-md-3 col-xxl-2">
<div class="center-thing mt-3">
<div class="center">
<i class="ph-light ph-text-align-center"></i>
</div>
</div>
<p class="f-s-16 text-center m-2">center</p>
</div>
<div class="col-4 col-md-3 col-xxl-2">
<div class="center-thing mt-3">
<div class="bottom-center">
<i class="ph-light ph-text-align-center"></i>
</div>
</div>
<p class="f-s-16 text-center m-2">bottom-center</p>
</div>
<div class="col-4 col-md-3 col-xxl-2">
<div class="center-thing mt-3">
<div class="left-center">
<i class="ph-light ph-text-align-left"></i>
</div>
</div>
<p class="f-s-16 text-center m-2">left-center</p>
</div>
<div class="col-4 col-md-3 col-xxl-2">
<div class="center-thing mt-3">
<div class="right-center">
<i class="ph-light ph-text-align-right"></i>
</div>
</div>
<p class="f-s-16 text-center m-2">right-center</p>
</div>
<div class="col-4 col-md-3 col-xxl-2">
<div class="center-thing mt-3">
<div class="top-left">
<i class="ph-light ph-text-align-left"></i>
</div>
</div>
<p class="f-s-16 text-center m-2">top-left</p>
</div>
<div class="col-4 col-md-3 col-xxl-2">
<div class="center-thing mt-3">
<div class="top-right">
<i class="ph-light ph-text-align-right"></i>
</div>
</div>
<p class="f-s-16 text-center m-2">top-right</p>
</div>
<div class="col-4 col-md-3 col-xxl-2">
<div class="center-thing mt-3">
<div class="bottom-left">
<i class="ph-light ph-text-align-left"></i>
</div>
</div>
<p class="f-s-16 text-center m-2">bottom-left</p>
</div>
<div class="col-4 col-md-3 col-xxl-2">
<div class="center-thing mt-3">
<div class="bottom-right ">
<i class="ph-light ph-text-align-right"></i>
</div>
</div>
<p class="f-s-16 text-center m-2">bottom-right</p>
</div>
<div class="col-4 col-md-3 col-xxl-2">
<div class="center-thing mt-3">
<div class="center-horizantal">
<i class="ph-light ph-align-center-horizontal"></i>
</div>
</div>
<p class="f-s-16 text-center m-2">center-horizantal</p>
</div>
<div class="col-4 col-md-3 col-xxl-2">
<div class="center-thing mt-3">
<div class="center-vertical">
<i class="ph-light ph-align-center-vertical"></i>
</div>
</div>
<p class="f-s-16 text-center m-2">center-vertical</p>
</div>
</div>
image-top-left
image-center
image-bottom-right
image-top-right
image-bottom-left
<div class="col-xl-12">
<div class="row">
<div class="col-xl-3">
<div class="image-center-thing">
<div class="image-top-left">
<img src="/diy_templates/bootstrapmb-16149/assets/images/placeholder/05.png" alt="">
</div>
</div>
</div>
<div class="col-xl-3">
<div class="image-center-thing">
<div class="image-center">
<img src="/diy_templates/bootstrapmb-16149/assets/images/placeholder/05.png" alt="">
</div>
</div>
</div>
<div class="col-xl-3">
<div class="image-center-thing">
<div class="image-bottom-right">
<img src="/diy_templates/bootstrapmb-16149/assets/images/placeholder/05.png" alt="">
</div>
</div>
</div>
<div class="col-xl-3">
<div class="image-center-thing">
<div class="image-top-right">
<img src="/diy_templates/bootstrapmb-16149/assets/images/placeholder/05.png" alt="">
</div>
</div>
</div>
<div class="col-xl-3">
<div class="image-center-thing mt-3">
<div class="image-bottom-left">
<img src="/diy_templates/bootstrapmb-16149/assets/images/placeholder/05.png" alt="">
</div>
</div>
</div>
</div>
</div>