Twitter-bootstrap – integrate Bootstrap and GWT

gwtgwt-bootstraptwitter-bootstrap

I'm investigating the best practices to use Bootstrap library with GWT.
I prefer not use the GWT-Bootstrap project and prefer to use plain css and js Bootstrap library in my GWT app.

I'm searching how i can apply Bootstrap style to GWT UI components? do i need to do this in the UI view code by working on the DOM Elements of GWT components ? or is there any other clean way to achieve this integration of GWT and Bootstrap?

Best Answer

No, there's no way to simple add the bootstrap styles to gwt components. You will have to deal with DOM, remove some GWT CSS classes and add GWT ones instead, and, at least you copy your code from one place to everywhere, you will made a class that extend the original component and use this new class everywhere, which is basically what GWT-Bootstrap do.

I know this because about one year ago, I wanted to do exactly what you're saying now: apply bootstrap styles to GWT components in a clean way, than, I managed it to work, and start the GWT-Bootstrap development.

GWT-Bootstrap actually already solved the most of the gwt+bootstrap integration bugs, and works well for basically any project. I know that some components are not implemented yet or have bugs, but, maybe you can fix some and made a pull-request, IMHO, that's better than rebuild all the things.

Related Solutions

Css – How to make Twitter Bootstrap menu dropdown on hover rather than click

To get the menu to automatically drop on hover then this can achieved using basic CSS. You need to work out the selector to the hidden menu option and then set it to display as block when the appropriate li tag is hovered over. Taking the example from the twitter bootstrap page, the selector would be as follows:

ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;    
}

However, if you are using Bootstrap's responsive features, you will not want this functionality on a collapsed navbar (on smaller screens). To avoid this, wrap the code above in a media query:

@media (min-width: 979px) {
  ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
  }
}

To hide the arrow (caret) this is done in different ways depending on whether you are using Twitter Bootstrap version 2 and lower or version 3:

Bootstrap 3

To remove the caret in version 3 you just need to remove the HTML <b class="caret"></b> from the .dropdown-toggle anchor element:

<a class="dropdown-toggle" data-toggle="dropdown" href="#">
    Dropdown
    <b class="caret"></b>    <-- remove this line
</a>

Bootstrap 2 & lower

To remove the caret in version 2 you need a little more insight into CSS and I suggest looking at how the :after pseudo element works in more detail. To get you started on your way to understanding, to target and remove the arrows in the twitter bootstrap example, you would use the following CSS selector and code:

a.menu:after, .dropdown-toggle:after {
    content: none;
}

It will work in your favour if you look further into how these work and not just use the answers that I have given you.

Thanks to @CocaAkat for pointing out that we were missing the ">" child combinator to prevent sub menus being shown on the parent hover

Jquery – How to bind Twitter Bootstrap tooltips to dynamically created elements

Try this one:

$('body').tooltip({
    selector: '[rel=tooltip]'
});

Best Answer

Related Solutions

Css – How to make Twitter Bootstrap menu dropdown on hover rather than click

Jquery – How to bind Twitter Bootstrap tooltips to dynamically created elements

Related Topic