css - Bootstrap - I am not able to split the container in to columns by calculating by 12 -

i have div, need make 2 colum in that, 1 should have divided 4 sub colums, , column should full width.

i tried way, not result, me?

bootstrap fiddle

demo

my html , css:

<div class="row">     <div class="col-sm-6 col1">         <div class="col-sm-3">3 of 12 width</div>         <div class="col-sm-2">2 of 12 width</div>         <div class="col-sm-2">3 of 12 width</div>         <div class="col-sm-5">4 of 12 width</div>     </div>     <div class="col-sm-6 col2">         <div class="col-sm-12">12 of 12 width</div>     </div> </div> 

css:

.row{     border:2px dotted gray; }  .col1{     border:1px solid green; }  .col2{     border:1px solid blue; } 

you should surround row container

rows must placed within .container (fixed-width) or .container-fluid (full-width) proper alignment , padding.

then use row divide sub column like

 row    col-6      row        col-3        col-2 ...etc 

hope helps

oh, hum, try in simple web page (not jsfidle) on computer. jsfidle wasn't working me, maybe not handle bootstrap code well...

edit: dwza, test this

<div class="container"> <div class="row">     <!-- first col -->     <div class="col-sm-6 col1">         <!-- row inside col -->         <div class="row">             <!-- subcol inside col -->             <div class="col-sm-6">6 of 12 width</div>             <div class="col-sm-6">6 of 12 width</div>         </div>     </div>     <div class="col-sm-6 col2">         <div>12 of 12 width</div>     </div> </div> </div> 

on http://www.bootply.com/ , seems work ;)