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

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