[FIXED] How to work with repetitive bootstrap css code

Issue

I am frequently using this code to center some content

<!-- horizontal -->
<div class="d-flex align-items-center justify-content-center h-100">
  ..
</div>

<!-- vertical -->
<div class="d-flex align-items-center justify-content-center h-100 flex-column">
  ..
</div>

Is there a way to reuse / inherit this code, so that I can use it like below, where my-centered-container-vertical just adds flex-column to my-centered-container (no code duplication)?

<div class="my-centered-container">
</div

<div class="my-centered-container-vertical">
</div

Solution

You shouldn't write in CSS anyway. Use SASS or LESS instead. See other answers for how to integrate bootstrap into your project. Also see bootstrap#importing. As for your specific question, you can re-use like this.

.my-center {
    @extend .d-flex;
    @extend .align-items-center;
    @extend .justify-content-center ;
    @extend .h-100;
}

Answered By - IT goldman

Answer Checked By - Pedro (PHPFixing Volunteer)