twitter/bootstrap — Issue #2214: Nested Bootstrap
Author: mac2000
Created: 2012-02-23 20:45:47+00:00
State: open

Here is my proposal / feature request:

Will be very nice to have ability to get nested bootstrap, via defining root element class name or id.

Use case: for example I want use bootstrap in wordpress plugin settings page, if I link bootstrap page will be broken, but if I will be able to nest bootstrap to only div holding plugin settings all will be ok.

As i understand all is needed is prepend all selectors with user defined one.

In compass there is:

```sass
.my {
@include nested-reset;
}
```

At moment using this uglies script ever:

```python
import urllib2
import re
css = urllib2.urlopen('http://twitter.github.com/bootstrap/assets/css/bootstrap.css').read()
styles = [x + '}' for x in css.split('}') if x.strip() != '']
nested = ''.join([x.replace(x.split('{')[0], ','.join(map(lambda x: ' .my ' + x, x.split('{')[0].split(',')))) for x in styles])
nested = re.sub('\.my[\s]+body', ' .my ', nested, flags=re.S)
nested = re.sub('\.my[\s]+html', ' .my ', nested, flags=re.S)
f = open('/home/mac/www/nested.css', 'w')
f.write(nested)
f.close()
```

And here is how it looks like:

http://jsfiddle.net/mac2000/rqcqh/1/embedded/result/

at top of page html wrapped with div.my, at bottom without such div, markup is the same