Freakinator Freakinator - 2 months ago 17x
AngularJS Question

Add bootstrap's nav-pills backgound color

I have a bootstrap navbar with single elements being

. I recompiled bootstrap to change the default colors. Now I'd like to add a background color to the pills different from the hover and active ones. How to do it? Should I force it via app-wide css file? Is there a way to achieve it via bootstrap's less?

This is a snippet of my current navbar:

<nav class="navbar">
<div class="container">

<div class="collapse navbar-collapse elements">
<ul class="nav nav-pills navbar-right">
<li ng-class="setClass('/')"><a href="/"><i class="glyphicon glyphicon-home"></i></a></li>
<li ng-class="setClass('/list')"><a href="/list">Browse</a></li>
<li ng-class="setClass('/search')"><a href="/search">Search</a></li>

enter image description here

As you can see, the hovered element get a nice highlighting, the active one is clearly visible, while the not active is kind of lost in the background.


Since the default nav-pills don't have a default background color, you need to set one yourself. There is no option in bootstraps default less configuration.

So why not just setting:

.nav-pills > li > a {
    background: #f6f6f6;  /* your preferred color */

I would put it in another css file - not in bootstraps css or less file. Because once you want to update bootstrap you can always do it quickly with a configuration json, but you would have to remember and set all css/less changes again - or they would be lost.
For better structure of your files, you can create a bootstrap_extended.css file (or something like that), where you only put in code extending or overwriting bootstrap defaults not configurable on the customization page.

You could also create a bootstrap_extended.less file and put

@import (inline) '../Content/bootstrap.less';

at the top, so you just use/compile your file and would create a final and already extended single css for bootstrap.