CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
JuanM
JuanM

Reputation: 31

respect 3 columns in bootstrap3

I am trying to create a page with Bootstrap. The idea is create 3 columns on the left show star (links), in center a word "Infilmtrats" in Catalan, and right other stars (other links)

But it deforms both computer, mobile and tablet. I would like to look good in the 3 devices...

Mobile devices in the 2nd column is not centered , and third jumps to the next line ( after the word " infilmtrats " ) .

You know some idea? I'm trying to "float" but no way , I spend my code.

Thank you very much .

CURRENT. http://www.infilmtrats.com/interrogatorios/

YES, SHOULD 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>

Upvotes: 3

Views: 46

Answers (2)

hungerstar
hungerstar

Reputation: 21695

You need to use the column classes of the grid system. By default there are 12 columns in the grid system. If you want 3 columns then divide 12/3 = 4 to get how wide each column should be.

<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 that are associated with the columns (xs, sm, md, lg) determine at what point the columns will become full width and begin stacking.

Upvotes: 0

zgood
zgood

Reputation: 12581

You need to add your column divs. Like this:

<div class="row">

<div class="col-sm-4">
  <div class="pull-left"> ... <div>
<div>

<div class="col-sm-4">
  <div class="centered"> ... <div>
<div>

<div class="col-sm-4">
  <div class="pull-right"> ... <div>
<div>

</div>

Upvotes: 1

Related Questions