gwtbootstrap always applies to all elements

Question

I want to use GWT bootstrap for my application, so I added the jar to the classpath and inherited it in app.gwt.xml and it is working so far (I am new to Bootstrap).

So far I haven't used UIBinders for the layout and if in any way possible would like to leave it that way as I have a very dynamic UI which is generated programmatically and I have little experience with UIBinders. However for the elements that I want to use from gwtbootstrap I have created UIBinders (such as headings and buttons).

The problem is that not only the elements I create with UIBinders using the gwtbootstrap elements look like gwtbootstrap elements, but all elements on the page.

A simple example: it makes no difference whatsoever if I create a Heading like this using a bootstrap element

<b:Heading size="2">Hello GWT Bootstrap</b:Heading>

or like this using standard HTML

<h1>Hello GWT Bootstrap</h1>

both look like a GWT Bootstrap heading. The same applies for all other elements, so any element on the page is styled by gwtbootstrap, even if I don't want it to and I can't find a way to control this.

Nurmi

Answer 1

That's because gwt-bootstrap injects the bootstrap.css into your GWT app and bootstrap.css defines default styles for standard HTML elements like <h1>, etc.

If you don't want bootstrap to override the default styles there are several solutions:

1. Modify the bootstrap.css in the gwt-bootstrap library file and remove the styles that you don't want
2. Create a separate css file that sets the styles for the specific HTML elements back (using !important)
3. Extends gwt-bootstraps CssResources and pass a custom css file.

Solution 3 is probably the cleanest one.

Materials