Open In App

How to display black navigation bar in Bootstrap ?

Last Updated : 11 May, 2023
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:



Similar Reads

How to use Top Navigation with Left Navigation Bar using Bootstrap ?
Bootstrap is an open-source CSS framework used by frontend developers for making interactive web designs. The most recent version of Bootstrap is Bootstrap 5 alpha which has numerous added features. However, Bootstrap 5 is still under constant development phase and hence most of the web developers are still using Bootstrap 4. Bootstrap 4 also offer
5 min read
Bootstrap 4 | Navigation Bar
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. The navigation bar is placed at the top of the page.Basic Navigation Bar: The .navbar class is used to create a navigation bar. The navbar is created respon
9 min read
How to create Responsive Bottom Navigation Bar using Bootstrap ?
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. The word "Navigation" means the science of moving from one place to another. In this article, we create a navigation bar on the bottom of the web page. The
5 min read
How to Customize React-Bootstrap Spacing in Navigation Bar ?
In this article, we are going to implement React Bootstrap Spacing in the Navigation Bar. In React-Bootstrap, there are different types of classes like 'mx-2' , 'my-4' , and more that are used to manage the space between elements in horizontal and vertical order. So to customize this element's space in the navigation bar using Bootstrap, we can use
4 min read
How to create a navigation bar using React-Bootstrap?
React-Bootstrap is a front-end framework that was designed with React in mind. The NavBar Component is a navigation header that is responsive and powerful. It supports navigation, branding, and many other related features. In this article, we are going to implement a navigation bar using React Bootstrap. Creating Navigation bar using React-Bootstra
2 min read
Bootstrap Navigation Bar
Bootstrap Navigation Bar provides a responsive, customizable, and pre-styled navigation component for web applications. It incorporates features like branding, navigation links, dropdowns, and responsiveness, enabling developers to create effective and visually appealing navigation menus effortlessly. Navbar: Bootstrap provides various types of nav
6 min read
How to change navigation bar color in Bootstrap ?
In Bootstrap, the navigation bar color refers to the background color of the navbar component. To change the navigation bar color in Bootstrap, use utility classes like bg-primary, and bg-secondary, or customize with CSS targeting the navbar element. It determines the background color, allowing for easy color customization. The navigation bar color
3 min read
Creating a Navigation Bar with three Different Alignments using CSS
In this article, we are going to create a navigation bar with three different positions i.e left, right and Centre. To understand this article we need to understand some basic HTML and CSS. Approach: Here we are going to make a navigation bar for EBook websites.The tags we are going to use for the Navigation bar is header, image, nav, button. Here
5 min read
Slide Down a Navigation Bar on Scroll using HTML, CSS and JavaScript
To create a slide down navigation bar you need to use HTML, CSS, and JavaScript. HTML will make the structure of the body, CSS will make it looks good. This kind of sliding navbar looks attractive on a site. By using JavaScript you can easily make the navigation bar slideable when the user scrolls down. Creating Structure: In this section, we will
4 min read
How to Create Full Screen Overlay Navigation Bar using HTML CSS and JavaScript ?
Create a full screen Navigation Bar: In this article, you will learn how to create a full-screen navbar for your website. There are three methods to create a full screen overlay navigation bar which are listed below: From Left From top No animation- Just show You will be required to create two divs. One for the overlay container and the other for t
4 min read