Hello Guys, Welcome again to the Bootstrap 4 Tutorials. Today in this article we will discuss Bootstrap 4 Navs. And I will tell you all the uses of Bootstrap 4 Navs. You know very well Bootstrap is one of the best front-end frameworks in the world. Part of this Bootstrap provides us Best navs for websites.
I think you have seen many navs on many different websites. Even we can’t think website without Navs. Everywhere we can see navs on websites. But they are using custom and modified navs with lots of codes. You can also create your own nav but this is too lengthy to create. Bootstrap gives us navs ready mate we have to use just different classes for different navs. Code of navs inbuild in Bootstrap package. in the Bootstrap 4 Bootstrap provides us Navs with a very good design with easy customization. So in this tutorial, we will see all the navs with very easy examples. you can ask questions if you found any query in your mind. Let’s Get Started Guys.
If we can talk about classes of using navs then you can use normal nav using .nav
class. Nav class is default(associate) class for Navs. You can use nav class with different elements there is not any specific element for this. But most of people can use <ul> and <nav> elements for navs.
You can also other classes with nav class. There are some classes are required with .nav class. Like when you going to add items in navs then you have to use .nav-item
class for that. When you are going to use any links in Navgation then you have to use .nav-link
class. Same as if you want to show active nav in navbar then you have to use .active
class for that. Same as we have many Nav methods. So without time westing let’s do practicals.
Contents
If you want to make a simple and beautiful menu bar, Then create an unordered list and add items in the <ul> which you want to make menus. When you create an unordered list then you have to use .nav
class in the <ul>. After that when you add list item in the <li> element you have to use .nav-item
for list items. For more See the Example which will help you to understand the concept.
Example
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 4 Navs</title> <meta charset="utf-8"> </head> <body> <div class="container"> <h2>Simple Bootstrap 4 Nav</h2> <p>Basic horizontal menu:</p> <ul class="nav"> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> </div> </body> </html> |
You can adjust the alignment of your navs very easily using some classes. This one is very easy to use. You just have to use class to justify your navs.
Like if you want to justify your navs in center then you have to add .justify-content-center
class. This will justify your class in the center of your device very easily.
Same as center justify if you want to justify your navigation at the end of the screen I mean on the right side then you have to add .justify-content-end
and then you navs are gone on the right side :). Guys, it’s very easy for justify. Move on the Example.
You can also disable nav items if you want using
.disabled
class. And also you can use Navs in the Vertical Alignment using.flex-column
Example
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> </head> <body> <div class="container"> <h2>Bootstrap 4 Nav Adjustment</h2> <p>Navs in the Left-aligned(default):</p> <ul class="nav"> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> <p>Navs in the Center:</p> <ul class="nav justify-content-center"> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> <p class="text-right">Navs in the Right-aligned:</p> <ul class="nav justify-content-end"> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> </div> </body> </html> |
3. Tabs with Dropdown in Bootstrap 4
You can also use nav as tabs. This is totally comfortable as tabs. You can turn your nav menu into the navigation tabs using just.nav-tabs
class. .active
the class will help you to show active/current links. One interesting thing is you can use sub-menu also in all the methods. using dropdown classes which we have seen in the previous article. you can also read the Dropdown article if you have any queries. So, Common guys let’s see the example of tabs with dropdown.
Example
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 4 Tabs with Dropdown by DesignHub4u.com</title> <meta charset="utf-8"> </head> <body> <div class="container"> <h2>Bootstrap 4 Tabs with Dropdown by DesignHub4u.com</h2> <ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a></div> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> </div> </body> </html> |
4. Pills with Dropdown in Bootstrap 4
Guys, We have seen tabs menu of navs as well we can also use navs as a pill. with dropdown support. Pills also support dropdowns so let’s see an example without time-consuming.
Example
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!DOCTYPE html> <html lang="en"> <head> <title>Pills with Dropdown In Bootstrap 4 by DesignHub4u.com</title> </head> <body> <div class="container"> <h2>Pills with Dropdown In Bootstrap 4 by DesignHub4u.com</h2> <ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a></div> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> </div> </body> </html> |
5. Toggleable / Dynamic Tabs
You can also create Toggleable or Dynamic Tabs the same as we did. there are some extra classes/attributes that you have to add in your tabs. You want to make the tabs toggleable, then add the data-toggle="tab"
attribute to each link. Then add a .tab-pane
class with a unique ID for every tab and wrap them inside a <div>
element with class .tab-content
.
Fade also work here. So, You can fade in and fade out using .fade
the class to .tab-pane
. See the example to clear the concept.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<!DOCTYPE html> <html lang="en"> <head> <title>Toggleable Tabs in the Bootstrap 4 by DesignHub4u.com</title> </head> <body> <br> <div class="container"> <h2>Toggleable Tabs in the Bootstrap 4 by DesignHub4u.com</h2> <br> <!-- Nav tabs --> <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="#menu1">Menu 1</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a> </li> </ul> <!-- Tab panes --> <div class="tab-content"> <div id="home" class="container tab-pane active"><br> <h3>HOME</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <div id="menu1" class="container tab-pane fade"><br> <h3>Menu 1</h3> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <div id="menu2" class="container tab-pane fade"><br> <h3>Menu 2</h3> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p> </div> </div> </div> </body> </html> |
You can also able to create Toggleable/Dynamic pills also same as toggleable tabs.
Read Also:
1. Introduction of Bootstrap 4
2. What is the difference between Bootstrap 3 and Bootstrap 4?
3. Advantages of Using Bootstrap 4
4. Online or Offline? How should you use bootstrap 4 Online or Offline? Why?
5. Bootstrap 4 Grid System with Separated Examples
6. Bootstrap 4 Tables with structured and easy examples
7. Bootstrap 4 Buttons with structured and easy examples
8. Bootstrap 4 Cards with structured and easy examples
9. Bootstrap 4 Dropdowns with structured and easy examples
10. Bootstrap 4 Navs with structured and easy examples
11. Bootstrap 4 Navbar with structured and easy examples
12. Bootstrap 4 Carousel with easy examples
13. Bootstrap 4 Modal with easy examples
** Conclusion **
I hope you have clear the Bootstrap 4 Navs. For more you have any query then you can also ask me at the bottom. I will replay to you within 2 hours with your question’s solution.
Hello I am so glad I found your website, I really found you by mistake, while I was browsing on Aol for something else, Anyways I am here now and would just like to say many thanks for a marvelous post and a all round interesting blog (I also love the theme/design), I don’t have time to read it all at the minute but I have book-marked it and also included your RSS feeds, so when I have time I will be back to read a lot more, Please do keep up the great job.| а
Like!! I blog quite often and I genuinely thank you for your information. The article has truly peaked my interest.
thank you.
I will immediately take hold of your rss feed as I can’t in finding your e-mail subscription link or e-newsletter service. Do you have any? Kindly allow me know so that I may just subscribe. Thanks.