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

Answer 1

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;

}

Answer 2

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

Answer 3

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

Answer 4

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:

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

Answer 5

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.

Answer 6

Link your custom.css file as the last entry below the bootstrap.css. Custom.css style definitions will override bootstrap.css

Html

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

Copy all style definitions of legend in custom.css and make changes in it (like margin-bottom:5px; -- This will overrider margin-bottom:20px; )