Loading...
Important Notice - Forums is archived

To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Product icon
TUTORIAL

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Twitter's Bootstrap

Mario Bertschler
9 years ago Jun 29, 2012 10:20am

Anyone interested in implementing Twitter's Bootstrap in Vaadin? Shouldn't be too difficult because there is already a gwt-bootstrap implementation available.

Advantages:

- responsive design which could provide a vaadin interface working well in desktop, tablets and phones.
- a cool new theme with a lot of features

Last updated on Jun, 29th 2012
Antonio N
9 years ago Jul 13, 2012 1:03am
Alain Janssens
9 years ago Jul 31, 2012 11:49am
eric dumond
9 years ago Oct 08, 2012 3:21pm
Jouni Koivuviita
9 years ago Oct 09, 2012 7:05am
Pierre Le Roux
9 years ago Feb 09, 2013 10:29am
Andreas Höhmann
9 years ago Mar 08, 2013 7:59am
my isa
9 years ago Mar 08, 2013 10:05am
Jason Carreira
9 years ago Apr 11, 2013 12:52am
Anthony Davie
8 years ago May 20, 2013 10:15am
Henry He
8 years ago Jun 21, 2013 3:31pm
Daniel McGreal
8 years ago Jun 28, 2013 3:48pm
isabelle diez
8 years ago Aug 08, 2013 12:51pm
Jouni Koivuviita
8 years ago Aug 12, 2013 7:37am

Hi all,

I started looking into this again with a bit more scrutiny. I’ll add my observations here as I go along with all the parts of Bootstrap (looking at Bootstrap 3 RC1).

But as I said earlier, don't expect any quick wins here, since Bootstrap was designed and built in a way that expects you are in control of the HTML output of you project, and just sprinkle in the correct CSS class names. The LESS that produces the final CSS doesn't really offer much flexibility in altering those CSS class names, making it hard to match Vaadin’s HTML output to those class names. But let’s see what can be done, as we all agree it would be great to have these two awesome frameworks working together :)

Jouni Koivuviita
8 years ago Aug 12, 2013 8:54pm

So, after a couple of hours, here’s the initial result:

- It seems like it might actually be doable to style most of the Vaadin components just by using @extend from Sass
- I made a public project for this on GitHub, feel free to join in. I tried to structure the little bits after the Bootstrap documentation site, so people can find things easier.

Source: github.com/jounik/bootstrap-for-vaadin/
Demo: dev.jouni.me/bootstrap

isabelle diez
8 years ago Aug 13, 2013 5:42am
Steve B
8 years ago Aug 23, 2013 6:07pm
Andreas Bachmaier
8 years ago Sep 10, 2013 8:41am
Jouni Koivuviita
8 years ago Sep 10, 2013 10:57am
Jouni Koivuviita
8 years ago Sep 10, 2013 10:58am
Tobias Scholze
8 years ago Sep 24, 2013 6:17am
Jouni Koivuviita
8 years ago Sep 24, 2013 6:58am
Tobias Scholze
8 years ago Sep 24, 2013 5:45pm
Tobias Scholze
8 years ago Oct 21, 2013 4:43pm

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!

- Tobi

Rick Martinez
8 years ago Nov 26, 2013 3:11pm
Daniel Droke
8 years ago Jan 28, 2014 7:16pm
Jouni Koivuviita
8 years ago Jan 30, 2014 11:09am

Daniel Droke: 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.

https://github.com/twbs/bootstrap-sass

Daniel Droke
8 years ago Jan 31, 2014 8:29pm
Paolo Starace
7 years ago Jun 27, 2014 1:04pm
Jouni Koivuviita
7 years ago Jul 05, 2014 7:18pm
Miłosz Lorenc
7 years ago Sep 26, 2014 11:18am
Jouni Koivuviita
7 years ago Sep 26, 2014 11:30am
Herman Bovens
7 years ago Oct 12, 2014 10:07am
Eli Tsikel
4 years ago Jun 30, 2017 10:55am
Adrien Houdart
4 years ago Aug 30, 2017 8:37am
Jouni Koivuviita
4 years ago Aug 30, 2017 9:03am
Adrien Houdart
4 years ago Aug 30, 2017 9:06am
Adrien Houdart
4 years ago Aug 30, 2017 12:45pm
Rolando Isidoro
2 years ago Nov 29, 2019 12:27pm