Bootstrap more then 12 units

Question

sometimes it works perfect, sometimes i have big problems with the following ..

Can i write it like this?

<div class="container">
   <div class="row">
      <div class="col-md-4">
         Testing ...
      </div>
       <div class="col-md-4">
         Testing ...
      </div>
       <div class="col-md-4">
         Testing ...
      </div>
       <div class="col-md-4">
         Testing ...
      </div>
   </div>
</div>

Or does i have to seperate each "row"?

<div class="container">
       <div class="row">
          <div class="col-md-4">
             Testing ...
          </div>
           <div class="col-md-4">
             Testing ...
          </div>
           <div class="col-md-4">
             Testing ...
          </div>
       </div>
    </div>

   <div class="container">
       <div class="row">
          <div class="col-md-4">
             Testing ...
          </div>
       </div>
    </div>

in my current project the floating issn't correct so that the last column doesnt have the right margin..

please read this http://stackoverflow.com/questions/11591185/how-to-use-bootstrap-with-16-or-24-columns#answer-15173226 — HDP, Jun 16 '15 at 10:04

score 0 · Answer 1 · answered Jun 15 '15 at 08:16

Either you can use smaller units instead of larger ones, i.e., .col-md-3 instead of .col-md-6 or use fluid layout.

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css");

<div class="container-fluid">
  <div class="row-fluid">
    <div class="container-fluid">
      <div class="col-md-4">
        <div class="row-fluid">
          <div class="container-fluid">
            <div class="col-md-4">
              <div class="row-fluid">
                <div class="container-fluid">
                  Col
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="row-fluid">
                <div class="container-fluid">
                  Col
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="row-fluid">
                <div class="container-fluid">
                  Col
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="row-fluid">
          <div class="container-fluid">
            <div class="col-md-4">
              <div class="row-fluid">
                <div class="container-fluid">
                  Col
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="row-fluid">
                <div class="container-fluid">
                  Col
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="row-fluid">
                <div class="container-fluid">
                  Col
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="row-fluid">
          <div class="container-fluid">
            <div class="col-md-4">
              <div class="row-fluid">
                <div class="container-fluid">
                  Col
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="row-fluid">
                <div class="container-fluid">
                  Col
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="row-fluid">
                <div class="container-fluid">
                  Col
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="row-fluid">
                <div class="container-fluid">
                  Col
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Do you have to use so many div and nested div? While this solution may be functionally correct, it is definitely an example of "DIV nightmare"! — Parth Shah, Jun 16 '15 at 02:56

score 0 · Answer 2 · answered Jun 15 '15 at 21:42

Your first example reacts exactly as it should. Any time you have more than 12 cols, the offending cols bump down to the next row (not .row which is different). Because you have 16 cols, the last group of 4 sits on next row.

To fit 16 sections on a single visible row (again, not .row), you will need to nest columns like so:

http://www.bootply.com/2VfLJXjcXt

<div class="container">
  <div class="row">

    <div class="col-md-3">
        <div class="row">
          <div class="col-md-3">
            Test1
          </div>
            <div class="col-md-3">
            Test2
          </div>    
          <div class="col-md-3">
            Test3
          </div>
            <div class="col-md-3">
            Test4
          </div>    
        </div>
    </div>
    <div class="col-md-3">
        <div class="row">
          <div class="col-md-3">
            Test5
          </div>
            <div class="col-md-3">
            Test6
          </div>    
          <div class="col-md-3">
            Test7
          </div>
            <div class="col-md-3">
            Test8
          </div>    
        </div>
    </div>
        <div class="col-md-3">
        <div class="row">
          <div class="col-md-3">
            Test9
          </div>
            <div class="col-md-3">
            Test10
          </div>    
          <div class="col-md-3">
            Test11
          </div>
            <div class="col-md-3">
            Test12
          </div>    
        </div>
    </div>
    <div class="col-md-3">
        <div class="row">
          <div class="col-md-3">
            Test13
          </div>
            <div class="col-md-3">
            Test14
          </div>    
          <div class="col-md-3">
            Test15
          </div>
            <div class="col-md-3">
            Test16
          </div>    
        </div>
    </div>

Bootstrap more then 12 units

2 Answers2