How to change btn color in Bootstrap

The easiest way to see which properties you need to override is to take a look at Bootstrap’s source code, specifically the .button-variant mixin defined in mixins/buttons.less. You still need to override quite a lot of properties to get rid of all of the .btn-primary styling (e.g. :focus, disabled, usage in dropdowns etc).

A better way might be to:

  1. Create your own customized version of Bootstrap using Bootstrap’s online customization tool
  2. Manually create your own color class, e.g. .btn-whatever
  3. Use a LESS compiler and use the .button-variant mixin to create your own color class, e.g. .btn-whatever

Related Posts:

  1. What is the difference among col-lg-*, col-md-* and col-sm-* in Bootstrap?
  2. Changing the width of Bootstrap popover
  3. img-responsive in Bootstrap does not work
  4. Column order manipulation using col-lg-push and col-lg-pull in Twitter Bootstrap 3
  5. Customize Bootstrap checkboxes
  6. Does bootstrap have builtin padding and margin classes?
  7. What is sr-only in Bootstrap 3?
  8. How to set up fixed width for ?
  9. How to set up fixed width for ?
  10. css to make bootstrap navbar transparent
  11. Bootstrap 4, How do I center-align a button?
  12. Responsive Bootstrap Jumbotron Background Image
  13. Changing the width of Bootstrap popover
  14. How to center vertically and horizontally a div using Bootstrap?
  15. How to center image in carousel
  16. Bootstrap throws Uncaught Error: Bootstrap’s JavaScript requires jQuery
  17. Flushing footer to bottom of the page, twitter bootstrap
  18. How to change the background-color of jumbrotron?
  19. bootstrap 4 row height
  20. vertical-align with Bootstrap 3
  21. Bootstrap change carousel height
  22. Twitter Bootstrap – add top space between rows
  23. How can I make Bootstrap columns all the same height?
  24. Set bootstrap modal body height by percentage
  25. Bootstrap 3 Glyphicons CDN
  26. Bootstrap align navbar items to the right
  27. Why is my Bootstrap code not working?
  28. Creating Accordion Table with Bootstrap
  29. In a bootstrap responsive page how to center a div
  30. Responsive Canvas in Bootstrap column?
  31. How to make Bootstrap Panel body with fixed height
  32. WordPress Admin Bar Overlapping Twitter Bootstrap Navigation [closed]
  33. Load custom css after bootstrap
  34. Redoing home page but changes not taking effect
  35. Layout using Bootstrap not aligning correctly
  36. Bootstrap in theme
  37. create bootstrap columns inside editor group block
  38. Google yolo one tab signup plugin avilable in wordpress? [closed]
  39. CSS – Initial HTML Margin Issue On WordPress Site
  40. How to remove the gap on right side of webpage (using Bootstrap with WordPress)?
  41. All of my custom Bootstrap styles are not working in my child theme!
  42. How to integrate Bootstrap Grid System in WordPress
  43. Change class names dynamically added to html elements by wordpress
  44. Modal dialog under the backdrop
  45. Bootstrap News: Image Modifciation
  46. Can’t center post thumbnail with bootstrap [closed]
  47. Bootstrap 4 Optimization
  48. Parent style messing up with Bootstrap [closed]
  49. Bootstrap navbar-fixed-top issues [closed]
  50. How to make this splash page responsive
  51. Custom theme – Bootstrap CSS not loading via wp_enqueue_style or otherwise
  52. Changing spacing between paragraphs and inside of paragraphs
  53. How to override the properties of a CSS class using another CSS class
  54. CSS display: inline vs inline-block
  55. Aligning two divs side-by-side
  56. CSS transition shorthand with multiple properties?
  57. Is there an opposite CSS pseudo-class to :hover?
  58. Using custom fonts using CSS?
  59. How can I transition height: 0; to height: auto; using CSS?
  60. Display Images Inline via CSS
  61. Why CSS3 Animation is not working?
  62. How to change version of .css in WordPress?
  63. Disable SSL / HTTPS for wordpress
  64. How do I remove specific styles from the parent theme css using the child theme css?
  65. What CSS rules are introduced to core blocks through wp-block-styles?
  66. Trying to load a responsive CSS media query using Custom Taxonmy
  67. What is better way to use Bootstrap inside admin panel?
  68. How to load different css file depending on language
  69. Can the Theme Customizer be used to generate static/cachable CSS, and how?
  70. Change logo on specific page id using css
  71. Layer post title on top of image WordPress featured thumbnail image
  72. Inconsistent `body_class()` function
  73. footer disappear on some pages frequently
  74. How to change H1 color only for pages [closed]
  75. Grid post page on WordPress with Bootstrap, the_excerpt(); Problem
  76. How to get an unique identifier for a page/post/category/tag etc.?
  77. Display Something in the Header After All Styles are Loaded
  78. WordPress custom CSS file overrided by internal CSS [closed]
  79. Can you change the color of svg icons to the global color I choose from WordPress
  80. After moving my site, sub-menus are not showing [closed]
  81. Theme twentythirteen widget area clearfix
  82. Why I obtain different visualization when I run the website on my local machine and on remote server?
  83. Using categories on navigation bar instead of pages
  84. Superfish and WordPress: Active Color Problem
  85. Elementor – Edit Global Colors Order
  86. the_post layout
  87. How To Remove All Other Plugins CSS
  88. Hot reload failing to update file changes
  89. How can I hide this custom slider while Elementor editing window is open?
  90. Removing a CSS rule from Custom Taxonomy
  91. style.css not working but customizer additional css does?
  92. Performance hit of Inline CSS
  93. How to disable all css from the theme for a specific post type page
  94. Change WP Child theme CSS for WP Bootstrap Starter Theme
  95. Divi Theme HTML code is different in View Page Source than in the Firefox Inspector
  96. Add WordPress Core CSS into editor-style.css
  97. Change Login CSS – Include instead of echo
  98. Creating a custom header
  99. Overide a CSS already loaded
  100. Editing size of h3 tag in wordpress on a one-off basis

Leave a Comment