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

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

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