Skip to content
Related Articles

Related Articles

Bootstrap 4 | Navs

Improve Article
Save Article
  • Last Updated : 29 Apr, 2022
Improve Article
Save Article

Nav Menu: The .nav, .nav-item and .nav-link classes are used to create navigation menu. The .nav, .nav-item and .nav-link classes are used with <ul>, <li> and link element respectively.
 

Example:  

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <title>Nav menu</title>
    <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 style="text-align:center;">
    <div class="container">
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
        <h2>Navigation Menu</h2>
        <ul class="nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Algo</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">DS</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Languages</a>
            </li>
        </ul>
    </div>
</body>
</html>

Output: 
 

Aligned Nav: The .justify-content-center and .justify-content-end classes are used to set the alignment of navigation menu to center and end respectively. 
 

Example:  

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <title>Nav menu</title>
    <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>
    <div class="container">
        <h1 style="color:green;text-align:center;">
            GeeksforGeeks
        </h1>
        <h2 style="text-align:center;">
            Aligned Navigation Menu
        </h2>
        <div>Left-aligned nav</div>
        <ul class="nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Algo</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">DS</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Languages</a>
            </li>
        </ul>
        <br><br>
        <div class="text-center">Centered-aligned nav</div>
        <ul class="nav justify-content-center">
            <li class="nav-item">
                <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Algo</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">DS</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Languages</a>
            </li>
        </ul>
        <br><br>
        <div class="text-right">Right-aligned nav</div>
        <ul class="nav justify-content-end">
            <li class="nav-item">
                <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Algo</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">DS</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Languages</a>
            </li>
        </ul>
    </div>
</body>
</html>

Output: 
 

Vertical Nav: The .flex-column class is used to create the vertical navigation menu.

Example:  

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <title>Nav menu</title>
    <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>
    <div class="container">
        <h1 style="color:green;text-align:center;">
            GeeksforGeeks
        </h1>
        <h2 style="text-align:center;">
            Vertical Nav Menu
        </h2>
        <ul class="nav flex-column">
            <li class="nav-item">
                <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Algo</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">DS</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Languages</a>
            </li>
        </ul>
    </div>
</body>
</html>

Output: 
 

Tabs Nav Menu: The .nav-tabs class is used to create the tab navigation menu. The .active class is used to active the link.

Example:  

html




<!DOCTYPE html>
<html lang="en">
<head>
    <title>Nav menu</title>
    <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>
    <div class="container">
        <h1 style="color:green;text-align:center;">
            GeeksforGeeks
        </h1>
        <h2 style="text-align:center;">
            Vertical Nav Menu
        </h2>
        <ul class="nav flex-column">
            <li class="nav-item">
                <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Algo</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">DS</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Languages</a>
            </li>
        </ul>
    </div>
</body>
</html>

Output: 
 

Pills Nav Menu: The .nav-pills class is used to create navigation pills menu. 

Example:  

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <title>Nav menu</title>
    <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>
    <div class="container">
        <h1 style="color:green;text-align:center;">
            GeeksforGeeks
        </h1>
        <h2 style="text-align:center;">
            Pills Nav Menu
        </h2>
        <ul class="nav nav-pills">
            <li class="nav-item">
                <a class="nav-link active" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Algo</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">DS</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Languages</a>
            </li>
        </ul>
    </div>
</body>
</html>

Output: 
 

Justified Tabs/pills Nav Menu: The .nav-justified class is used to justify the tabs/pills navigation menu.
Example: 
 

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <title>Nav menu</title>
    <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>
    <div class="container">
        <h1 style="color:green;text-align:center;">
            GeeksforGeeks
        </h1>
        <h2 style="text-align:center;">
            Justified Tabs/pills Nav Menu
        </h2>
        <ul class="nav nav-tabs nav-justified">
            <li class="nav-item">
                <a class="nav-link active" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Algo</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">DS</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Languages</a>
            </li>
        </ul>
        <br><br>
        <ul class="nav nav-pills nav-justified">
            <li class="nav-item">
                <a class="nav-link active" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Algo</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">DS</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Languages</a>
            </li>
        </ul>
    </div>
</body>
</html>

Output: 
 

Pills/Tabs with Dropdown Nav Menu: The .nav-pills/.nav-tabs class is used to create navigation pills/tabs menu and .dropdown class is used to create dropdown nav menu.
Example: 
 

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <title>Nav menu</title>
    <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>
    <div class="container">
        <h1 style="color:green;text-align:center;">
            GeeksforGeeks
        </h1>
        <h2 style="text-align:center;">
            Pills/Tabs with Dropdown Nav Menu
        </h2>
        <ul class="nav nav-pills">
            <li class="nav-item">
                <a class="nav-link active" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Algo</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">DS</a>
            </li>
            <li class="nav-item">
                <a class="nav-link dropdown-toggle"
                    data-toggle="dropdown" href="#">
                    Languages
                </a>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="#">C</a>
                    <a class="dropdown-item" href="#">C++</a>
                    <a class="dropdown-item" href="#">Java</a>
                    <a class="dropdown-item" href="#">Python</a>
                </div>
            </li>
        </ul>
        <br><br>
        <ul class="nav nav-tabs">
            <li class="nav-item">
                <a class="nav-link active" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Algo</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">DS</a>
            </li>
            <li class="nav-item">
                <a class="nav-link dropdown-toggle"
                    data-toggle="dropdown" href="#">
                    Languages
                </a>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="#">C</a>
                    <a class="dropdown-item" href="#">C++</a>
                    <a class="dropdown-item" href="#">Java</a>
                    <a class="dropdown-item" href="#">Python</a>
                </div>
            </li>
        </ul>
    </div>
</body>
</html>

Output: 
 

Toggleable/Dynamic Pills Nav Menu: The data-toggle=”pill” attribute is used to make the pills toggleable. Then add a .tab-pane class with a unique ID for every tab and wrap them inside a <div> element with class .tab-content.
Example: 
 

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <title>Nav menu</title>
    <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>
    <div class="container">
        <h1 style="color:green;text-align:center;">
            GeeksforGeeks
        </h1>
        <h2 style="text-align:center;">
            Toggleable/Dynamic Pills Nav Menu
        </h2>
        <ul class="nav nav-pills" role="tablist">
            <li class="nav-item">
                <a class="nav-link active"
                    data-toggle="pill" href="#home">
                    Home
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="pill"
                    href="#algo">
                    Algo
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="pill"
                    href="#ds">
                    DS
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="pill"
                    href="#languages">
                    Languages
                </a>
            </li>
        </ul>
        <div class="tab-content">
            <div id="home" class="container tab-pane active">
                <strong>Home</strong>
                 
<p>
                    GeeksforGeeks: It is a computer science portal
                    where you can learn programming
                </p>
 
            </div>
            <div id="algo" class="container tab-pane fade">
                <strong>algo</strong>
                 
<p>
                    A process or set of rules to be followed in
                    calculations or other problem-solving operations
                </p>
 
            </div>
            <div id="ds" class="container tab-pane fade">
                <strong>DS</strong>
                 
<p>
                    Data Structure is a particular way to organizing
                    the dat in computer memory
                </p>
 
            </div>
            <div id="languages" class="container tab-pane fade">
                <strong>Languages</strong>
                 
<p>
                    There are many programming languages exist
                    in computer science.
                </p>
 
            </div>
        </div>
    </div>
</body>
</html>

Output: 
 

Toggleable/Dynamic Tabs Nav Menu: The data-toggle=”tab” attribute is used to make the tabs toggleable. Then add a .tab-pane class with a unique ID for every tab and wrap them inside a <div> element with class .tab-content.
Example: 
 

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <title>Nav menu</title>
    <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>
    <div class="container">
        <h1 style="color:green;text-align:center;">
            GeeksforGeeks
        </h1>
        <h2 style="text-align:center;">
            Toggleable/Dynamic Tabs Nav Menu
        </h2>
        <ul class="nav nav-tabs" role="tablist">
            <li class="nav-item">
                <a class="nav-link active"
                    data-toggle="tab" href="#home">
                    Home
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab"
                    href="#algo">
                    Algo
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab"
                    href="#ds">
                    DS
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab"
                    href="#languages">
                    Languages
                </a>
            </li>
        </ul>
        <div class="tab-content">
            <div id="home" class="container tab-pane active">
                <strong>Home</strong>
                 
<p>
                    GeeksforGeeks: It is a computer science portal
                    where you can learn programming
                </p>
 
            </div>
            <div id="algo" class="container tab-pane fade">
                <strong>algo</strong>
                 
<p>
                    A process or set of rules to be followed in
                    calculations or other problem-solving operations
                </p>
 
            </div>
            <div id="ds" class="container tab-pane fade">
                <strong>DS</strong>
                 
<p>
                    Data Structure is a particular way to organizing
                    the dat in computer memory
                </p>
 
            </div>
            <div id="languages" class="container tab-pane fade">
                <strong>Languages</strong>
                 
<p>
                    There are many programming languages exist
                    in computer science.
                </p>
 
            </div>
        </div>
    </div>
</body>
</html>

Output: 
 

 Supported Browsers:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!