How to use affix in bootstrap 5?
April 28, 2022Hi Friends 👋,
Welcome To aGuideHub! ❤️
Today, I am going to show you. How to use affix in bootstrap 5 with code example.
Here we are creating a horizontal navbar. We are positioning it to the top, so include top:0 in the <style> tag. Also position: fixed attribute is used to make navbar fixed. You may add more custom settings. Further, we have added some random long contents to see the fixed menu while scrolling.
Though Bootstrap 5 doesn’t have its own affix plugin. But we can still make the components fixed using some customized CSS.
Example:
Let’s look at the following example to understand how it basically works:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Flex</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" ></script>
<style>
.navbar {
position: fixed;
width: 100%;
left: 0;
top: 0;
}
</style>
<body>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About us</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid">
<h3>Welcome To aGuideHub!</h3>
<br>
<h3>Welcome To aGuideHub!</h3>
<br>
<h3>Welcome To aGuideHub!</h3>
<br>
<h3>Welcome To aGuideHub!</h3>
<br>
<h3>Welcome To aGuideHub!</h3>
<br>
<h3>Welcome To aGuideHub!</h3>
<br>
<h3>Welcome To aGuideHub!</h3>
<br>
<h3>Welcome To aGuideHub!</h3>
<br>
<h3>Welcome To aGuideHub!</h3>
<br>
<h3>Welcome To aGuideHub!</h3>
<br>
<h3>Welcome To aGuideHub!</h3>
<br>
<h3>Welcome To aGuideHub!</h3>
<br>
<h3>Welcome To aGuideHub!</h3>
<br>
<br>
</div>
</body>
</html> Check the output of the above code example.
All the best 👍