Pusat Ilmu Secara Detil

Tutorial Bootstrap : Change the color of the navigation bar

Tutorial Bootstrap : Change the color of the navigation bar

Navigation Bar or sometimes it's called navbar on Bootstrap is counterpart of navigation by default is placed at the top of page. We can also turn it into a bottom position, so that it becomes footer.

There are several types of Navigation Bars on Bootstrap, some of which are : Default Navigation Bar, Inverted Navigation Bar, Fixed Navigation Bar etc.

By default, the color of Bootstrap Navigation Bars consist of two : gray (Default Navigation Bar) and black (Inverted Navigation Bar).

 In this experiment, we try it on inverted navigation bar. Firstly we try the color default as show by following script :
<div class="navbar navbar-inverse">
 <div class="container">
  <div class="navbar-header">
   <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
   </button>
  </div>
  <div class="navbar-collapse collapse">
   <ul class="nav navbar-nav navbar-right">
    <li class="active"><a href="index.html">Home</a></li>
    <li><a href="about.html">Programming</a></li>
    <li><a href="courses.html">English</a></li>
    <li><a href="price.html">Review</a></li>
    <li><a href="videos.html">Videos</a></li>
    <li><a href="videos.html">Gallery</a></li>
    <li><a href="contact.html">Contact</a></li>
   </ul>
  </div>
 </div>
</div>

The output of script 1 will be showed by Figure below :
Right now, we'll change the default color of inverted navigation bar. For example, we'll chage it to be blue. Add the following script, you can put it both internally and externallu. Read Tutorial CSS Implementation to get understand deeply about the meaning of css internal and external.
<style type="text/css">
    .navbar-inverse {
    background-color: #3b5998;
    font-size:18px;
    }
</style>

The output of script.above is shown by following figure, we also change font-size:
You can download all source code of this tutorial on following link :[Download]

Share this:

You Might Also Like:

Next Post
Oldest Page
Disqus Comments