InterviewSolution
Saved Bookmarks
InterviewSolution
| 1. |
Can we create an Inverted Navbar in Bootstrap? |
|
Answer» With Bootstrap, you can change the theme of the default navigation bar. Yes, you can create an inverted NAVBAR using the .navbar-inverse CLASS. We create a default navbar using navbar-default class: <nav class="navbar navbar-default” role = "navigation">Above will create a default navbar with the following STYLE: Replace the .navbar-default class with the class to create inverted Navbar: <nav class="navbar navbar-inverse” role = "navigation">The following is an example that displays how we can crate inverted Navbar (black COLORED): <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-inverse" role = "navigation"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">New Website</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">AboutUs</a></li> <li><a href="#">Company</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> </div> </nav> </body> </html>The above code creates the following inverted navbar unlike the default navbar: |
|