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:
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 data 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
Please Login to comment...