Skip to content
Related Articles

Related Articles

Bootstrap 4 | Navs
  • Last Updated : 31 May, 2019

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:




<!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:






<!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:




<!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:




<!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:




<!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:




<!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:




<!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:




<!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 perticular 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:




<!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 perticular 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:

My Personal Notes arrow_drop_up
Recommended Articles
Page :