How can I override Bootstrap CSS styles

Question

I need to modify bootstrap css to fit my website  I feel it s better to create a separate custom css file instead of modifying bootstrap css directly  one reason being that should bootstrap css get an update  I ll suffer trying to re-include all my modifications  I ll sacrifice some load time for these styles  but it s negligible for the few styles I m overriding   Hw do I override bootstrap css so that I remove the style of an anchor class  For example  if I want to remove all the styling rules for legend   legend     display  block    width  100     padding  0    margin-bottom  20px    font-size  21px    line-height  inherit    color   333333    border  0    border-bottom  1px solid  e5e5e5      I can just delete all that in bootstrap css  but if my understanding about best practices on overriding CSS is correct  what should I do instead   To be clear  I want to remove all those styles of legend and use parent s CSS values  So combining Pranav s answer  will I be doing the following   legend     display  inherit  important    width  inherit  important    padding  inherit  important    margin-bottom  inherit  important    font-size  inherit  important    line-height  inherit  important    color  inherit  important    border  inherit  important    border-bottom  inherit  important       I was hoping there s a way to do something like the following    legend     clear  all

User · Answer

It should not effect the load time much since you are overriding parts of the base stylesheet.

Here are some best practices I personally follow:

Always load custom CSS after the base CSS file (not responsive).
Avoid using !important if possible. That can override some important styles from the base CSS files.
Always load bootstrap-responsive.css after custom.css if you don't want to lose media queries. - MUST FOLLOW
Prefer modifying required properties (not all).

User · Answer

To reset the styles defined for legend in bootstrap  you can do following in your css file   legend     all  unset      Ref  https   css-tricks com almanac properties a all      The all property in CSS resets all of the selected element s   properties  except the direction and unicode-bidi properties that   control text direction    Possible values are  initial  inherit  amp  unset   Side note  clear property is used in relation with float  https   css-tricks com almanac properties c clear

User · Answer

Using  important is not a good option  as you will most likely want to override your own styles in the future  That leaves us with CSS priorities    Basically  every selector has its own numerical  weight     100 points for IDs 10 points for classes and pseudo-classes 1 point for tag selectors and pseudo-elements Note  If the element has inline styling that automatically wins  1000 points    Among two selector styles browser will always choose the one with more weight  Order of your stylesheets only matters when priorities are even - that s why it is not easy to override Bootstrap   Your option is to inspect Bootstrap sources  find out how exactly some specific style is defined  and copy that selector so your element has equal priority  But we kinda loose all Bootstrap sweetness in the process   The easiest way to overcome this is to assign additional arbitrary ID to one of the root elements on your page  like this   lt body id  bootstrap-overrides  gt   This way  you can just prefix any CSS selector with your ID  instantly adding 100 points of weight to the element  and overriding Bootstrap definitions      Example selector defined in Bootstrap     jumbotron h1      10 1 11 priority scores      line-height  1    color  inherit        Your initial take at styling    h1      1 priority score  not enough to override Bootstrap jumbotron definition      line-height  1    color  inherit        New way of prioritization     bootstrap-overrides h1      100 1 101 priority score  yay       line-height  1    color  inherit

User · Answer

If you are planning to make any rather big changes  it might be a good idea to make them directly in bootstrap itself and rebuild it  Then  you could reduce the amount of data loaded    Please refer to Bootstrap on GitHub for the build guide

User · Answer

I found out that  bootstrap 4  putting your own CSS behind bootstrap css and  js is the best solution   Find the item you want to change  inspect element  and use the exact same declaration then it will override   It took me some little time to figure this out

User · Answer

See https   bootstrap themes guide how-to-customize-bootstrap html   For simple CSS Overrides  you can add a custom css below the bootstrap css   lt link rel  stylesheet  type  text css  href  css bootstrap min css  gt   lt link rel  stylesheet  type  text css  href  css custom css  gt   For more extensive changes  SASS is the recommended method    create your own custom scss import Bootstrap after the changes in custom scss For example  let   s change the body background-color to light-gray  eeeeee  and change the blue primary contextual color to Bootstrap s  purple variable        custom scss            import the necessary Bootstrap files     import  bootstrap functions    import  bootstrap variables       -------begin customization--------           simply assign the value      body-bg   eeeeee      or  use an existing variable     theme-colors      primary   purple       -------end customization--------          finally  import Bootstrap to set the changes      import  bootstrap

User · Answer

