how to avoid repeat bootstrap class in html theme building

Question

I wants to create html theme and so use bootstrap 4.

but i should repeat bootstrap class for some places for example

<div class="row border border-top-0 mt-2 p-2 bg-info">One</div>
<div class="row border border-top-0 mt-2 p-2 bg-info">example 2</div>
<div class="row border border-top-0 mt-2 p-2 bg-info">some thing</div>

can i aggregate bootstrap classes to one names for example:

myclass="row border border-top-0 mt-2 p-2 bg-info"

and use this?

<div class="myclass">One</div>
<div class="myclass">example 2</div>
<div class="myclass">some thing</div>

Note:copy and Paste is bad Idea.if use copy and paste, then if need to add one other class ,should add to all of them

Answer 1

I haven't read all the BS4 docs, it might be possible to download the source code and tamper/modify it. But i advise against it.

I don't really understand why you want to do this but you can use javaScript for this. Declare a string that contains your desired classes and add it to the elements you want or override the existing classes with it.

That way, when you want to add another class to the list, just add it inside the declared string ( myClass )

Simple example:

const myClass = 'row border margin-top'
document.querySelectorAll('.my-row').forEach(row => row.className += ` ${myClass}`)

div {
  height:100px;
  width:100px;
  margin:5px;
}

.border {
  background:red;
}

<div class="my-row"></div>
<div class="my-row"></div>
<div class="my-row"></div>

Option 2 . Not recommended.

Download the source files from bootstrap and load them into your project instead of loading the url of bs4.

Then inside the files you should find where they declare the styles of each class and use SASS ( bs4 is also written in sass ) to make your own custom class that extends the styles of the bs4 classes

.myclass {
  @extend .row;
  @extend .border;
  @extend .mt-2;
  /* here you can add styles that are only specific to myclass */
}