wrap a .less css definitions in a namespace

css, less

Solution

I am not using `less` on the live site, nor am I manually doing the compiling so this is kind of a "simple" version. It's not as automated as the others but may apply to some users.

Edit `bootstrap.css` / `bootstrap-responsive.css`

.tb {
  // copy/paste the entire bootstrap.css
}

Recompile with less or use an online less compiler - http://winless.org/online-less-compiler

Edit the now-compiled file and change `body {}` CSS declarations to `tb {}`.

Use the new CSS file.

Place your "bootstrapped" content inside a `<div class='tb'></div>`

Problem

I wanted to use twitter bootstrap CSS only in a specific element in my web page. I tried to do it like in code below. But after compiling this to a css file nothing was outputted. If I moved `@import` outside `#my_div` then I got all css definitions for twitter boostrap. ``` #my_div { @import "../twitter_bootstrap/lib/bootstrap.less"; } ``` How can I namespace a `less css` file?

Original source