CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Abdus Sattar Bhuiyan
Abdus Sattar Bhuiyan

Reputation: 3074

bootstrap allows more than 12 columns in a row.

inside a div containing class span9 there are 3 child div containing span4 class, which proves it is possible to make row of 12 columns inside 9 columns. Even this 12 columns does not cover the 100% width of 9 columns. enter image description here 

<div class="span9">
            <div class="span4 col-sm-offset-2" id="uniform-requiredMonth">
            <span>June</span><select name="data[User][dob][month]" id="requiredMonth" class="span3 text" style="opacity: 0;">
            </select>
            </div>
         <div class="selector span4 col-sm-offset-2" id="uniform-requiredDay"><span>8</span><select name="data[User][dob][day]" id="requiredDay" class="span3 text" style="opacity: 0;">
            </select>
        </div> 
        <div class="selector span4 col-sm-offset-2" id="uniform-requiredYear"><span>2015</span><select name="data[User][dob][year]" id="requiredYear" class="span3 text" style="opacity: 0;">
            </select>
     </div>
  </div>

it does not make sense to me. Any help will be appreciated. Thanks in advance.

Upvotes: 1

Views: 2792

Answers (1)

Andrew Day
Andrew Day

Reputation: 607

Layoutit code generator

Use the above code generator which will give you an easy way to nest columns. Start by deleting the Hello World jumbotron, then add a 6 6 grid(from the grid system side menu) then a nested 4 4 4 grid in each. The downloadable output code will show the nesting which is easy to see. Note the clearfix tags are just clearing any floating commands used in surrounding code, the grid divisions menu choices(in the side bar itself) can be over written ie the 2nd one down is 6 6 so just delete them and add 3 3 3 3 (with space as the divider), if you then add this to the two 6's as initially given above you end up with 8 columns of 1.5 width great.

Also in Chrome browser, you can right click and inspect elements (CTRL+Shift+I) and see padding and margins in a diagram on the right hand side which I find very cool.

Upvotes: 2

Related Questions