2

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

hojjat.mi
  • 1,414
  • 16
  • 22
  • I don't understand why it is bothering you. Just copy and paste when the first one is ready – Rarblack Nov 26 '18 at 11:56
  • Rarblack, if use copy and paste, then if need to add one other class ,should add to all of them , not good idea. – hojjat.mi Nov 26 '18 at 12:01
  • DevProf , not exist better way?? for big theme its hard to write multiple javascript for any part – hojjat.mi Nov 26 '18 at 12:09
  • @DevProf `addClass` is not in javascript. And what you write there won't work. `getElementsByClassName` returns an array of elements unlike jQuery `$('.class')` – Mihai T Nov 26 '18 at 12:50
  • Does this answer your question? [Can a CSS class inherit one or more other classes?](https://stackoverflow.com/questions/1065435/can-a-css-class-inherit-one-or-more-other-classes) – jamheadart Jul 18 '20 at 14:21
  • 1
    IMHO this is a very important question which should be solved in better ways than using workarounds like JavaScript code, Less, Scss, copy and paste (seriously???), etc - as suggested in some answers and comments. Bootstrap is supposed to make it easier to work on the layouts and not to introduce more layers of complications. Avoiding repetitions and redundancy is one of the most basic requirements in any area of technology. Why not on Bootstrap? To me is sounds like a very serious flaw on Bootstrap. – Almir Campos Nov 28 '20 at 16:32

2 Answers2

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 */
}
Mihai T
  • 17,254
  • 2
  • 23
  • 32
  • Is it possible use @extend .row; in .SCSS file and use Live Sass In VSCode? – hojjat.mi Nov 26 '18 at 13:18
  • well yes. Write in scss file and it will be compiled into CSS . But extends works only if `.row` styles are declared in the same file as the `@extend .row`. That's why i said you need to edit the source files of bs4 – Mihai T Nov 26 '18 at 13:25
0

Write own css

For example 

.myclass { border: 1px solid #888; border-top: 0px; margin-top:2px; padding: 2px; background-color: #ccc;}
Arunkumar
  • 186
  • 1
  • 11
  • but i wants to use bootstrap class, it is so powerful and friendly and famous. Note: this code is sample , not goal. – hojjat.mi Nov 26 '18 at 11:59