How to change the bootstrap primary color?

by

Bootstrap 5 (update 2021)

The method is still the same for Bootstrap 5.

https://codeply.com/p/iauLPArGqE

Bootstrap 4

To change the primary, or any of the theme colors in Bootstrap 4 SASS, set the appropriate variables before importing bootstrap.scss. This allows your custom scss to override the !default values…

$primary: purple;
$danger: red;

@import "bootstrap";

Demo: https://codeply.com/go/f5OmhIdre3

In some cases, you may want to set a new color from another existing Bootstrap variable. For this @import the functions and variables first so they can be referenced in the customizations…

/* import the necessary Bootstrap files */
@import "bootstrap/functions";
@import "bootstrap/variables";

$theme-colors: (
  primary: $purple
);

/* finally, import Bootstrap */
@import "bootstrap";

Demo: https://codeply.com/go/lobGxGgfZE

Also see: this answer, this answer or changing the button color in (CSS or SASS)

It’s also possible to change the primary color with CSS only but it requires a lot of additional CSS since there are many -primary variations (btn-primary, alert-primary, bg-primary, text-primary, table-primary, border-primary, etc…) and some of these classes have slight colors variations on borders, hover, and active states. Therefore, if you must use CSS it’s better to use target one component such as changing the primary button color.

More Related Contents:

  1. What is the difference among col-lg-*, col-md-* and col-sm-* in Bootstrap?
  2. Bootstrap 3: pull-right for col-lg only
  3. Centering the image in Bootstrap
  4. Vertically align Bootstrap badge inside heading
  5. Change navbar color in Twitter Bootstrap
  6. Bootstrap dropdown sub menu missing
  7. Order columns through Bootstrap4
  8. Center an element in Bootstrap Navbar
  9. Bootstrap 4 navbar with 2 rows
  10. Bootstrap 3 Navbar with Logo
  11. How to use particular CSS styles based on screen size / device
  12. Remove gutter space for a specific div only
  13. What do “flex” and “justify-content” achieve that “text-align” doesn’t?
  14. How to build a 2 Column (Fixed – Fluid) Layout with Twitter Bootstrap?
  15. Meaning of numbers in “col-md-4″,” col-xs-1″, “col-lg-2” in Bootstrap
  16. Bootstrap icons are loaded locally but not when online
  17. Bootstrap grid with fixed wrapper – Prevent columns from stacking up
  18. Bootstrap xs columns wrap
  19. What is class=”mb-0″ in Bootstrap 4?
  20. Bootstrap 3 – desktop view on a mobile device
  21. Customize Bootstrap 4’s grid-system Breakpoints
  22. Bootstrap 4 – Navbar items outside the collapse
  23. Bootstrap change order of columns
  24. Twitter’s Bootstrap 3 grid, changing breakpoint and removing padding
  25. Offsetting columns is not working (Bootstrap v4.0.0-beta)
  26. How can I change the order of Bootstrap columns?
  27. Bootstrap 4 custom build generator / download [duplicate]
  28. How do I make card-columns order horizontally?
  29. Custom CSS being overridden by Bootstrap CSS
  30. Bootstrap Grid System new line does not look nice

Leave a Comment