Olá Marco, tudo bem com você?
Então, realmente uma das características negativas desse estilo de customização é que você acaba tendo muito código repetido para trazer mesmo comportamento
O que eu vejo como solução, mas não sei se é tão utilizado, é você fazer a combinação do bootstrap com o sass, então você faria um:
npm install bootstrap --D
npm install sass -D
E dentro de um arquivo, por exemplo: main.sass
Você faria a importação do bootstrap
:
@import 'node_modules/bootstrap/scss/boostrap';
E utilizaria o recurso de herança de estilos do sass
para atingir seu objetivo, então vamos supor que você tinha uma div da seguinte maneira:
<div class="col-md-12 text-success m-5 py-5 alert alert-danger> [...] </div>
Você pode mudar para:
<div class="customizada"> [...] </div>
E dentro do arquivo sass
fazer :
.customizada {
@extend .col-md-12;
@extend .text-success;
@extend .m-5;
@extend .py-5;
@extend .alert;
@extend .alert-danger;
}
Dessa forma sempre que utilizar .customizada
terá todos esses comportamentos :)
Agora fora essa maneira eu não consigo pensar em outra forma :)
Abraços e Bons Estudos!