How to customize Twitter bootstrap while using Rails 3.x?

Question

I am using Rails 3.2 and I integrated Twitter bootstrap into my Rails application by using the twitter-bootstrap-rails gem as instructed in the RailCasts here - http://railscasts.com/episodes/328-twitter-bootstrap-basics .

I added a navbar to my application .

I would like to know how do I remove the gradient from the navbar ? What should I edit and where ?

Answer 1

You can also handle it through modifying the less variable @navbarBackgroundHighlight. If you set that to the same color as navbarBackground, then you will have no gradient. For example:

@navbarBackgroundHighlight: white;
@navbarBackground: white;

Viola. No gradient, and no mucking with the internals of the CSS.

Answer 2

The bootstrap gradients come from the .navbar-inner class and can be removed by resetting the background-image properties set on the bootstrap.css stylesheet. I recommend you reset them on your own stylesheet, this way when the bootstrap is updated you won't have to come back and redo your changes, so place the following on your stylesheet to remove the gradients:

CSS

.navbar-inner {
  background-color: #2c2c2c; /* place your solid color here */
  background-image: none;
  background-repeat: no-repeat;
  filter: none;
}

Answer 3

There are 2 really good references for the Bootstrap LESS variables.

• http://bootstrap.lesscss.ru/less.html (This is a Russian site - but this page is in English. i can not find a similar page on the main english site)

• https://github.com/twitter/bootstrap/blob/master/less/variables.less