How To: Customizing

Customizing the generated stylesheet using the variables provided by twitter Bootstrap requires the use of Sass and its @import statement. Here's an example application.css.scss that changes the default navigation bar color to orange:

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 */

// ----------------------------------------
// Variables
// ----------------------------------------

$brand-primary:         #428bca !default;
$brand-success:         #5cb85c !default;
$brand-warning:         #f0ad4e !default;
$brand-danger:          #d9534f !default;
$brand-info:            #5bc0de !default;

@import "twitter/bootstrap";