In the head section of your html place your custom css below bootstrap css    lt link href  bootstrap min css  rel  stylesheet  gt   lt link href  custom css  rel  stylesheet  gt    Then in custom css you have to use the exact same selector for the element you want to override  In the case of legend it just stays legend in your custom css because bootstrap hasn t got any selectors more specific   legend     display  inline    width  auto    padding  0    margin  0    font-size  medium    line-height  normal    color   000000    border  0    border-bottom  none      But in case of h1 for example you have to take care of the more specific selectors like  jumbotron h1 because  h1     line-height  2    color   f00      will not override   jumbotron h1   jumbotron  h1     line-height  1    color  inherit      Here is a helpfull explantion of specificity of css selectors which you need to understand to know exactly which style rules will apply to an element  http   css-tricks com specifics-on-css-specificity   Everything else is just a matter of copy paste and edit styles

User · Answer

Link your custom css file as the last entry below the bootstrap css   Custom css style definitions will override bootstrap css  Html   lt link href  css bootstrap min css  rel  stylesheet  gt   lt link href  css custom css  rel  stylesheet  gt    Copy all style definitions of legend in custom css and make changes in it  like margin-bottom 5px  -- This will overrider margin-bottom 20px

User · Answer

A bit late but what I did is I added a class to the root div then extends every bootstrap elements in my custom stylesheet    overrides  list-group-item       border-radius  0px     overrides  some-elements-from-bootstrap           styles here         lt div class  container-fluid overrides  gt       lt div class  row  gt           lt div class  col-sm-4  style  background-color  red  gt               lt ul class  list-group  gt                   lt li class  list-group-item  gt  lt a href     gt Hey lt  a gt  lt  li gt                   lt li class  list-group-item  gt  lt a href     gt I was doing lt  a gt  lt  li gt                   lt li class  list-group-item  gt  lt a href     gt Just fine lt  a gt  lt  li gt                   lt li class  list-group-item  gt  lt a href     gt Until I met you lt  a gt  lt  li gt                   lt li class  list-group-item  gt  lt a href     gt I drink too much lt  a gt  lt  li gt                   lt li class  list-group-item  gt  lt a href     gt And that s an issue lt  a gt  lt  li gt                   lt li class  list-group-item  gt  lt a href     gt But I m okay lt  a gt  lt  li gt               lt  ul gt           lt  div gt           lt div class  col-sm-8  style  background-color  blue  gt              right          lt  div gt       lt  div gt   lt  div gt

User · Answer

Give ID to legend and apply css  Like add id hello to legend   the css is as follw    legend  legend     display  block    width  100     padding  0    margin-bottom  20px    font-size  21px    line-height  inherit    color   333333    border  0    border-bottom  1px solid  e5e5e5

User · Answer

Use jquery css instead of css       jquery have priority than bootstrap css     e g    document  ready function                mnu   css   color      CCFF00     font-size    16px     text-decoration     overline                instead of   mnu    font-family myfnt  font-size 20px  color  006699

User · Answer

Inspect the target button on the console  Go to elements tab then hover over the code and be sure to find the default id  or class used by the bootstrap  Use jQuery javascript to overwrite the style text by calling the function    See this example       document  ready function              dropdown-toggle   css             color     212529            background-color     ffc107            border-color     ffc107                       multiselect-selected-text   text  Select Tags

User · Answer

Update 2020 - Bootstrap 4  Bootstrap 5 beta There are 3 rules to follow when overriding Bootstrap CSS    import include bootstrap css before your CSS rules  overrides  add more specificity  or equal  to your CSS selectors if any rule is overridden  use  important attribute to force your rules  If you follow rules 1  amp  2 this shouldn t be necessary except for when using Bootstrap utility classes which often contain  important as explained here  Yes  overrides should be put in a separate styles css  or custom css  file so that the bootstrap css remains unmodified  This makes it easier to upgrade the Bootstrap version without impacting the overrides  The reference to the styles css follows after the bootstrap css for the overrides to work   lt link rel  quot stylesheet quot  type  quot text css quot  href  quot css bootstrap min css quot  gt   lt link rel  quot stylesheet quot  type  quot text css quot  href  quot css styles css quot  gt   Just add whatever changes are needed in the custom CSS  For example  legend     display  block    width  inherit    padding  0    margin-bottom  0    font-size  inherit    line-height  inherit    color  inherit    white-space  initial      Note  It s not a good practice to use  important in the override CSS  unless you re overriding one of the Bootstrap Utility classes  CSS specificity always works for one CSS class to override another  Just make sure you use a CSS selector that is that same as  or more specific than the bootstrap css  For example  consider the Bootstrap 4 dark Navbar link color  Here s the bootstrap css     navbar-dark  navbar-nav  nav-link       color  rgba 255 255 255  5      So  to override the Navbar link color  you can use the same selector  or a more specific selector such as   mynavbar  navbar-nav  nav-link       color   ffcc00     When the CSS selectors are the same  the last one takes precedence  which it why the styles css should follow the bootstrap css

[html] How can I override Bootstrap CSS styles?

Examples related to html

Examples related to css

Examples related to twitter-bootstrap