'Is there a method to group different type of col in a class

I'm working on a project where often I need to implement the same type of tag such as <div class="col-12 col-md-10 col-lg-8 col-xl-4"> and I want to create an equivalent class to group up all the col used. The code I want must become something like <div class="allcol">

There is a way to make it?



Solution 1:[1]

I find a solution for the problem. In the xhtml page that include all the other pages i put the following tag:

<c:set value="#{'col-12 col-md-6 col-lg-3 fsb12 mt10'}" var="divSmall" />

and in the div i use:

<div class="#{divSmall}">

Everytime i need to make a update i can now modify the 'set' tag and all the are propagated to all the pages of my project.

Solution 2:[2]

It's a great question and there maybe some sort of library or extension of Bootstrap that allows you to do this, but I'm pretty sure nothing exists out of the box if you're just using the bootstrap library.

One idea though, if you are using a CSS preprocessor like SASS or LESS, you could potentially extend the bootstrap classes to allow you to do this. This is just a suggestion though and not something I've played around with.

https://www.w3schools.com/sass/sass_extend.php

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 BlazekaMarko
Solution 2 Cameron