Isolando o Bootstrap de CSS e evitando conflitos

É comum que haja conflitos de CSS ao utilizarmos algum bootstrap. dentro de uma página existente com outros estilos já definidos.

É possível isolar seu bootstrap de CSS para que ele atue a partir de uma DIV específica, como no exemplo abaixo:

<div class="bootstrap-iso">
<!-- A partir daqui sua página será estilizada com seu Bootstrap CSS -->
</div>

Como isolar meu  CSS bootstrap ?

• Instale o Node.JS em seu computador: http://nodejs.org/
• Agora iremos instalar um processador de CSS que fará o isolamento:

npm install -g less

• Crie um diretório vazio, e copie seus arquivos de CSS do boostrap para dentro deste diretório:

• Dentro deste diretório adicionar o arquivo “prefix.less” com o seguinte conteúdo

.bootstrap-iso {
  @import (less) 'bootstrap.css';
}

Cada linha corresponde ao seu arquivo de boostrap que será feito o isolamento.

• Abra o CMD (Windows) ou Terminal (Linux), vá até o diretório criado acima e execute o seguinte comando:

lessc prefix.less bootstrap-iso.css

Foi gerado um novo arquivo de CSS, “boostrap-iso.css”.

Agora basta incluir este arquivo em sua página, e adicionar a class=”bootstrap-iso” na DIV que desejar aplicar o bootstrap.