postImage

How to create Beautiful Bootstrap 5 Navbars

blogImage

By Amarachi Iheanacho

Technical Writer

Bootstrap Navigation Bars are user interface elements that contain links to different sections of the website; they help users navigate or find their way around the website's content.

Typically navigation bars are situated at the top of a website or the side as a hamburger menu on the mobile. It is also built so that it is seen on every page of the website as it makes for a better user experience. This is because it makes going through a website easier for the user. An impatient user can easily find what they want.

Table Of Contents

  • What are we building?
  • Prerequisites
  • What is Contrast?
  • Creating our Bootstrap 5 NavBar
  • Conclusion
  • Resources

What are we building?

In this article, we are going to walk through building a Bootstrap 5 Navigation bar with Contrast.

We are going to build a navigation bar just like the image we have below:

Bootstrap 5 Navbars.

Prerequisites

To make the most of this article, it is essential that you have the following:

  • A basic understanding of HTML.
  • A basic understanding of CSS.

What is Contrast?

Contrast or Contrast Design Bootstrap is an elegant bootstrap UI kit featuring over 2000+ essential components. Contrast helps simplify the web development process and can be integrated with any project to build mobile-first, responsive, and elegant websites and web apps. With predefined styles, you can now create web pages faster than ever.

Adding the Contrast library CDN

To have access to these predefined styles, we need to install the Bootstrap Contrast library. To do this, we need to add the Contrast Bootstrap CDN to our project.

We include the CSS CDN responsible for the Bootstrap styling in the <head> in our HTML file.

1<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cdbootstrap@1.0.0/css/bootstrap.min.css"/>
2<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cdbootstrap@1.0.0/css/cdb.min.css"/>

Next up, we include the JavaScript CDN links at the bottom of our project in the <body>. We do this because we want the components to load before adding the interactive functionality that JavaScript gives us.

1<script src="https://cdn.jsdelivr.net/npm/cdbootstrap@1.0.0/js/bootstrap.min.js"></script>
2<script src="https://cdn.jsdelivr.net/npm/cdbootstrap@1.0.0/js/popper.min.js"></script>
3<script src="https://cdn.jsdelivr.net/npm/cdbootstrap@1.0.0/js/cdb.min.js"></script>

After adding both the CSS and JavaScript CDNs, we then add our icon CDN so we get access to the icons.

1<script src="https://kit.fontawesome.com/9d1d9a82d2.js" crossorigin="anonymous"></script>

our HTML file should look like this.

1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cdbootstrap@1.0.0/css/bootstrap.min.css"/>
8 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cdbootstrap@1.0.0/css/cdb.min.css"/>
9 <title>Document</title>
10</head>
11<body>
12
13
14<script src="https://cdn.jsdelivr.net/npm/cdbootstrap@1.0.0/js/bootstrap.min.js"></script>
15<script src="https://cdn.jsdelivr.net/npm/cdbootstrap@1.0.0/js/popper.min.js"></script>
16<script src="https://cdn.jsdelivr.net/npm/cdbootstrap@1.0.0/js/cdb.min.js"></script>
17
18</body>
19
20</html>

Creating our Bootstrap 5 Navbar

With Contrast, Bootstrap, we get access to two different Bootstrap layouts, and in this article, we will walk you through creating both of them.

Layout 1

In this navbar, we have the brand or logo in bold letters, which usually leads to the website's home page, at the left of the navigation bar, and to the right, the navigation links that lead to other pages of the website.

To create this navbar, we make use of native HTML elements like

  • <a href= ""></a> for links, use the href attribute to pass the link as a parameter.
  • <nav></nav>, this element is the box that holds the entire navigation bar
  • <ul></ul>, ul, which stands for unordered link, is used to group links without numbers (e.g., bullet points, hyphens, etc.).
  • <li></li> this represents a list item in the group list (<ul></ul>). In this, we embed links and icons tags so that our links can have them.
  • <i></i> this tag is used to put icons in our project.
1<header>
2 <nav class="navbar navbar-expand-md navbar-dark bg-dark">
3 <a class="navbar-brand" href="#">Navbar</a>
4 <button
5 class="navbar-toggler"
6 type="button"
7 data-toggle="collapse"
8 data-target="#navbarSupportedContent"
9 aria-controls="navbarSupportedContent"
10 aria-expanded="false"
11 aria-label="Toggle navigation">
12 <span class="navbar-toggler-icon"></span>
13 </button>
14
15 <div class="collapse navbar-collapse " id="navbarSupportedContent">
16 <ul class="navbar-nav">
17 <li class="nav-item active">
18 <a class="nav-link" href="#">
19 <i class="fa fa-home"></i>
20 Home
21 </a>
22 </li>
23 <li class="nav-item">
24 <a class="nav-link" href="#">
25 <i class="fas fa-feather"></i>
26 Features
27 </a>
28 </li>
29 <li class="nav-item dropdown">
30 <a class="nav-link" href="#" >
31 <i class="fa fa-dollar"></i>
32 Pricing
33 </a>
34 </li>
35 <li class="nav-item">
36 <a class="nav-link" href="#">
37 <i class="fa fa-cogs"></i>
38 Option
39 </a>
40 </li>
41 </ul>
42 </div>
43 </nav>
44</header>

Bootstrap 5 Navbars.

Layout 2

1<header>
2 <nav class="navbar navbar-expand-md navbar-dark bg-dark">
3 <a class="navbar-brand" href="#">Navbar</a>
4 <button
5 class="navbar-toggler"
6 type="button"
7 data-toggle="collapse"
8 data-target="#navbarSupportedContent"
9 aria-controls="navbarSupportedContent"
10 aria-expanded="false"
11 aria-label="Toggle navigation">
12 <span class="navbar-toggler-icon"></span>
13 </button>
14
15 <div class="collapse navbar-collapse " id="navbarSupportedContent">
16
17 <ul class="navbar-nav mr-auto">
18 <li class="nav-item">
19 <a class="nav-link" href="#">
20 <i class="fas fa-feather"></i>
21 About
22 </a>
23 </li>
24 <li class="nav-item dropdown">
25 <a class="nav-link" href="#" >
26 <i class="fa fa-dollar"></i>
27 Pricing
28 </a>
29 </li>
30 </ul>
31
32 <ul class="navbar-nav">
33 <li class="nav-item">
34 <a class="nav-link" href="#">
35 <i class="fa fa-globe"></i>
36 EN
37 </a>
38 </li>
39 <li class="nav-item dropdown">
40 <a class="nav-link" href="#" >
41 <i class="fa fa-user"></i>
42 Login
43 </a>
44 </li>
45 <li class="nav-item">
46 <button class="btn bg-white nav-link text-dark">
47 Sign Up
48 </button>
49 </li>
50 </ul>
51 </div>
52 </nav>
53</header>

With this block of code above, we have created a beautiful navbar.

Bootstrap 5 Navbars.

Conclusion

In this article, we discussed Bootstrap navigation bars and why we need navigation bars in our project. We also discussed why navigation bars are typically at the top of the website, finally, and, more importantly, how to create one in your project using the Bootstrap library Contrast.

Resources

You may find the following resources helpful.

Create Stunning websites and web apps

Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help reduce the amount of time we spend doing that, so we can focus on building some other aspects of the project. Contrast Bootstrap PRO consists of a UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.Try contrast pro

ad-banner

Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc project with a clean, prebuilt and well documented template and UI components.Learn more about Contrast

Related Posts

Comments

...