CODEWITHSUNDEEP
csstwitter-bootstraptwittergrid
user962206
user962206

Reputation: 16117

Twitter bootstrap 3 x 3 row and column

Here's my markup.

<div class = "row fluid"> 
<div class="span4">

             <div class ="well row">

                    <div class = "span3">                   
                    <a> 
                     <img src="img/albumart/2a.jpg" width="80" height="80" /> 
                     <p>Name here</p>
                    </a>
                    </div>


                    <div class = "span3">                   
                    <a> 
                     <img src="img/albumart/2a.jpg" width="80" height="80" /> 
                     <p>Name here</p>
                    </a>
                    </div>

                    <div class = "span3">                   
                    <a> 
                     <img src="img/albumart/2a.jpg" width="80" height="80" /> 
                     <p>Name here</p>
                    </a>
                    </div>

                            <div class = "span3">                   
                    <a> 
                     <img src="img/albumart/2a.jpg" width="80" height="80" /> 
                     <p>Name here</p>
                    </a>
                    </div>


                    <div class = "span3">                   
                    <a> 
                     <img src="img/albumart/2a.jpg" width="80" height="80" /> 
                     <p>Name here</p>
                    </a>
                    </div>

                    <div class = "span3">                   
                    <a> 
                     <img src="img/albumart/2a.jpg" width="80" height="80" /> 
                     <p>Name here</p>
                    </a>
                    </div>

                        <div class = "span3">                   
                    <a> 
                     <img src="img/albumart/2a.jpg" width="80" height="80" /> 
                     <p>Name here</p>
                    </a>
                    </div>

                        <div class = "span3">                   
                    <a> 
                     <img src="img/albumart/2a.jpg" width="80" height="80" /> 
                     <p>Name here</p>
                    </a>
                    </div>
            </div>
    </div>


<div>

What I am string to achieve is a 3 x 3 row and column however the result is like this

enter image description here

How do I create a 3 x 3 row and column?

Upvotes: 1

Views: 4227

Answers (3)

Artistan
Artistan

Reputation: 2037

I am surprised by some of the answers. Here is a simplified version with the newest bootstrap version. Look here for more details on sizes of grid columns.

  <div class="container-fluid">
    <div class="row">
     <div class="col-md-4">1</div>
     <div class="col-md-4">2</div>
     <div class="col-md-4">3</div>
    </div>
    <div class="row">
     <div class="col-md-4">1</div>
     <div class="col-md-4">2</div>
     <div class="col-md-4">3</div>
    </div>
    <div class="row">
     <div class="col-md-4">1</div>
     <div class="col-md-4">2</div>
     <div class="col-md-4">3</div>
    </div>
  </div>

Upvotes: 2

Carol Skelly
Carol Skelly

Reputation: 362350

Use row instead of row-fluid, and the well should be inside your span4..

<div class="container">
  <div class="row">
     <div class="span4">
        <div class="well">..</div>
     </div>
     <div class="span4">
        <div class="well">..</div>
     </div>
     .....
  </div>
</div>

Demo: http://bootply.com/79364

If you want the well surround the entire 3x3 grid, wrap the container inside a well (see #2 in the bootply: http://bootply.com/79364)

Upvotes: 0

Prasanna Aarthi
Prasanna Aarthi

Reputation: 3453

Please check this, I think it should be row-fluid and not row fluid, second thing is you have to use seperate rows and place your spans inside them..

For a 3*3 grid, 

 <div class="row-fluid">
 <div class="span12">
 <div class="span4">1</div>
 <div class="span4">2</div>
 <div class="span4">3</div>
 </div>
 </div>
 <div class="row-fluid">
 <div class="span12">
 <div class="span4">4</div>
 <div class="span4">5</div>
 <div class="span4">6</div>
 </div>
 </div>
 <div class="row-fluid">
 <div class="span12">
 <div class="span4">7</div>
 <div class="span4">8</div>
 <div class="span4">9</div>
 </div>
 </div>

Upvotes: 0

Related Questions