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?
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 ;)
Comments
Post a Comment