Using Twitter Bootstrap to build responsive layouts
JavaScript
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
bootstrap-2-columns-sample-layouttpl
bootstrap-layout-demo-theme
README.md
bootstrap.css

README.md

Building Responsive Layouts in Liferay with Twitter Bootstrap

Twitter Bootstrap is a popular, easy-to-use front-end framework that not only allows for rapid prototyping, but also comes with a robust set of features that let you easily implement a responsive design.

If you're building a site from scratch, all you have to do is include the Bootstrap CSS and JavaScript, and you're off to the races! When you're working with Liferay, though, it's a bit more complicated than that. Of course, it is possible to create a new theme, drop the big bundle of Bootstrap files in there, and start running with it; but there are a lot of Bootstrap UI features that conflict messily with default Liferay styles, especially the Dockbar and Control Panel. We'll handle workarounds for some of these in a future post; but for today, we'll concentrate on the most powerful and useful feature of Bootstrap, responsive layouts.

If you've come here from elsewhere, check out the full blog post here.