The navigation bar can be seen as a navigation header placed at the top of your web-page.
Bootstrap 4 helps you style the Navigation bar making it responsive and good looking to the different screen sizes.
With the help of Bootstrap
Basic Navigation Bar
For a standard navigation bar we use the .navbar class. This is generally followed by a responsive collapsing class: .navbar-expand-xl|lg|md|sm that stacks the navbar vertically on screens of various sizes.
The links inside the navbar are added using a <ul> element and class=”navbar-nav”. The<li> elements are then added with a .nav-item class. This is then followed by an <a> element with a .nav-link class.
Removing the .navbar-expand-xl|lg|md|sm class will get you a vertical navigation bar
The centered Navbar can be created by using the .justify-content-center class
You can use appropriate .bg-color classes for changing the background colors of the navigation bars.
Some prime examples are -.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light You can also make the text color white for all the links in the navbar by using the .navbar-dark class. Similarly, the .navbar-light class will help adding a black text color.
Brand / Logo
You can use the .navbar-brand class to highlight the brand/logo/project name of your web-page.
If you use the .navbar-brand class with images, Bootstrap 4 will style the image on its own, to fit the navbar vertically.
Collapsing the Navigation Bar
It is a popular scenario, nowadays, to make the nave bar links hidden, especially on small screens.
Generally the navbars are replaced by some buttons, clicking on which will bring the links back.
This can be achieved by creating Collapsible Navbars usin bootstrap. Here, we use a button with following attrbutes:
Finally, you have to wrap all of this inside a <div> element.
The class=”collapse navbar-collapse”and an id that will match the data-target of the button: “thetarget” is also added.
Navbar Forms and Buttons
Use class=”form-inline” with <form> element for grouping the inputs and buttons side-by-side.
Other input classes like .input-group-prepend or .input-group-append can also be added to attach an icon or help text next to the input field.
The .navbar-text class can be used for aligning the “non-link” elements vertically inside the navbar. This will ensure proper padding as well as text color.
Fixed Navigation Bar
You can also fix the navigation bar at the top or at the bottom of the page. Being fixed implies that the navigation bar will stay visible at the top or bottom of the page no matter how much you scroll.
For fixing the navigation bar at
You can also use the .sticky-top class if your nav bar somewhere