How can I override Bootstrap CSS styles?

user_2205206 0
Viewed 467256

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;
}
twitter-bootstrap css html
14 Answers

Update 2021 - Bootstrap 4 and Bootstrap 5

There are 3 rules to follow when overriding Bootstrap CSS..

  1. import/include bootstrap.css before your CSS rules (overrides)
  2. use more CSS Specificity (or equal) than the Bootstrap CSS selectors
  3. if any rule is overridden, use !important attribute to force your rules. If you follow rules 1 & 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.

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">

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;
}

For example: https://codeply.com/p/FyQapHImHg

When the CSS selectors are the same, the last one takes precedence, which it why the styles.css should follow the bootstrap.css.

user_1714560
user_3321880

See https://bootstrap.themes.guide/how-to-customize-bootstrap.html

  1. For simple CSS Overrides, you can add a custom.css below the bootstrap.css

    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">

  2. 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_14088660

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_72589410

for ruby on rails users--

in your application css file, make sure the bootstrap file is mentioned first then the custom css stylesheet. This way the latter CSS code that you wrote overwrites the former. Use !important if needed as well

 *= require 'bootstrap.min'
 *= require_self
 *= require 'name_of_your_stylesheet'
user_99807980
  1. Inspect the target button on the console.
  2. Go to elements tab then hover over the code and be sure to find the default id or class used by the bootstrap.
  3. 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_113180780

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_98452780
Related