Hey Guys, I hope you are pretty good! In this tutorial of Bootstrap 4. Today we will learn how to use Bootstrap 4 Navbar with lots of examples. Bootstrap directory provides us many examples and many methods for making a navbar. We also can use colors in a navbar using bootstrap specific colors which we are using in all the examples. I hope you will like this tutorial. So, guys, let’s get started.
Contents
- 1 What is Bootstrap 4 Navbar
- 2 1. Simple Navbar Example
- 3 2. Vertical Navbar of Bootstrap 4
- 4 3. Centered Navbar of Bootstrap 4
- 5 4. Navbar with Logo and Dropdowns
- 6 5. Fixed Navbar of Bootstrap 4
- 7 6. Collapsing Navbar of Bootstrap 4
- 8 Best Web Designing books you should read once:
- 9 Read Also:
- 10 ** Conclusion **
When you can open any websites you will see the navbar common in all the website. The main use of the navbar on every website. to make a website easier and more user-friendly to access and visite the full website. you can access main parts and move one page to another page just clicking on the navbar. also user can directly search the topic which their interests. normally the navbar is placed ate top of the website. but there we can not have any rule of the navbar you can place anywhere you want to place.
Basic Of Navigation Bar: The .navbar class is used to create a simple navbar on the website using bootstrap 4. If you want your navbar to responsive then you have to use .navbar-expand-xl|lg|md|sm classes. basically the xl, lg, md, and sm are the sizes of the devices where you want your navbar responsive. for example, if you want your navbar collapsible in the mobile to laptop view then you have to use .navbar-expand-lg class. This will make your navbar collapsible in the mobile to laptop views, But when your website will open then .navbar-expand-lg class will work and make your navbar expanded. The .nav-item class is used to create nav links. when you are adding navigation items in the navbar then you have to use .nav-item classes. you can create your navbar using <ul> and <li> tags. Let’s see the example of the normal navbar.
|
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 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 4 Navbar Example</title> </head> <body> <nav class="navbar navbar-expand-sm bg-light"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 3</a> </li> </ul> </nav> <br> <div class="container-fluid"> <h3>Bootstrap 4 Navbar Example</h3> </div> </body> </html> |
This is the light background example of the navbar. You can change colors of background as per your need using bootstrap 4 bg color classes. Like .bg-light, .bg-dark, .bg-success, .bg-danger and many more. you just have to add a class in the <nav> tag of HTML.
You can also set your navbar in the vertical-align. This is very easy to create you have to remove only once class .navbar-expand-xl|lg|md|sm. Which you have added in the <nav> tag. Let’s see the example of Vertical Navbar.
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 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 4 Vertical Navbar Example</title> </head> <body> <nav class="navbar bg-light"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 3</a> </li> </ul> </nav> <br> <div class="container-fluid"> <h3>Bootstrap 4 Vertical Navbar Example</h3> </div> </body> </html> |
Bootstrap also provides a navbar to be center. using only. justify-content-center class. This class helps the navbar to justify the center. Let’s go on the practical example of the center navbar.
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 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 4 Centered Navbar Example</title> </head> <body> <nav class="navbar navbar-expand-sm bg-light justify-content-center"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 3</a> </li> </ul> </nav> <br> <div class="container-fluid"> <h3>Bootstrap 4 Centered Navbar Example</h3> </div> </body> </html> |
In all the websites you have seen a navbar with logo and dropdowns. This is too easy for create. Now, we will go to create a navbar with a logo and dropdowns. using .navbar-brand and .dropdown classes. you can create a dropdown in the navbar which we have created in the Bootstrap 4 Dropdown tutorial. if you don’t know how to create a dropdown then read the Bootstrap 4 Dropdown post.
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 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 4 Navbar with Dropdown and Brand Logo</title> </head> <body> <nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <!-- Brand --> <a class="navbar-brand" href="#">Logo</a> <!-- Links --> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> <!-- Dropdown --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"> Dropdown link </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> </ul> </nav> <br> <div class="container"> <h3>Bootstrap 4 Navbar with Dropdown and Brand Logo</h3> </div> </body> </html> |
You can fixe your navbar in the top or bottom as per your need. Here bootstrap provides classes for that. If you want your navbar to fixed to top then you have to use .fixed-top class. and also if you want your navbar to fixed in the bottom then you have to use .fixed-bottom class. let’s see the example
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 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> </head> <body style="height:1500px"> <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top"> <a class="navbar-brand" href="#">Logo</a> <ul class="navbar-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> </ul> </nav> <div class="container-fluid" style="margin-top:80px"> <h3>Top Fixed Navbar of bootstrap 4</h3> <h1>Scroll this page to see the effect</h1> </div> </body> </html> |
To create a collapsing navbar you have to do some changes and you have to use some extra elements or classes. you have to add in the button of navbar class=” navbar-toggle”, data-toggle=”collapse” and data-target=”#idNameHere”. and also you have to add one class in the div of contents. which name .collapse, .navbar-collapse. Let’s see the example which makes you sure about this 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 31 32 33 34 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> </head> <body> <nav class="navbar navbar-expand-md bg-dark navbar-dark"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-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> </ul> </div> </nav> <br> <div class="container"> <h3>Collapsible Navbar of Bootstrap 4</h3> </div> </body> </html> |
Best Web Designing books you should read once:
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 this concept of the Bootstrap 4 navbar is now clear in your mind. if you have any kind of questions then don’t be hesitate for that. Ask your questions in the bottom comment box and also ask your questions on the ask-question page. I will replay to all the answers to your questions in a very short time.
Do you mind if I quote a few of your posts as long as I provide credit and sources back to your site? My blog site is in the exact same area of interest as yours and my users would truly benefit from some of the information you provide here. Please let me know if this alright with you. Thanks! Gabrila Cyrillus Neumann
I blog often and I truly thank you for your content. This great article has really peaked my interest. I am going to bookmark your blog and keep checking for new details about once a week. I opted in for your RSS feed too. Emeline Clint Pascoe
Lovely just what I was searching for.Thanks to the author for taking his clock time on this one.
Greate pieces. Keep writing such kind of information on your page. Agatha Ilario Gorlicki
Best view i have ever seen !