Bootstrap Navigation Bars
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
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
<li> elements are then added with a
This is then followed by an
<a> element with a
Bootstrap Vertical Navbar
.navbar-expand-xl|lg|md|sm class will get you a vertical navigation bar
Bootstrap Centered Navbar
The centered Navbar can be created by using the
Bootstrap Colored Navbar
You can use appropriate .bg-color classes for changing the background colors of the navigation bars.
Some prime examples are –
You can also make the text color white for all the links in the navbar by using the
.navbar-light class will help adding a black text color.
Bootstrap 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 Bootstrap 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
class="collapse navbar-collapse" and an id that will match the data-target of the button: “thetarget” is also added.
Navbar Forms and Buttons
<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.
Bootstrap Navbar Text
.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.
Bootstrap 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
.fixed-bottom class can be used to make the navbar stay at the bottom of the page while scrolling.
You can also use the
.sticky-top class if your nav bar somewhere