How to namespace Twitter Bootstrap so styles don't conflict
less, twitter-bootstrap
Solution
This turned out to be easier than I thought. Both Less and Sass support namespacing (using the same syntax even). When you include bootstrap, you can do so within a selector to namespace it:
.bootstrap-styles {
@import 'bootstrap';
}
Update: For newer versions of LESS, here's how to do it:
.bootstrap-styles {
@import (less) url("bootstrap.css");
}
A similar question was answered here.
Problem
I want to use Twitter Bootstrap, but only on specific elements, so I need to figure out a way to prefix all Twitter Bootstrap classes with my prefix, or use the less mixins. I'm not experienced with this yet so I don't quite understand how to do this. Here's an example of the HTML that I'm trying to style: ``` <div class="normal-styles"> <h1>dont style this with bootstrap</h1> <div class="bootstrap-styles"> <h1>use bootstrap</h1> </div> </div> ``` In this example, Twitter Bootstrap would normal style both `h1`s, but I want to be more selective about which areas I apply the Twitter Bootstrap styles.