Bootstrap 4 | Navs
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:
