css – How can I reuse Bootstrap configurations?

Question:

I am working on the styles of a series of pages with Bootstrap.

It turns out that I repeatedly have to use a number of properties. For example:

class="col-md-5 text-center border border-rounded"

This combination suits me well and I want to use it in different files. Under normal conditions, if it were a simple background color adjustment, for example, what I would do is name it class="miGenerica" and then in my estilos.css file estilos.css would add a line defining the style:

miGenerica {
    // ... propiedades...
}

However, as it is a Bootstrap system, I don't see it possible to add the data with:

miGenerica {
    col-md-5
    border
}

So how can I generalize Bootstrap values ​​to an external file so that I don't have to copy them from file to file?

Answer:

One possible answer is using SASS (SCSS) and with @extend , where you can add the existing Bootstrap classes (or any other class):

.generica {
    @extend .col-md-5;
    @extend .m-0;
}
Scroll to Top