Question

I created a custom grid with Twitter Bootstrap 2.0, and I’m trying to figure out how to update the grid to allow me to use 1/3 and 1/2 columns.

It looks like with 1.0 you could just use:

<div class="span-one-third"></div>

Has anyone been able to figure out a way to do something similar with 2.0, or am I overlooking something?

Thanks

Answer 1

For newer versions (since v2), just use the span4 or col-xx-4 columns, since it is a 12 column grid.

For bootstrap 2:

<div class="span4"></div>

For bootstrap 3 (example):

<div class="col-sm-4"></div>

ORIGINAL AND OUTDATED ANSWER

Just to make clear, this answer was to maintain the compatibility to applications that had the HTML using Bootstrap v1, that didn’t have any responsive stuff and where the grid was 16 columns (when they changed that, some projects that already used v1 started using the new v2 version costumized with 16 columns). And they actually had .span-one-third, etc, css classes.

Just implement the old values from the bootstrap v1 css (with grid 16), as v2 doesn’t implement it anymore.

.span-one-third{width:300px;}
.span-two-thirds{width:620px;}
.offset-one-third{margin-left:340px;}
.offset-two-thirds{margin-left:660px;}

And now u can still have the span-one-third and span-two-thirds classes. This was extracted from Bootstrap code: https://github.com/twbs/bootstrap/blob/v1.3.0/lib/scaffolding.less#L133