Bootstrap Affix
The Affix plugin is used to make any element fixed within the particular area of the web page. The element will not be able to move from its position while scrolling. We can say that it has been locked within the given position. The Affix plugin is used with several components like designing a Sticky footer, making a navigation bar fixed at the top or side of a web page, etc. It is specially used to help users to navigate faster between links. As they don't have to scroll the whole page to reach the navigation menu or footer.
Though Bootstrap 5 doesn't have its own affix plugin. But we can still make the components fixed using some customized CSS.
Fixed Navigation
On several websites, you have seen the top horizontal menu bar is fixed at the top of the page or vertical menubar fixed at the side of the page. For making the position include .position: fixed into your style sheet. further, assign the value of the positions in the style sheet. So let us see how we can create it using bootstrap 5.
Example: Creating horizontal menu fixed at top of the page using bootstrap 5
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.
<!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/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/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-light bg-light">
<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">
<h1>Scroll down</h1>
<br>
<h1>Scroll down</h1>
<br>
<h1>Scroll down</h1>
<br>
<h1>Scroll down</h1>
<br>
<h1>Scroll down</h1>
<br>
<h1>Scroll down</h1>
<br>
<h1>Scroll down</h1>
<br>
<h1>Scroll down</h1>
<br>
<h1>Scroll down</h1>
<br>
<h1>Scroll down</h1>
<br>
<h1>Scroll down</h1>
<br>
<h1>Scroll down</h1>
<br>
<h1>Scroll down</h1>
<br>
<h1>Scroll down</h1>
<br>
<h1>Scroll down</h1>
<br>
<h1>Scroll down</h1>
<br>
<h1>Scroll down</h1>
<br>
<h1>Scroll down</h1>
<br>
<h1>Scroll down</h1>
<br>
<h1>Scroll down</h1>
<br>
<h1>Scroll down</h1>
<br>
<h1>Scroll down</h1>
<br>
<h1>Scroll down</h1>
<br>
<h1>Scroll down</h1>
<br>
<br>
</div>
</body>
</html>
Output:
Here is the output of the above program.
Example: Creating Fixed side menu bar in bootstrap 5
To create a fixed side menu bar add position: fixed in the CSS <style> tag. Assign the position values of top and left to properly align the side menu bar. A wrapper is added to customize the side menu bar.
<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/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js"/>
<style>
.wrapper {
display: flex;
width: 100%;
height: 50%;
}
#sidebar {
width: 100px;
position: fixed;
top: 20;
left: 50;
height: 40vh;
z-index: 999;
background: cyan;
color: black;
transition: all 0.3s;
}
</style>
</head>
<body>
<div class="wrapper">
<!-- Sidebar -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>content</h3>
</div>
<ul class="list-unstyled components">
<li class="active">
<a href="#"> About me</a>
</li>
<li>
<a href="#">Careers</a>
</li>
<li>
<a href="#">Achevements</a>
</li>
</ul>
</nav>
</div>
<div class="container-fluid" style="margin-left:100px">
<h1>Scroll down</h1>
<br/>
<h1>Scroll down</h1>
<br/>
<h1>Scroll down</h1>
<br/>
<h1>Scroll down</h1>
<br/>
<h1>Scroll down</h1>
<br/>
<h1>Scroll down</h1>
<br/>
<h1>Scroll down</h1>
<br/>
<h1>Scroll down</h1>
<br/>
<h1>Scroll down</h1>
<br/>
<h1>Scroll down</h1>
<br/>
<h1>Scroll down</h1>
<br/>
<h1>Scroll down</h1>
<br/>
<h1>Scroll down</h1>
<br/>
<h1>Scroll down</h1>
<br/>
<h1>Scroll down</h1>
<br/>
<h1>Scroll down</h1>
<br/>
<h1>Scroll down</h1>
<br/>
<h1>Scroll down</h1>
<br/>
<h1>Scroll down</h1>
<br/>
<h1>Scroll down</h1>
<br/>
<h1>Scroll down</h1>
<br/>
<h1>Scroll down</h1>
<br/>
<h1>Scroll down</h1>
<br/>
<h1>Scroll down</h1>
<br/>
<br/>
</div>
</body>
</html>
Output:
Here is the output of the above program.
Sticky Footer
A Footer that is always fixed at the bottom of the web page is called a sticky Footer.
Example: Creating a sticky Footer
Use .footer class to add elements to the footer. For making it sticky add position:fixed within CSS <style> tag. To fix it to the bottom add bottom:0 to the CSS <style> tag.
<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/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js"/>
<style>
.footer {
position: fixed;
width: 100%;
left: 0;
bottom: 0;
text-align:center;
}
</style>
</head>
<body>
<div class="container-fluid" style="margin-left:100px">
<h1>Scroll down</h1>
<br/>
<h1>Scroll down</h1>
<br/>
<h1>Scroll down</h1>
<br/>
<h1>Scroll down</h1>
<br/>
<h1>Scroll down</h1>
<br/>
<h1>Scroll down</h1>
<br/>
<h1>Scroll down</h1>
<br/>
<h1>Scroll down</h1>
<br/>
<h1>Scroll down</h1>
<br/>
<h1>Scroll down</h1>
<br/>
<h1>Scroll down</h1>
<br/>
<h1>Scroll down</h1>
<br/>
<h1>Scroll down</h1>
<br/>
<h1>Scroll down</h1>
<br/>
<h1>Scroll down</h1>
<br/>
<h1>Scroll down</h1>
<br/>
<h1>Scroll down</h1>
<br/>
<h1>Scroll down</h1>
<br/>
<h1>Scroll down</h1>
<br/>
<h1>Scroll down</h1>
<br/>
<h1>Scroll down</h1>
<br/>
<h1>Scroll down</h1>
<br/>
<h1>Scroll down</h1>
<br/>
<h1>Scroll down</h1>
<br/>
<br/>
</div>
<div class="footer bg-secondary ">
<button type="button" class="btn btn-primary ">Main</button>
<button type="button" class="btn btn-info">Contacts</button>
<button type="button" class="btn btn-warning">About us</button>
</div>
</body>
</html>
Output:
Here is the output of the above code.
Conclusion
So here we have discussed how to fix the components using Bootstrap 5. Though the affix plugin was removed in bootstrap 4 and 5. Although we can fix components using a CSS stylesheet.
