1.

How to create colored Navbar in Bootstrap?

Answer»

To create a colored Navbar, firstly work around the same procedure to create a Navbar. Then, use the .bg-color classes to change the background color. These classes include: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light classes.

Let us first begin with creating a blue colored Navbar using .bg-primary color classes:

<!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/4.1.3/css/bootstrap.min.css">   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <DIV class="container">   <h3>Colored Navbar</h3> </div> <nav class="navbar navbar-expand-sm bg-primary navbar-dark">   <ul class="navbar-nav">     <li class="nav-item active">       <a class="nav-link" href="#" active>Home</a>     </li>     <li class="nav-item">       <a class="nav-link" href="#">About</a>     </li>    <li class="nav-item">      <a class="nav-link" href="#">Entertainment</a>     </li>     <li class="nav-item">       <a class="nav-link" href="#">News</a>     </li>   </ul> </nav> </body> </html>

The OUTPUT displays a colored Navbar:

Now, let us add more navbars with different colors using the classes discussed above:

<!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/4.1.3/css/bootstrap.min.css">   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <div class="container">   <h3>Colored Navbars</h3> </div> <nav class="navbar navbar-expand-sm bg-primary navbar-dark">   <ul class="navbar-nav">     <li class="nav-item active">       <a class="nav-link" href="#" active>Home</a>     </li>     <li class="nav-item">       <a class="nav-link" href="#">About</a>     </li>     <li class="nav-item">       <a class="nav-link" href="#">Entertainment</a>     </li>     <li class="nav-item">       <a class="nav-link" href="#">News</a>     </li>     <li class="nav-item">       <a class="nav-link" href="#">Contact</a>     </li>   </ul> </nav> <nav class="navbar navbar-expand-sm bg-secondary navbar-dark">   <ul class="navbar-nav">     <li class="nav-item active">       <a class="nav-link" href="#" active>Home</a>     </li>     <li class="nav-item">       <a class="nav-link" href="#">About</a>     </li>     <li class="nav-item">       <a class="nav-link" href="#">Entertainment</a>     </li>     <li class="nav-item">       <a class="nav-link" href="#">News</a>     </li>     <li class="nav-item">       <a class="nav-link" href="#">Contact</a>     </li>   </ul> </nav> <nav class="navbar navbar-expand-sm bg-danger navbar-dark">   <ul class="navbar-nav">     <li class="nav-item active">       <a class="nav-link" href="#" active>Home</a>     </li>     <li class="nav-item">       <a class="nav-link" href="#">About</a>     </li>     <li class="nav-item">       <a class="nav-link" href="#">Entertainment</a>     </li>     <li class="nav-item">       <a class="nav-link" href="#">News</a>     </li>     <li class="nav-item">       <a class="nav-link" href="#">Contact</a>     </li>   </ul> </nav> <nav class="navbar navbar-expand-sm bg-warning navbar-dark">   <ul class="navbar-nav">     <li class="nav-item active">       <a class="nav-link" href="#" active>Home</a>     </li>     <li class="nav-item">       <a class="nav-link" href="#">About</a>     </li>     <li class="nav-item">       <a class="nav-link" href="#">Entertainment</a>     </li>     <li class="nav-item">       <a class="nav-link" href="#">News</a>     </li>     <li class="nav-item">       <a class="nav-link" href="#">Contact</a>     </li>   </ul> </nav> </body> </html>

The output with Navbars in different colors:


Discussion

No Comment Found

Related InterviewSolutions