My CSS Overridden Bootstrap CSS

Question

I want to add GWT-Bootstrap to my already running project. I managed to use it, but Bootstrap CSS overrides all other CSS. As a result, all of my previous user interface elements are mixed.

Fields, text size, and many elements no longer apply. I cannot use Bootstrap because the rest of the project is not available. I would like to make a progressive change in Bootstrap and keep old things like this.

I would like my CSS codes to be in this order of priority:

• Myapp
• Gwt
• Bootstrap

I tried to arrange them in * .gwt.xml without success:

<stylesheet src="css/gwt-bootstrap.css" /> <stylesheet src="css/bootstrap.min.css" /> <stylesheet src="gwt/clean/clean.css" /> <stylesheet src="MyApp.css" /> 

What can I do?

Answer 1

The priority of using styles is determined by more complex algorithms than just the order of inclusion in HTML. CSS style is selected using the most specific selection rule, where the built-in rules are considered more specific, and then tied to the appearance, then selected by identifier, then class and at the end of the selection with the tag name. For example, the paragraph <p id="xyz" class="xyz"> will be red regardless of the order of the rules:

 .xyz { color: blue; } #xyz { color: red; } 

If there are two rules with the same type of choice, it matters. So, choosing .xyz .abc “stronger,” then .qwerty .

If the two rules have an equivalent choice in terms of numbers in each category, then in the very final order it is taken into account ...

You can also force another order using the !important directive.

Read more about it with the keywords "CSS Specificity".

Answer 2

The way to redefine styles is the last loaded win.

So, if you expect styles from GWT-Bootstrap to override Bootstrap CSS, then you want to order the style order like this:

 <stylesheet src="css/bootstrap.min.css" /> <stylesheet src="gwt/clean/clean.css" /> <stylesheet src="css/gwt-bootstrap.css" /> <stylesheet src="MyApp.css" />