Continuing with my series of "New in 6.2" entries, today I want to put the focus on a more technical aspect of the new version: the fact that it provides support for Twitter Bootstrap out of the box. Some of the benefits of this are:

• Themes built for Liferay can be based on Bootstrap themes. And there are quite a few of them.
• Portlet developers can use the bootstrap mark-up and bootstrap components to build a nice looking UI faster. That include using responsive layouts.
• Content authors can use bootstrap mark-up and styles to create beautifl looking advanced content that looks nice and is consistent with the rest of the UI.

The first two points are more technical and for an audience of developers, so they'll be covered in more detail elsewhere, so I want to focus on the last point. The ability to use bootstrap for webcontent is actually a side effect of its use everywhere else, but it's definitely a very useful side effect :)

Since Bootstrap already has good documentation that you can access following the links above I won't try to do an in-depth explanation. Instead I've chosen 3 examples of content where I think applying bootstrap can be useful. 

#1 Nicely formatted tables

When you create a table in a new web content it looks more or less like this:

Which looks ok, but not so good. In order to apply some of the bootstrap you will need to have a little bit of HTML knowledge. While editing the web content click on the "Source" button. Locate the <table> tag which will look something like this:

<table border="1" cellpadding="1" cellspacing="1" style="width: 500px;">

And change it so that it looks like this:

<table class="table table-striped table-bordered">

Each of these values of the class attributes provides one feature:

• table sets the base styles
• table-striped colors alternative rows differently
• table-bordered draws the borders around the table. 

It's worth mentioning that the WYSIWYG editor is not aware of bootstrap, so just getting out of the "Source" mode won't be enough to preview your changes. What you can do is click the "Basic Preview" button at the top of the web content form. 

Just by making this small change your table will look like this:

If you are a bit averse to HTML (or your content is so large that editing the HTML is a pain) you can also achieve the same effect by double clicking in the table to open the properties dialog. Click on the advanced tab and in the "Stylesheet Classes" field enter "table table-striped table-bordered " as shown in the next image:

Clear any styling (specially widths) in other fields and click ok. Preview the content or publish it to check the same result was obtained.

If you are interested in more options that bootstrap tables provides you can check it's official documentation.

#2 Image effects

Bootstrap provides 3 nice effects for images: rounding the borders, making them a circle and adding a polaroid-like fame around it. In order to benefit from this you don't even need to edit the HTML. Go ahead and insert an image with the image dialog as you normally would. For example, let's pick an image of Brian from our about us page. Click the image button in the WYSIWYG editor toolbar. After uploading the image or introducing the URL click the advanced table and enter one of the following values in the "Stylesheet Classes" field:

• img-rounded for rounded corners
• img-circle to get an image with the shape of a circle
• img-polaroid to get a nice frame around the image

If there is any value in the Style field, clear it to avoid conflicts with the bootstrap styles. Here are the results I got for each of the styles:

Cool, right?

#3 Responsive layouts and menus

This is the last and most advanced example. Here you will definitely need to have some HTML knowledge. 

The first thing you need to know is that Bootstrap uses a 12 column grid to lay things out in a page. So when using bootstrap you should think of your page as something like this:

You then specify for each item how many columns it spans. Something like this:

1. <div class="row-fluid">
2. <div class="span4">...</div>
3. <div class="span8">...</div>
4. </div>

You can then add anything in each of those DIV's.  What is nice, is that on smaller screens, like those of phones, the columns will become fluid and display below each other. Instead of doing a simple example like I've done in the previous two cases, what I'm going to try this time is take one of the more advanced examples that are provided in the twitter page. Here are the steps I have followed:

1. From a Liferay page, click add > content and then create new (Basic) Web Content. 
2. Give it a title and click the "Source" button in the editor.
3. Pick one example (I picked the one titled "Fluid Layout"). View the HTML and copy the source code inside the <body> tag (without the <script> tags at the bottom)
4. Paste the HTML inside the editor.
5. Publish. 

This is the result:

Three things to note from this screenshot are:

• Even the most complex bootstrap samples can work inside a Liferay web content. There are tons of possibilities. 
• But you must use them with care. If you look at the top of the screenshot you will see that the sample I picked added a black bar positioned at the top of the page. This bar hides the Liferay dockbar, which is definitely not desired. I did this to prove how the fact that you can do something, it doesn't mean it's desired :)  In this specific case you can avoid that effect by looking at the HTML code you copied and remove the class navbar-fixed-top. In general try to avoid using the classes that contain the word "fixed" inside a web content unless you really mean it.
• You may need to do some CSS tweaking so that it looks pixel perfect in your scenario. In this case the menu would look better without the padding, which in the original Bootstrap example remove with a CSS definition in the page.

If you liked this and want to learn more, my recommendation is to read the nice documentation for Bootstrap 2.3.2.