How to work with repetitive bootstrap css code

Question

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

Write you own CSS. That's how boostrap is designed to work but you can always write custom CSS — Temani Afif, Aug 21 '22 at 19:28
@TemaniAfif Yes, I can do that with CSS. I never used bootstrap classes directly, so I decided to give it a try on new project. Does it mean that bootstrap is not much usable in large apps, where there is a high chance that same code style will be used on many places? — Goran, Aug 21 '22 at 19:55

score 0 · Accepted Answer · answered Aug 21 '22 at 20:49

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;
}

How to work with repetitive bootstrap css code

1 Answers1