Bootstrap Affix Plugin

Mastering Bootstrap Affix Plugin, Filters, and Containers

In our previous blog, we explored Bootstrap Modal, Tooltip, Popover, and Scrollspy Plugins in detail. These interactive components enhance user experience by displaying content elegantly and managing navigation smoothly. Now, let’s switch gears and dive into some more advanced but highly practical Bootstrap features.

In this blog, we will cover Bootstrap Affix Plugin, Bootstrap Filters, and new tools, which are added on the BS 4 version like Bootstrap Containers. These tools are essential for building dynamic, responsive web layouts.

What is the Bootstrap Affix Plugin?

The Affix plugin allows elements to become fixed (sticky) on the page when you scroll past them. This is especially useful for navigation menus or sidebars that you want to keep visible while scrolling.

Syntax:

<div data-spy="affix" data-offset-top="100">...</div>

Why Use Affix?

Keeps navigation or important UI elements visible
Enhances user experience
Great for long-scrolling pages

Example 1: An Affixed Navbar

<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="60">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Credosystemz</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Courses</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</nav>
<div class="container">
  <h3>Scroll down to see the navbar affix to the top</h3>
  <p>More content...</p>
</div>

Example 2: An Affixed Sidebar

<body data-spy="scroll" data-target="#myScrollspy" data-offset="20">
  <div class="container">
    <div class="row">
      <nav class="col-sm-3" id="myScrollspy">
        <ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="100">
          <li class="active"><a href="#section1">Section 1</a></li>
          <li><a href="#section2">Section 2</a></li>
          <li><a href="#section3">Section 3</a></li>
        </ul>
      </nav>
      <div class="col-sm-9">
        <div id="section1" style="height:600px;"><h2>Section 1</h2></div>
        <div id="section2" style="height:600px;"><h2>Section 2</h2></div>
        <div id="section3" style="height:600px;"><h2>Section 3</h2></div>
      </div>
    </div>
  </div>

How To Create an Affixed Navigation Menu

Add data-spy=”affix” to the element.
Set data-offset-top to define when it becomes sticky.
Use proper CSS to adjust spacing.

Example Explained

When the scroll reaches data-offset-top, the menu becomes fixed.

How it works

The Affix plugin is triggered using the data-spy=”affix” attribute or via JavaScript.
When the user scrolls down the page and reaches the element’s data-offset-top value, the plugin dynamically changes the element’s CSS properties.
The element receives the class .affix, .affix-top, or .affix-bottom depending on the scroll position.
You can define styles for these classes to control how the affixed element should look and behave.
It does not interfere with the layout until the scroll reaches the threshold.
This behavior gives users a smooth experience by keeping important elements (like menus) visible without taking up space unnecessarily.

Notes:

data-spy=”affix” activates the plugin.
data-offset-top sets the scroll threshold.
When triggered, the element becomes position: fixed.
Affix is not available in Bootstrap 5; use position: sticky instead.

Scrollspy & Affix

Scrollspy automatically updates the navigation bar based on scroll position. You can combine it with Affix for sticky and dynamic menus.

<body data-spy="scroll" data-target="#myScrollspy" data-offset="50">

Bootstrap Filters (Advanced)

Filters help users find specific content easily. Bootstrap doesn’t have built-in filters, but you can create them using HTML, CSS, and jQuery.

Filter Tables

Use an input box to filter table rows based on keywords.

<input id="myInput" type="text" placeholder="Search...">
<table id="myTable">
  <tr><td>HTML</td></tr>
  <tr><td>CSS</td></tr>
  <tr><td>JavaScript</td></tr>
</table>

$("#myInput").on("keyup", function() {
  var value = $(this).val().toLowerCase();
  $("#myTable tr").filter(function() {
    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
  });
});

Filter Lists

<ul id="myList">
  <li>HTML</li>
  <li>Bootstrap</li>
  <li>JavaScript</li>
</ul>

Filter Dropdowns

$('#dropdownSearch').on('keyup', function() {
  var value = $(this).val().toLowerCase();
  $('#dropdownMenu option').filter(function() {
    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
  });
});

Filter Anything

$('.filter-input').on('keyup', function() {
  var value = $(this).val().toLowerCase();
  $('.filter-item').filter(function() {
    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
  });
});

Important Notes

Use keyup() and filter() for dynamic filtering.
Use toLowerCase() to make case-insensitive filters.
Filters enhance user experience by showing only what’s needed.

Bootstrap 4 Containers

Containers are the basic layout elements in Bootstrap. They wrap the site content and align it properly.

Types of Containers

.container – gives a fixed width, responsive layout
.container-fluid – gives a full-width layout

Fixed Container

<div class="container">
  <h1>Bootstrap Page</h1>
  <p>This is a fixed container.</p>
</div>

Fluid Container

<div class="container-fluid">
  <p>This is a fluid container.</p>
</div>

Container Padding

<div class="container p-3">
  <p>With padding</p>
</div>

Container Border and Color

<div class="container border bg-primary text-white">
  <p>Styled container</p>
</div>

Responsive Containers

<div class="container-sm">Small</div>
<div class="container-md">Medium</div>
<div class="container-lg">Large</div>
<div class="container-xl">Extra large</div>

Important Notes

Responsive containers adapt to different screen sizes using breakpoints.

Conclusion

In this blog, you learned advanced Bootstrap topics like the Affix Plugin, Filters, and Containers. These tools help you build dynamic, responsive, and user-friendly websites. Whether it’s sticking a navbar, filtering search results, or setting up proper layout containers — you now have a solid foundation to build on.

In our next blog, we will explore Bootstrap colors, spinners and more, which are the tools added on BS 4 for every aspiring developer. Stay tuned!

Request more information

Bootstrap Affix Plugin