Open In App

How to display black navigation bar in Bootstrap ?

Improve
Improve
Like Article
Like
Save
Share
Report

A navigation bar is used in every website to make it more user-friendly so that the navigation through the website becomes easy and the user can directly search for the topic of their interest. There are two following ways to display a black navigation bar.

Using .navbar-dark and .bg-dark classes: The .navbar-dark class of Bootstrap makes the text in the navbar white and the .bg-dark class makes the background color of the navbar class black.

Example: IN this example, we will use the .navbar-dark class of Bootstrap.

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="utf-8" />
    <meta name="viewport"
          content="width=device-width, initial-scale=1" />
 
    <link rel="stylesheet"
          href=
 
    <script src=
    </script>
    <script src=
    </script>
    <script src=
    </script>
</head>
 
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <a class="navbar-brand" href="#">Geeksforgeeks</a>
 
        <div class="collapse navbar-collapse">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Course</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Job Portal</a>
                </li>
            </ul>
            <form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2"
                       type="search"
                       placeholder="Search"
                       aria-label="Search" />
                <button class="btn btn-light my-2 my-sm-0"
                        type="submit">
                    Search
                </button>
            </form>
        </div>
    </nav>
</body>
 
</html>
 
</html>


Output:

Output

Setting background color using style property:  We can set the background color of the navbar by using the style property of the <nav>tag.

Example: In this example, we will set the background color using the style property.

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="utf-8" />
    <meta name="viewport"
          content="width=device-width, initial-scale=1" />
 
    <link rel="stylesheet"
          href=
 
    <script src=
    </script>
    <script src=
    </script>
    <script src=
    </script>
</head>
 
<body>
    <nav class="navbar navbar-expand-lg navbar-dark"
         style="background-color: black">
        <a class="navbar-brand" href="#">
          Geeksforgeeks
        </a>
 
        <div class="collapse navbar-collapse">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">
                      Home
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">
                      Course
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">
                      Job Portal
                    </a>
                </li>
            </ul>
            <form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2"
                       type="search"
                       placeholder="Search"
                       aria-label="Search" />
                <button class="btn btn-light my-2 my-sm-0"
                        type="submit">
                    Search
                </button>
            </form>
        </div>
    </nav>
</body>
 
</html>


Output:



Last Updated : 11 May, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads