Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Bootstrap 4 | Navs

  • Last Updated : 28 Jul, 2021

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 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" 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 Browser:

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



My Personal Notes arrow_drop_up
Recommended Articles
Page :