ruby-on-railstwitter-bootstrap-rails

Using Bootstrap to Change Button Color


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

Solution

  • 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