How to change navbar color in Bootstrap 3


How to change navbar color in Bootstrap 3 : You can create you own class to change the background color of bootstrap 3. It may help you when you are customizing the bootstrap’s default navigation menu.


How to change navbar color in Bootstrap 3

Add the following css to change the background color of the navigation bar of the bootstrap.

.my-navbar{
    background-color:yellow;
    color:333;
    border-radius:0;
}

Here is an example of bootstrap colored navigation.


<ul class="nav nav-tabs my-navbar">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Account</a></li>
    <li class="dropdown">
        <a href="#" data-toggle="dropdown" class="dropdown-toggle">Settings <b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li><a href="#">Profile</a></li>
             <li class="divider"></li>
            <li><a href="#">Home</a></li>
            <li><a href="#">Settingss</a></li>          
        </ul>
    </li>
</ul>

Try it »

The above code will produce the following output.

How to change navbar color in Bootstrap 3


Advertisements

Add Comment

📖 Read More