I am using twitter boostrap for a conversion project that I am workng on. I need to change the color of the Nav-bar, the links color, hover color of the links and finally the default size of the text of the links. Can you point me to a tutorial to make those changes, and if not a collection of the selectors in the CSS file to adjust.

4 Years
Discussion Span
Last Post by bootstraptor

The best way to find out what you need to change is to use a HTML element inspector. I suggest FireBug for Firefox or developer's tools for IE (I prefer Firebug). I think Chrome and Safari must have something similiar too.

In example, using FireBug:
1. Open the page
2. Open Firebug ( F12 )
3. Click in the 'Inspect Element' tool (Second button from the left)
4. Click the element you want to inspect
5. Read the styles that are applied to the element

This way you can see what css classes are being applied to the element. You can even change the properties at run time and see the results.


Chrome's "developer tools" are pretty good and included in the browser (Ctrl-Shift-I), or click on Tools, "Developer Tools". You can inspect as with the other tools mentioned, and make changes to the page's settings. Great for testing and debugging.


I was able to find the text color by using chrome as suggested above, but I am not able to locate the hove state which is the problem that I have on hand.


Here style from Bootstrap that you need to change what you want:
Put it under Bootstrap.css style in your html


/* NAV */
.navbar-inner {
    background: #fafafa;  /* ADD COLOR HERE in HEX# or grba() */

/* LINKS */

.navbar .nav > li > a {
        float: none;
        padding: 15px 20px 15px;
        color: #777777; /*here link color*/
        text-decoration: none;
        text-shadow: none;
    .navbar .nav > .active > a, 
    .navbar .nav > .active > a:hover, 
    .navbar .nav > .active > a:focus {
        color: #333;
        text-decoration: none;
        background-color: #fff;
        -webkit-box-shadow:  none;
            -moz-box-shadow:   none;
                box-shadow:  none;
    /************* NAVBAR BRAND ************/
    .navbar .brand {
        padding: 15px 0px 15px;
            color: #777777; /*brand  color*/

Put it in your *.html file

You can find free samples examples bootstrap templates on bootstrap samples

Edited by bootstraptor: change some

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.