Bootstrap is one of the most common templates used for website Design. This example shows how one can embed Vaadin applicaiton into a Bootsrap site. Technically speaking we are doing it the vica versa: we are taking in CSS and html snippets from a Bootstrap example and embedding those into a Vaadin application.
There are many ways to accomplish this kind of integration, of which two are showcased in this repository. The examples are examples and the principles used can be adapted to other integrations as well.
The master branch uses shadow dom and wraps (almost all) Bootstrap CSS into those, so that they can't disturb the actual Vaadin application. We take the header and footer from the Bootstrap example and render a Vaadin application to the main area of the page.
Things to check out in this implementation:
- bootstrap-element.ts that provides a superclass for "bootstrap Lit templates". The main Bootstrap CSS is defined in this class (pulled in via npm) and will only be applied to shadow dom of the extending "bootstrap components".
- WebsiteHeader.java and website-header.ts which wrap the header part of the example into a Lit template and a shadow DOM snippet.
- Similar WebsiteFooter class
- MainLayout.java that is used by the MainView example view. That brings in the "Bootstrap components" and places the actual view in middle.
- shared-styles.css contains the custom css in the original example and a subset of Bootstrap CSS that needed outside the header and footer that are encapsulated inside shadow dom.
If shadow dom protection is not essential for you, a rather similar integration can be accomplished in a slightly simpler manner using Html component or low level Element API and with StyleSheet annotation.
The "modified_index_html" branch shows a bit simpler method. There we simply modify the Vaadin generated "host page" to include the same example page, but instead of the default content we render a Vaadin application, like in the previous.
Things to check out in this implementation:
- The index.html file, which is now committed over the default index.html file that gets generated by Vaadin. The file contains pretty much the same as in the original Bootstrap Pricing example, but the Vaadin content div element is in the main part instead of the main content.
- The resources directory, where static files are to be put in a Spring Boot project. This is where I put all the Bootstrap resources.
Note, the generated index.html file is only available in the most recent Vaadin Flow versions. If you are using Vaadin 14 series, similar effect can be accomplished using Java API and/or BootstrapListener.
There are two ways to run the application : using mvn spring-boot:run or by running the Application class directly from your IDE.