Bootstrap Navigation Bar

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, you can make the navigation bar extend or collapse as required.

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 top you can use the .fixed-top class.

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 middle of the page and you want it fixed at the top when you scroll past it.