my way to preload images! haha
Update Coming Soon! Check out Skem9's future roadmap
Search for in

Twitter Bootstrap .^. Website Tutorials | Submited Nov 15, 2012

Written by: Yohn

Currently theres no simple way to add columns to the Bootstrap css framework. All of the block elements stand on top of each other, which in some case look funny. Heres a code to help fix that problem.
I wanted to have an easy way to create columns on mobile browsers with Bootstrap, and this is what I've come up with. I created a 12 column responsive grid for mobile browsers on Skem9 using this way. Not everywhere on the site uses it, but a lot does. This is because I thought of it after I started building the site, and I hope to put it everywhere as it works pretty good.

Some tips, please do not use the media queries here for 12 columns, at max i recommend using it for 3 maybe 4 column rows for the best result. This is because even though you'd have 12 columns to use, on smaller screen sizes those 12 columns will look a little funky.

What I did was copy the row-fluid elements from within the bootstrap.css within @media (min-width: 768px) and (max-width: 979px) { and this is what I came up with

@media (max-width: 767px) { .media-row { width: 100%; *zoom: 1; } .media-row:before, .media-row:after { display: table; content: ""; line-height: 0; } .media-row:after { clear: both; } .media-row [class*="span"] { display: block; width: 100%; min-height: 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; float: left; margin-left: 1.2987012987012987%; *margin-left: 1.2425215234204%; } .media-row [class*="span"]:first-child { margin-left: 0; } .media-row .span12 { width: 100%; *width: 99.9438202247191%; } .media-row .span11 { width: 91.55844155844156%; *width: 91.50226178316066%; } .media-row .span10 { width: 83.1168831168831%; *width: 83.0607033416022%; } .media-row .span9 { width: 74.67532467532467%; *width: 74.61914490004378%; } .media-row .span8 { width: 66.23376623376623%; *width: 66.17758645848534%; } .media-row .span7 { width: 57.79220779220779%; *width: 57.736028016926895%; } .media-row .span6 { width: 49.35064935064935%; *width: 49.29446957536845%; } .media-row .span5 { width: 40.90909090909091%; *width: 40.85291113381001%; } .media-row .span4 { width: 32.467532467532465%; *width: 32.41135269225157%; } .media-row .span3 { width: 24.025974025974023%; *width: 23.969794250693123%; } .media-row .span2 { width: 15.584415584415584%; *width: 15.528235809134685%; } .media-row .span1 { width: 7.142857142857142%; *width: 7.086677367576243%; } .media-row .offset1 { margin-left: 9.74025974025974%; *margin-left: 9.627900189697941%; } .media-row .offset1:first-child { margin-left: 8.441558441558442%; *margin-left: 8.329198890996643%; } } @media (max-width: 480px) { [class*="span"], .media-row [class*="span"] { float: none; display: block; width: 100%; margin-left: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .span12, .media-row .span12 { width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .media-row [class*="offset"]:first-child { margin-left: 0; } }

And then to create these mobile friendly columns you would use the class media-row with a row-fluid class like this example

<div class="row-fluid media-row"> <div class="span4"> contents within column 1 </div> <div class="span4"> contents within column 2 </div> <div class="span4"> contents within column 3 </div> </div>

Please keep in mind to not use the full 12 columns for these new classes. It will make the layout look messed up.

November 23rd, 2012
I just added an extra media query to stop the mobile friendly rows when the browser width is less than 480px, so then they would become stacked columns instead of rows.

No Comments Found