i have layout design made 1200px / 15 cols framework, client wants use bootstrap. possible transform bootstrap 15 cols layout? havent seen such example online. i'm not huge fan of bootstrap small projects. trend don't understand. might heavy 5 pages website & projects done according content, not according framework, twitter-backed or not.
but, it.
if possible code 15 cols layout, give me hint on how begin? , how long take perform such adaptation?
if can run customized version of bootstrap, xengravity's answer way go.
however, if you're using vanilla bootstrap (perhaps cdn or legacy code) create desired effect little css tweaking , nested rows/columns.
start 3 column layout of col-xs-4, fill row
, 5 col-xs-* (i chose 3 close) , tweak width css. example:
<div class="container-fluid"> <div class="row"> <div class="col-xs-4"> <div class="row"> <div class="col-xs-3 fixed">1</div> <div class="col-xs-3 fixed">2</div> <div class="col-xs-3 fixed">3</div> <div class="col-xs-3 fixed">4</div> <div class="col-xs-3 fixed">5</div> </div> </div> . . . </div> </div>
and css:
.col-xs-3.fixed { width:20%; }
for interactive example, see fiddle.
a cleaner way go include css/less col-xs-3
, make fixed-col
or similar class.
update funkiness columns wrapping/spacing mentioned in comments due columns' default padding making large row , wrapping. seen in updated fiddle removing padding .fixed
columns fixes it. may not desirable, , such tweaks need made specific application.