How to prevent twitter bootstrap from overriding my styles

4.53K viewsProgrammingbootstrap css web

I am using twitter bootstrap and it is overriding my own stylesheet. How can we get around this problem ?

Answered question

This can be done using your own block and wrapping all bootstrap styles within a block like below

.mybootstrap {
     // all bootstrap styles that you need go here

and then in your markup you need this, say for eg you have the following markup

// more html code here
<div class="mybootstrap">
// more html code here

once you do this, all styles of mybootstrap block will be applied only to the div
which refers to that class and nowhere else.
If your mybootstrap has too many styles, then its recommended to download and install node.js/npm as well as node-sass, download bootstrap css and save it as bootstrap-custom.scss and run the below command

node-sass bootstrap-custom.scss bootstrap-custom.css

This will compile the scss and create custom bootstrap stylesheet with all bootstrap classes prepended with the custom block .mybootstrap.
See the below image for a better understanding about how this entire thing works

In the above case, only div inside wrapper class will have the color red, outside div will have default text color black, even though it has class named red applied in the markup.
Hope this helps.

Answered question
Write your answer.