How to include latest bootstrap 5 javascript library into a modern GWT application

Question

I know there are some outdate and deprecated / no more supported projects like GWT-Bootstrap (https://github.com/gwtbootstrap/gwt-bootstrap) and gwtbootstrap3 (https://github.com/gwtbootstrap3/gwtbootstrap3) who integrate the Bootstrap library into GWT projects, however I know it's possible to use standard javascript Bootstrap library (https://getbootstrap.com/) into a modern GWT App (for modern I mean 'at the ages of 2025' using for example the Thomas Broyer Maven artifact). I know for example it should be possible to include it as a Maven dependency this way:

<dependency>
 <groupId>org.webjars</groupId>
 <artifactId>bootstrap</artifactId>
 <version>5.3.7</version>
</dependency>

The question is: is there a guide, a tutorial, some documentation or an article online or could someone explain how to use it with a demonstration?

Answer 1

You can use the modern standard way to integrate Bootstrap as a third-party JS-library into your GWT application.

1. Maven dependency:

<dependency>
 <groupId>org.webjars</groupId>
 <artifactId>bootstrap</artifactId>
 <version>5.3.7</version>
</dependency>

2. Including Bootstrap CSS and JS in the host HTML:

Use WebJar locator or manually reference.

<link rel="stylesheet" href="webjars/bootstrap/5.3.7/css/bootstrap.min.css" />
<script src="webjars/bootstrap/5.3.7/js/bootstrap.bundle.min.js"></script>

3. Using Bootstrap styles in GWT widgets:

For Bootstrap's JS-driven components (modals, dropdowns, tooltips), you’ll need to initialize them manually via JSNI or JsInterop calls, as GWT widgets do not automatically handle Bootstrap's data attributes like data-bs-toggle.

@JsMethod(namespace = "bootstrap")
public static native void Modal(Element element);
public void initModal(Element modalElement) {
 Modal(modalElement);
}

4. Using JsInterop for Bootstrap JS API:

@JsType(isNative = true, namespace = "bootstrap", name = "Modal")
public class Modal {
 public Modal(Element element) {}
 public void show() {}
 public void hide() {}
}
Element modalEl = Document.get().getElementById("myModal");
Modal modal = new Modal(modalEl);
modal.show();

Official documentation

5. Handling Bootstrap's data attributes:

myWidget.getElement().setAttribute("data-bs-toggle", "dropdown");

Or create custom widgets that expose setters for these attributes.

6. Using the component in UiBinder:

<g:HTMLPanel>
 <g:Button ui:field="showModalButton" styleName="btn btn-primary">
 Launch demo modal
 </g:Button>
 <div class="modal fade" ui:field="myModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
 </div>
 <div class="modal-body">
 This is a Bootstrap 5 modal controlled by GWT and JsInterop!
 </div>
 <div class="modal-footer">
 <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
 <button type="button" class="btn btn-primary">Save changes</button>
 </div>
 </div>
 </div>
 </div>
 </g:HTMLPanel>
</ui:UiBinder>

7. Using in Java View:

import elemental2.dom.HTMLDivElement;
import jsinterop.base.Js;
public class MyView extends Composite {
 interface MyViewUiBinder extends UiBinder<Widget, MyView> {}
 private static MyViewUiBinder uiBinder = GWT.create(MyViewUiBinder.class);
 @UiField
 Button showModalButton;
 @UiField
 HTMLDivElement myModal;
 private BootstrapModal modal;
 public MyView() {
 initWidget(uiBinder.createAndBindUi(this));
 }
 @Override
 protected void onAttach() {
 super.onAttach();
 ModalOptions options = ModalOptions.create(true, "static", true);
 this.modal = new BootstrapModal(myModal, options);
 myModal.addEventListener("shown.bs.modal", evt -> {
 GWT.log("Modal was shown");
 });
 
 myModal.addEventListener("hidden.bs.modal", evt -> {
 GWT.log("Modal was hidden");
 });
 }
 
 @Override
 protected void onDetach() {
 super.onDetach();
 if (this.modal != null) {
 this.modal.dispose();
 }
 }
 @UiHandler("showModalButton")
 void onShowModalClick(com.google.gwt.event.dom.client.ClickEvent e) {
 if (this.modal != null) {
 this.modal.show();
 }
 }
}