using boostrap "col" attributes inside a portlet

[A D, geändert vor 8 Jahren.]

Hello,

I am developping a portlet and I would like to use boostrap to give it a nice look.

I can load and use the bootstrap css classes and js scripts correctly.
However, the col-xs-12, col-sm-12 ... classes, that I usually use to position controls into forms, do not seem to work.

For instance:
<input type="text" class="form-control col-xs-12" id="test" placeholder="teest2">
does NOT display the input with width =100% of portlet'width.
It sticks to 15% of the portlet's width or so.

I can I solve this?

Thx in advance.

[David H Nebinger, geändert vor 8 Jahren.]

The problem you have is that the portlet is not responsible for it's placement on the page, the portal is. If you look at the dom heirarchy for your portlet you'll probably find that you're sitting within a defined column already.

[A D, geändert vor 8 Jahren.]

Hi David,

thanks for your answer.
I am not sure if I was clear.
I was not talking about the position fo the portlet on the page. This is indeed managed by the layout.

I was actually talking about the position of the controls (forms, buttons, inputs, selects...) inside the portlet itself.
I don't think this is managed by the layout, is it?
For instance, I wanted in my example below, I wanted the input to take the whole width of the portlet (whatever the width of the portlet on the page).

Hope I clarified my question.

[A D, geändert vor 8 Jahren.]

I got the answer from stackoverflow. I will post it here in case it once helps someone else.
Liferay only supports bootstrap 2.

col-xs-12, col-md-12 etc... come from bootstrap 3 and thus are not Liferay supported.
In order to set controls position into portlets, we need to stick to Bootstrap 2 and use "span12" and "offsetX" tags.