Is it possible to combine several bootstrap classes into one? - html

Question

I am using different bootstrap classes multiple times in an HTML <form>.
e.g.:
<form id="frmData" name="frmData" method="POST">
<div class="row justify-content-sm-center mb-2 align-items-center">
<div class="col-12 col-sm-auto d-flex justify-content-md-end">
<label>....</label>
</div>
<div class="col-12 col-sm-6 col-lg-4">
<input .....>
</div>
</div>
<div class="row justify-content-sm-center mb-2 align-items-center">
<div class="col-12 col-sm-auto d-flex justify-content-md-end">
<label>....</label>
</div>
<div class="col-12 col-sm-6 col-lg-4">
<input .....>
</div>
</div>
......
</form>
Is there an opportunity to define a class for the <div> of the <label> for example and reuse it for every <div> that is containing a label?
This would help a lot during development. Instead of changing the classes of each <div>, it would be sufficient to change only the class definition.
Something like this:
<div class="div_class">
<label>...</label>
</div>
<style>
.div_class {
.col-12
.col-sm-auto
.d-flex
.justify-content-md-end
}
</style>

Answer 1

This I think will be the only way to do it in pure CSS. In this model all of the innner Div's and Label's should inherit settings from the new wrapper that I have added and .div_class > * ensures only children are affected not grandchildren. Give it a try any way.
<div class="wrapper">
<!-- Now as many of your label divs as you need -->
<div class="div_class">
<label>...</label>
</div>
<div class="div_class">
<label>...</label>
</div>
<div class="div_class">
<label>...</label>
</div>
</div>
And the CSS
.wrapper * {
color: black;
}
.div_class > * {
color:blue;
}