Bootstrap vertical navbar examples
May 12, 2022Hi Friends 👋,
Welcome To aGuideHub! ❤️
Today, I am going to show you. how to create vertical navbar in bootstrap with code example.
The basic vertical menu in bootstrap is only based on .nav class. In the <ul> tag, class “nav navbar-nav” helps to make menu bar vertical
Remove the .navbar-expand-* class to create a navigation bar that will always be vertical:In the tag, class “nav navbar-nav” helps to make menu bar vertical. Explanation: The Default vertical menu in bootstrap takes space otherwise we need to use collapse class.
Table of contents
- Includes bootstrap view
- Includes bootstrap library
- Define its class name
This article will guide you to adding vertical navbar in Bootstrap with example.
The basic vertical menu in bootstrap is only based on .nav class. In the <ul> tag, class nav navbar-nav helps to make menu bar vertical.
Step 1: Includes bootstrap view
To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>.
<meta name="viewport" content="width=device-width, initial-scale=1" />Step 2: Includes bootstrap library
First of all, load the Bootstrap framework CSS into the head tag of your webpage.
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>Step 3: Define its class name
After that, create the vertical navbar examples with a class name .navbar navbar-expand-xl|lg|md|sm.
<div class="container">
<h1 style="color:rgb(231, 62, 24);">
aGuideHub
</h1>
<h2>Vertical Navbar</h2>
<nav class="navbar navbar-expand-xl|lg|md|sm navbar-light bg-light">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Section</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog</a>
</li>
</ul>
</nav>
</div>Example.
Let’s look at the following example to understand how it basically works:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Navigation Bar</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
</head>
<body style="text-align:center;">
<div class="container">
<h1 style="color:rgb(231, 62, 24);">
aGuideHub
</h1>
<h2>Vertical Navbar</h2>
<nav class="navbar navbar-expand-xl|lg|md|sm navbar-light bg-light">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Section</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog</a>
</li>
</ul>
</nav>
</div>
</body>
</html>Check the output of the above code example.
All the best 👍
