Create Inverted Navbar in Bootstrap



To create an inverted navbar with a black background and with white text, simply add the .navbar-inverse class to the .navbar class.

Example

 Live Demo

<!DOCTYPE html> <html>    <head>       <title>Bootstrap Example</title>       <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">       <script src="/scripts/jquery.min.js"></script>       <script src="/bootstrap/js/bootstrap.min.js"></script>    </head>    <body>       <nav class = "navbar navbar-inverse" role = "navigation">          <div class = "navbar-header">             <a class = "navbar-brand" href = "#">TutorialsPoint</a>             <div>                <div>                   <ul class = "nav navbar-nav">                      <li class = "active"><a href = "#">iOS</a></li>                      <li><a href = "#">SVN</a></li>                      <li class = "dropdown">                         <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">                            Java                            <b class = "caret"></b>                         </a>                         <ul class = "dropdown-menu">                            <li><a href = "#">jmeter</a></li>                            <li><a href = "#">EJB</a></li>                            <li><a href = "#">Jasper Report</a></li>                         </ul>                      </li>                   </ul>                </div>          </nav>    </body> </html>
Updated on: 2020-06-12T10:47:41+05:30

725 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements