combine multiple css styles into one

Question

I've got div that uses several styles

<div class="alert alert-secondary login-alert" role="alert">Please contract administrator to recieve credentials!</div>

Where alert and alert-secondary are default bootstrap 4 styles while login-alert is just a simple one-liner

.login-alert {
    font-family: 'Kavivanar', cursive;
}

How to combine it into one style? The thing is that I want to use that combined style only in certain places and I might need pure alert or alert-secondary somewhere.

Take the css of those 3 classes and merge it into one class ? I don't quite seem to understand. — Plotisateur, Oct 25 '17 at 21:21
Not sure why you want to combine them in one and not use the 3 like you do now, and when you need just `alert` use that when you need 2 use those, etc.. — Gabriele Petrioli, Oct 25 '17 at 21:23
@GeorgeCampbell They are [`Bootstrap 4` classes](http://getbootstrap.com/docs/4.0/components/alerts/) — Plotisateur, Oct 25 '17 at 21:23
Then look in the bootstrap css files for those classes, and copy the css for them, and combine them into 1 class. Why don't you just use class: "alert alert-secondary login-alert" when you want to combine them? — George, Oct 25 '17 at 21:25

score 1 · Accepted Answer · answered Oct 25 '17 at 21:31

1

In bootstrap 4, the css for .alert is

.alert {
    position: relative;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
}

and for .alert-secondary

.alert-secondary {
    color: #464a4e;
    background-color: #e7e8ea;
    border-color: #dddfe2;
}

So to combine them, use:

.login-alert-combined{
    font-family: 'Kavivanar', cursive;
    position: relative;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    color: #464a4e;
    background-color: #e7e8ea;
    border-color: #dddfe2;
}

But I don't see what is wrong with setting class as "alert alert-secondary login-alert" when you want to use all 3 styles.

answered Oct 25 '17 at 21:31

George

2,330
3
15
36

well I don't like having style for just one property – lapots Oct 26 '17 at 10:28
1

Is 'contract' a typo of 'contact' in 'Please contract administrator' ? I just noticed. – George Oct 26 '17 at 10:30
by the way when I do like this, it hides the button – lapots Oct 26 '17 at 10:32

score 0 · Answer 2 · answered Oct 25 '17 at 23:11

try concatenating both classes in your css

.alert.alert-secondary{
    font-family: 'Kavivanar', cursive;
}

Note that this will give the property to all your div's that has both alert and alert-secondary classes.

Check this question that explains it better.

combine multiple css styles into one

2 Answers2