[twitter-bootstrap] How to create a sticky left sidebar menu using bootstrap 3?

I want to create a left-sticky bar menu with bootstrap 3 like:

http://getbootstrap.com/getting-started/

I'd read the given documentation http://getbootstrap.com/javascript/#affix

I try with .affix but the result is zero.


Update: @Skelly,
Thanks for your kind example. and yes, I want like your example. I'd download your example html, but after download the html file's side bar didn't work there.

This question is related to twitter-bootstrap twitter-bootstrap-3 sidebar sticky

The answer is


Bootstrap 3

Here is a working left sidebar example:

http://bootply.com/90936 (similar to the Bootstrap docs)

The trick is using the affix component along with some CSS to position it:

  #sidebar.affix-top {
    position: static;
    margin-top:30px;
    width:228px;
  }

  #sidebar.affix {
    position: fixed;
    top:70px;
    width:228px;
  }

EDIT- Another example with footer and affix-bottom


Bootstrap 4

The Affix component has been removed in Bootstrap 4, so to create a sticky sidebar, you can use a 3rd party Affix plugin like this Bootstrap 4 sticky sidebar example, or use the sticky-top class is explained in this answer.

Related: Create a responsive navbar sidebar "drawer" in Bootstrap 4?


You can also try to use a Polyfill like Fixed-Sticky. Especially when you are using Bootstrap4 the affix component is no longer included:

Dropped the Affix jQuery plugin. We recommend using a position: sticky polyfill instead.


I used this way in my code

$(function(){
    $('.block').affix();
})

Examples related to twitter-bootstrap

Bootstrap 4: responsive sidebar menu to top navbar CSS class for pointer cursor How to install popper.js with Bootstrap 4? Change arrow colors in Bootstraps carousel Search input with an icon Bootstrap 4 bootstrap 4 responsive utilities visible / hidden xs sm lg not working bootstrap.min.js:6 Uncaught Error: Bootstrap dropdown require Popper.js Bootstrap 4 - Inline List? Bootstrap 4, how to make a col have a height of 100%? Bootstrap 4: Multilevel Dropdown Inside Navigation

Examples related to twitter-bootstrap-3

bootstrap 4 responsive utilities visible / hidden xs sm lg not working How to change the bootstrap primary color? What is the '.well' equivalent class in Bootstrap 4 How to use Bootstrap in an Angular project? Bootstrap get div to align in the center Jquery to open Bootstrap v3 modal of remote url How to increase Bootstrap Modal Width? Bootstrap datetimepicker is not a function How can I increase the size of a bootstrap button? Bootstrap : TypeError: $(...).modal is not a function Why do Sublime Text 3 Themes not affect the sidebar? How to create a sticky left sidebar menu using bootstrap 3? Collapsing Sidebar with Bootstrap Force sidebar height 100% using CSS (with a sticky bottom image)?

Examples related to sticky

How does the "position: sticky;" property work? How can I make sticky headers in RecyclerView? (Without external lib) Make a nav bar stick How to create a sticky left sidebar menu using bootstrap 3? Sticky Header after scrolling down Force sidebar height 100% using CSS (with a sticky bottom image)?