bootstrap-for-vaadin
Bootstrap for Vaadin
This add-on helps the developer to use Bootstrap components in a Vaadin project.
It contains Java wrappers for:
- Alerts
- Badge
- Breadcrumbs
- Buttons
- Button Group
- Card
- Collapse
- NavBar
- Listgroup
- Form Layout
- Responsive Grid Layout
Some common classes for layout:
- Color
- Spacing
- Display
- Borders
The add-on does not import any Bootstrap theme. You need to import a Bootstrap 4 theme in your Vaadin project to use the component. This will allow you to use the vanilla bootstrap theme or your own bootstrap theme.
The demo contains a "translation" of the official bootstrap documentation. It's still incomplete.
How to start
You can find a documentation to import your theme here: https://github.com/jcgueriaud1/vaadin-bootstrap/blob/master/docs/IMPORT_CSS_JS.md
And a minimal example with Spring Boot and Bootstrap 4.5 can be found here: https://github.com/jcgueriaud1/springboot-bootstrap-example
Limitations:
- The Vaadin components are not styled. I recommend to use Lumo and change the default variables (like primary color,...). It's a long work to make a Vaadin theme that will work for all bootstrap theme.
- The default input components don't have any Java API. Use Vaadin input instead.
- This add-on does not provide anything related to Bootstrap add-on.
- You can't use the Bootstrap CSS classes inside shadow DOM.
Recommendations:
- This add-on is great if you already have an application that already use bootstrap and you want the same layout.
- You can use this add-on for layout (menubar, top, footer, responsive grid layout)
- I don't recommend to use this add-on if you're not familiar with bootstrap or if you start a brand new application without specific requirements for the theme.
Links
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
- Released
- 2020-09-07
- Maturity
- EXPERIMENTAL
- License
- MIT License
Compatibility
- Framework
- Vaadin 14+
- Browser
- Browser Independent
bootstrap-for-vaadin - Vaadin Add-on Directory
Bootstrap for VaadinIssue tracker
View on GitHub