Using Bootstrap to Change Button Color
34,918
Solution 1
If you are using Bootsrap with LESS, you can simply do:
.btn-primary {
.buttonBackground(@yourColor, @yourColorDarker); //(button, hover)
}
If not then you simply override the button class which you want to change color:
.btn-warning { background-color: Your color; } //button
.btn-warning:hover { background-color: Your color; } //hover
Furthermore, since it appears you want to change the button color to green why dont you use the .btn-success class like so:
<%= button_tag "Hello", :class => "btn btn-success" %>
Source: Styling twitter bootstrap buttons
Solution 2
In Bootstrap 3 buttonBackground
doesn't work anymore, you have to use button-variant(@color; @background; @border)
like this:
.btn-custom {
.button-variant(@custom-color, @custom-color-bg, @custom-color-border);
}
Author by
don
Updated on July 09, 2022Comments
-
don almost 2 years
I'm using RoR to make a one-month rails website. This is the code from the styles.css.scss sheet. It utilizes bootstrap. I am unsure as to why but the button color does not change despite the $btnPrimaryBackground: green text. Does anyone have any ideas or thoughts on why the button color doesn't change? Thanks.
$baseFontFamily: Oxygen; @import url(http://fonts.googleapis.com/css?family=Oxygen); $navbarBackgroundHighlight: white; $navbarBackground: white; $btnPrimaryBackground: green; @import 'bootstrap'; body{ padding-top: 60px; } @import 'bootstrap-responsive'; .navbar-inner{ @include box-shadow(none !important); border: 0; } .footer{ margin-top: 50px; color: $grayLight; a{ color: $gray; } }