How to overwrite styling in Twitter Bootstrap

Question

How can I overwrite the stylings in Twitter Bootstrap   For instance  I am currently using a  sidebar class that has the CSS rule  float  left    How can I change this so that it goes to the right instead   I m using HAML and SASS but am relatively new to web development

User · Answer

You can overwrite a CSS class by making it "more specific".

You go up the HTML tree, and specify parent elements:

div.sidebar { ... } is more specific than .sidebar { ... }

You can go all the way up to BODY if you need to:

body .sidebar { ... } will override virtually anything.

See this handy guide: http://css-tricks.com/855-specifics-on-css-specificity/

User · Answer

The answer to this is CSS Specificity  You need to be more  specific  in your CSS so that it can override bootstrap css properties   For example you have a sample code for a bootstrap menu here    lt nav class  navbar navbar-inverse navbar-fixed-top  role  navigation  gt       lt div id  home-menu-container  class  collapse navbar-collapse  gt           lt ul id  home-menu  class  nav navbar-nav  gt               lt li gt  lt a class  navbar-brand  href     gt  lt img src  images xd logo png    gt  lt  a gt  lt  li gt               lt li gt  lt a href   intro  gt Home lt  a gt  lt  li gt               lt li gt  lt a href   about  gt About Us lt  a gt  lt  li gt               lt li gt  lt a href   services  gt What We Do lt  a gt  lt  li gt               lt li gt  lt a href   process  gt Our Process lt  a gt  lt br   gt  lt  li gt               lt li gt  lt a href   portfolio  gt Portfolio lt  a gt  lt  li gt               lt li gt  lt a href   contact  gt Contact Us lt  a gt  lt  li gt           lt  ul gt       lt  div gt  lt  --   navbar-collapse -- gt   lt  nav gt    Here  you need to remember the hierarchy of the specificity  It goes like this    Give an element with an id mentioned 100 points Give an element with a class mentioned 10 points Give a simple element a single 1 point   So  for the above if your css has something like this    navbar ul li a   color  red       10  navbar    1 ul    1 li    1 a    13 points     navbar a   color  green       10  navbar    1 a    11 points      So  even if you have defined the  navbar a after  navbar ul li a it is still going to override with a red colour  instead of a green since the specificity is more  13 points    So  basically all you need to do is calculate the points for the element you are wanting to change the css for  via inspect element on your browser  Here  bootstrap has specified its css for the  element as   navbar-inverse  navbar-nav gt li gt a      Total   22 points        color   999      So  even if your css is loading is being loaded after bootstrap css which has the following line    navbar-nav li a       color  red      it s still going to be rendered as  999  In order to solve this  bootstrap has 22 points  calculate it yourself   So all we need is something more than that  Thus  I have added custom IDs to the elements i e  home-menu-container and home-menu  Now the following css will work    home-menu-container  home-menu li a   color  red       100   100   1   1   202 points         Done   You can refer to this MDN link

User · Answer

If you want to overwrite any css in bootstrap use  important  Let s say here is the page header class in bootstrap which have 40px margin on top  my client don t like it and he want it to be 15 on top and 10 on bottom only   page-header       border-bottom  1px solid  EEEEEE      margin  40px 0 20px      padding-bottom  9px      So I added on class in my site css file with the same name like this   page-header       padding-bottom  9px      margin  15px 0 10px 0px  important      Note the  important with my margin   which will overwrite the margin of bootstarp page-header class margin

User · Answer

Add your own class  ex   lt div class  sidebar right  gt  lt  div gt   with the CSS as   sidebar right        float right

User · Answer

Came across this late  but I think it could use another answer   If you re using sass  you can actually change the variables before you import bootstrap  http   twitter github com bootstrap customize html variables  Change any of them  such as    bodyBackground  red   import  bootstrap     Alternatively if there isn t a variable available for what you want to change  you can override the styles or add your own    Sass    import  bootstrap       override anything manually  like rounded buttons     btn     border-radius  0      Also see this  Proper SCSS Asset Structure in Rails

User · Answer

You can just make sure your css file parses AFTER boostrap css   like so    lt link href  css bootstrap css  rel  stylesheet  gt    lt link href  css myFile css  rel  stylesheet  gt

User · Answer

All these tips will work  but a simpler way might be to include your stylesheet after the Bootstrap styles    If you include your css  site-specific css  after Bootstrap s  bootstrap css   you can override rules by redefining them   For example  if this is how you include CSS in your  lt head gt    lt link rel  stylesheet  href  css bootstrap css    gt   lt link rel  stylesheet  href  css site-specific css    gt    You can simply move the sidebar to the right by writing  in your site-specific css file     sidebar       float  right      Forgive the lack of HAML and SASS  I do not know them well enough to write tutorials in them

User · Answer

I know this is an old question but still  I came across a similar problem and i realized that my  not working  css code in my bootstrapOverload css file was written after the media queries  when I moved it above media queries it started working    Just in case someone else is facing the same problem

[css] How to overwrite styling in Twitter Bootstrap

Examples related to css

Examples related to twitter-bootstrap