@Jouni - you are my hero.
I think, vaadin needs a new ‘modern’ default theme and you are the person which encourages my hopes that this will happen one day.
I have problems to use it in my own project if I just copy and paste the theme and the enum. I will get lots of warning, errors and file not found exceptoions.
I’m very new in vaadin. It would be cool to have a simple and quick ‘how to use’ document. I’ll try it on my own and provide such a document if i was successful.
Regards
Well, that’s what we think as well, and I’ve been working on a new Sass based theme for quite a while now, which should be ready for beta when 7.2 is released.
Sorry to hear that. The only thing you should need to do is to copy the “bootstrap” theme folder over to your projects VAADIN/themes folder and copy the Bootstrap.java to your src folder. Then set the theme for your UI instance with the @Theme annotation.
If you wish to extend the theme, I would recommend that you just import the “styles.css” file directly, and not the “bootstrap.scss” file, there aren’t really any useful mixins, functions or variables that you can use from it.
Good evening Jouni,
I’m looking forward to test the 7.2 beta! Three more month to go (
Roadmap
).
I did your steps before my post. It’s the sass compiler which means that it does not find files like typography.css. I have to investigate this.
Thanks for your fast reply! Vaadin has a vital community. Great to feel the spirit. 
Regards,
Hi folks,
@Jouni Do you know a (beta) release date for the new theme?
Vaadin is great - except of the themes for version 7.x
Thanks for the information!
I would love to have this feature… For some people and businesses, how your application looks (sadly) is as important as functionality…
I can’t stress out how important Themes and making us java developers “look good” is. By enabling tools to help us to that end is crucial when deciding which tool/framework to use.
~rick
I’ve found that without too much fuss (obviously objectional :D) you can integrate Twitter’s bootstrap components with the CustomLayout. An example below shows adding a dropdown button component.
First
Make the bootstrap.css or bootstrap.min.css file somewhere accessible to your theme’s css via an @import “path/to/file”;
Second
Make sure jquery and boostrap js files are available to your CustomLayout via the @JavaScript annotation. You can add this at the UI class so that the javascript is added to the head of the base html page. Make sure that you put the javascript files in the same src directory that your UI class is in (i.e src/com/example/bootstraptest/javascript.js). They won’t load correctly if they’re somewhere under your WebContent folder. Also, it’s important to put the jquery file first in the array since bootstrap requires it to run.
@JavaScript( value = { "jquery-1.11.0.min.js", "bootstrap.min.js" })
Third
Make sure you have the html file available under your /VAADIN/themes//layouts directory
button.html:
Note:
I’ll be inserting a button where bootstrap demo code had an tag. I wanted to be able to have a ClickListener that would allow me to act however I wanted with the click on the dropdown menu item.
<div class="btn-group">
<a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</a>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><div location="userBtn"><a href="#"><i class="icon-pencil"></i></a></div></li>
<li><a href="#"><i class="icon-trash"></i> Delete</a></li>
<li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
<li class="divider"></li>
<li><a href="#"><i class="i"></i> Make admin</a></li>
</ul>
</div>
Fourth
You’ll need to make some custom css wrappers for the Vaadin component to play nicely with the bootstrap styles. You can simply add these to your .scss file, make some mixins, or whatever.
.dropdown-menu-button {
color: #333;
display: block;
padding: 3px 20px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.428571429;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
background-image: none;
border: none;
border-radius: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.dropdown-menu-button:hover {
background: #fdfdfd;
}
Finally
Put it all together! The good news is that once you figure out how to do it once, you can more quickly integrate components all over. The custom css wrappers typically only need to be set up once and then you can re-use them as needed.
@Theme("theme-name")
@JavaScript( value = { "jquery-1.11.0.min.js", "bootstrap.min.js" })
public class BootstrapTestUI extends UI {
@WebServlet(value = "/*", asyncSupported = true)
@VaadinServletConfiguration(productionMode = true, ui = BootstrapTestUI.class)
public static class Servlet extends VaadinServlet {
}
@Override
protected void init(VaadinRequest request) {
CssLayout layout = new CssLayout();
layout.setSizeFull();
setContent(layout);
final Button btn = new Button("User");
btn.setPrimaryStyleName("dropdown-menu-item");
btn.addClickListener(new ClickListener() {
@Override
public void buttonClick(ClickEvent event) {
Notification.show("You clicked the dropdown-menu-item!");
}
});
CustomLayout cl = new CustomLayout("button");
cl.setSizeFull();
cl.addComponent(btn, "userBtn");
layout.addComponent(cl);
}
}
Some things to be aware of:
One thing to note when using the CustomLayout, if you haven’t accounted for that responsive html content popping on screen, you’ll need to make room for them. If the CssLayout I used in the example didn’t have the setSizeFull() (or at least some setHeight() size to increase the size) method called, I wouldn’t be able to see the dropdown menu offered by the button when clicked.
Adding static content is always easier of course. If you wanted to add a button and just style it like a bootstrap button you could stick with using the setPrimaryStyleName() / setStyleName() / addStyleName() for whatever was appropriate.
One project I’m working on right now is integrating a bootstrap ui with CustomLayout as my primary layout containers and judiciously using my location=" tags. This essentially lets me work with an html layout and css (check out
layoutit.com
for some cool layout helpers for us non web designer guys), yet handle my server side business logic with my vaadin components, and more importantly
JAVA!
.
They can also dynamically update my html with page by injecting different CustomLayout templates… you get the picture hopefully. Tie that in with a Navigator component, and you can serve what seems to be a purely html/css/javascript driven project with Vaadin and Java behind the scenes (even though that’s technically what Vaadin ultimately spits out anyways). I guess its a psuedo .jsp … but without having to learn jsp.
Interesting approach, totally not what what you normally should be using Vaadin for – but hey, if it works
After I started my hack for the Bootstrap CSS, there’s now actually a Sass based version of it available, which should perhaps more flexible to use. Haven’t investigated yet, but I hope I get a chance at some point.
I started learning Java about 5 months ago and have zero web design experience. In fact, I’m relatively new to coding/programming in general, so regardless of Java, any web framework would take time to learn and understand for me. The Vaadin paradigm was very appealing because the framework is very user friendly for people like me, but it’s complex enough for the people who really know what they are doing as well. The first project we did with Vaadin is very similar to the Dashboard demo. The layout was done completely with the Vaadin server side approach, no crazy gimmicks.
However, doing a lot of customization on the CSS theme proved to be difficult if we were trying to closely immitate some example site we’d seen. I needed to come up with a way that would allow me to benefit from some of the other web development tools that were out there, like quickly mocking up a page design with an html/css tool and figuring out an easy way to implement that skeleton design into our project. Several tools often allow you to build and then download on the spot, and getting that into Vaadin wasn’t easy for me to do initially.
I definitely agree this is not a conventional approach to using Vaadin. However, this opens the door for me to use anyone’s theme regardless of it being bootstrap. And, since most themes are built with the html and css closely intertwined, its difficult to just adopt just css side on its own. This also provides a way to take care of importing the javascript needed to accompany these other themes with relative ease.
All in all, I just think that Vaadin is a really versatile framework. It allows users to not only follow the guidelines laid out in documentation, but it also allows users to do unconventional and completely ludicrious things like I’ve tried, and get results.
Hi all
Do you know if a tutorial to integrate the
Official Sass port of Bootstrap
in Vaadin is available somewhere?
Sorry but I’m new to Vaadin the Readme on github didn’t help me a lot 
Thanks,
Paolo
Hi,
Sorry, I’m quite sure there’s no good tutorial on that subject for now. If you plan to start the integration, you can ask for some help here if you want.
I’m trying to integrate the Official Saas port of Bootstrap. I encountered a problem when the ‘@import "bootstrap.scss’ is performed by vaadin.
When parsing varaibles:
$state-success-bg: #dff0d8 !default;
$state-success-border: darken(adjust-hue($state-success-bg, -10), 5%) !default;
the ColorUtil.class (line 270) method public static float colorToHsl(LexicalUnitImpl color) gets 'Lexical unit node [adjust-hue(#dff0d8, -10)]
’ as the color argument. (As i debugged, this method should receive #rgb or #rrggbb) This is some kind of parser error? Or simply lack of adjust-hue method?
As you said, It looks like adjust-hue function might be missing. If you can create a reduced test for that, and create a ticket about it, it would great!
There’s actually a 4 month old ticket about adjust-hue() not working: http://dev.vaadin.com/ticket/13982
Hello guys,
Is there any new progress in integrating bootstrap in Vaadin?
Thanks.
I’m trying to integrate Boostrap-sass with Vaadin, but the Vaadin Sass compiler can’t compile boostrap …
You might want to try this approach, to replace the Vaadin Sass compiler with libsass: https://github.com/pleku/vaadin-libsass
Thanks, I’ll try that 
Ok guys, I manage to make it work ! Here is my solution
[code]
<plugin>
<groupId>com.github.warmuuh</groupId>
<artifactId>libsass-maven-plugin</artifactId>
<version>0.2.8-libsass_3.4.4</version>
<executions>
<execution>
<phase>generate-resources</phase>
<goals>
<goal>compile</goal>
</goals>
</execution>
</executions>
<configuration>
<enableClasspathAwareImporter>true</enableClasspathAwareImporter>
<outputStyle>compressed</outputStyle>
<inputPath>${basedir}/src/main/resources/VAADIN/themes/mytheme/</inputPath>
<outputPath>${basedir}/src/main/resources/VAADIN/themes/mytheme/</outputPath>
</configuration>
</plugin>
[/code]The following line in the config allow libsass to find scss file on the classpath (for Instance the Valo theme)
<enableClasspathAwareImporter>true</enableClasspathAwareImporter>And my SCSS file starts with:
[code]
@import “VAADIN/themes/valo/valo”;
.mytheme {
@include valo;
@import "META-INF/resources/webjars/bootstrap-sass/3.3.7/stylesheets/_bootstrap.scss";
}
[/code]I needed to wrap Bootstrap in my theme so that it does not interfere with the site embedding the App (I’m using the CORS integration)
As you can see, I use the WebJar dependency for Bootstrap
<!-- https://mvnrepository.com/artifact/org.webjars/bootstrap-sass -->
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap-sass</artifactId>
<version>3.3.7</version>
</dependency>I hope it may help others trying to achieve similar things
Adrien
Just giving my first steps with Vaadin, I’ve been trying to workout the “responsive design which could provide a vaadin interface working well in desktop, tablets and phones” part with Bootstrap 4 and Vaadin 14 and came up with a simple and straightforward solution.
In a documentation page explaining what’s include in Bootstrap, in a section dedicated to [CSS Files]
(https://getbootstrap.com/docs/4.4/getting-started/contents/#css-files), they state that “Bootstrap includes a handful of options for including some or all of our compiled CSS.”, which comes in 3 flavors:
By only including their Grid CSS, I can now play with CSS classes to create responsive layouts. For those not familiar with Boostrap I recommend going through the following sections of their documentation: