Respect 3 columns in bootstrap3
I am trying to create a page with Bootstrap. The idea is to create 3 columns on the left star (links), in the center of the Catalan word "Infilmtrats" and on the right of the other stars (other links)
But it deforms the computer, mobile and tablet. I would like to look good in three devices ...
The mobile devices in the second column are not centered, and the third moves to the next line (after the word "infilmtrats").
Do you know any idea? I try to "float", but no way, I spend my code.
Many thanks.
CURRENT. http://www.infilmtrats.com/interrogatorios/
YES, MUST BE http://oi60.tinypic.com/28b8mu0.jpg
<div class="row">
<div class="pull-left"><br/><br/><br/>
<p><img src="start.gif" alt="estrella" width="52" height="47" class="size-full wp-image-302" /></p>
</div>
<div class="centered" style="text-align: center;">
<h1 style="color: #ffffff;">I<br /> N<br /> T<br /> E<br /> R<br /> R<br /> O<br /> G<br /> A<br /> T<br /> O<br /> R<br /> I<br /> O<br /> S<br /> </h1> </div>
<div class="pull-right">
<p><img src="start.gif" alt="estrella" width="52" height="47" class="aligncenter size-full wp-image-302" /></p>
</div>
source to share
You need to use the grid system column classes . By default, the grid has 12 columns. If you want 3 columns divided by 12/3 = 4 to know how wide each column is.
<div class="row">
<div class="col-xs-4">
Left
</div>
<div class="col-xs-4">
Center
</div>
<div class="col-xs-4">
Right
</div>
</div>
The various sizes associated with the columns ( xs
, sm
, md
, lg
), it is determined at what moment the complete width of the columns and will begin stacking.
source to share