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 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
.
Bootstrap Vertical Navbar
Removing the .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 .justify-content-center
class
Bootstrap Colored Navbar
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.
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:
- class=”navbar-toggler”
- data-toggle=”collapse”
- data-target=”#thetarget”
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.
Bootstrap Navbar Text
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.
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
Similarly, the .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