A navigation bar is used in every website to make it more user-friendly so that the navigation through the website becomes easy and the user can directly search for the topic of their interest.
Navbar Placement is used to set the position of the navbar. We can use position utilities for the placement of the Navbar like fixed-top, fixed-bottom or sticky-top, etc.
Navbar Placement used Classes:
- fixed-top: This class is used for the fixed position of the navbar to the top.
- fixed-bottom: This class is used for the fixed position of the navbar to the bottom.
- sticky-top: This class is used to set the position of the navbar to the sticky top.
- sticky-bottom: This class is used to set the position of the navbar to the sticky bottom.
Syntax:
<nav class="navbar fixed-*">
<div>
<a class="navbar-brand" href="#">
...
</a>
...
</div>
</nav>Note: We can substitute this * with top or bottom as per requirement
Example 1: In this example, we will learn about Navbar placement at a fixed-top and place the navbar at the top.
<!DOCTYPE html> <html lang="en">
<head>
<title>
Bootstrap 5 Navbar Placement
</title>
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous">
</script>
</head>
<body>
<div class="container text-center">
<h1 class="text-success" style="margin-top: 70px;">
GeeksforGeeks
</h1>
<h2>Bootstrap 5 Navbar Placement</h2>
<nav class="navbar container fixed-top navbar-expand
navbar-light bg-success">
<a class="navbar-brand" href="#">
GeeksforGeeks
</a>
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">HTML</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CSS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Bootstrap</a>
</li>
</ul>
</nav>
</div>
</body>
</html>
|
Output:
Example 2: In this example, we will learn about Navbar placement at the fixed-bottom and place navbar at the bottom.
<!DOCTYPE html> <html lang="en">
<head>
<title>
Bootstrap 5 Navbar Placement
</title>
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous">
</script>
</head>
<body>
<div class="container text-center">
<h1 class="text-success">
GeeksforGeeks
</h1>
<h2>Bootstrap 5 Navbar Placement</h2>
<nav class="navbar container fixed-bottom navbar-expand
navbar-light bg-success">
<a class="navbar-brand" href="#">
GeeksforGeeks
</a>
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">HTML</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CSS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Bootstrap</a>
</li>
</ul>
</nav>
</div>
</body>
</html>
|
Output:
References: https://getbootstrap.com/docs/5.0/components/navbar/#placement