Two CSS classes on one div not working

Question

I have this css from bootstrap.min:

.rew {
  margin-right: auto;
  margin-left: auto;
  margin-top: 20px;
  width: 1050px;
}

.rew2 {
  margin-right: auto;
  margin-left: auto;
  margin-top: 20px;
  width: auto;
}

And my div like this (I've red examples from question and answer in stackoverflow):

<div class="rew rew2">
content.....
</div>

The (rew2) it's for responsived css, but before that I was wrote the css on my responsive css file, but it's not working the "div tag" always calls css from bootstrap.min css file. So I wrote two classes in the bootstrap.min css file, but not working also. The "div" tag only called the "rew" class and the "rew2" was ignored.

******** The class on responsive css file was deleted and I wrote the class on bootstrapmin css file

The differences it's only on width, if the site opened from desktop it would have 1050px width, and for the responsive (opened from smartphone) it will automatically adjust the template with the smartphone screen as "auto".

*Huft...I'm so confused why it's not working. I need help from you guys.

Thank you,

Best regards,

Kris

Answer 1

Why would you customize bootstraps .css file on your own? Just create your own rules and attach them to your div.

CSS stylings are always used one by one. So if you, for example, include your bootstrap.min.css file before your own styling rules, your own ones would overwrite all bootstrap stylings.

In other words: First of all include bootstrap.min.css, then your own .css file.

Let's assume you've got this markup

<div class="foo bar"> </div>

You could style it through the 2 classes foo and bar.

.foo {
  color: red;
}

.bar {
  color: blue;
}

Using this would end up in the blue color, according to the declared order.

Let's even try to be a bit more specific. You can also overwrite rules by using some more complex selectors.

.foo.bar {
  color: black;
}

The above code would overwrite both of the previously defined rules, because they are 'stronger' selectors than a simple single-class selector.

Conclusion If you want to overwrite bootstraps styling, try to stick to the order. If bootstrap uses some complex selectors and your custom ones won't trigger, try to use a bit more complex ones. Look here to learn more about complex selectors.

A little hint at the end: Try to avoid !important! A rule, declared as !important, will overwrite all other rules, regardless of whatever you have declared up before.