Collection of free Bootstrap sidebar code examples: responsive sidebars, side navbar, sidebar menu, vertical navbar, etc. Update of June 2020 collection. 2 new items.
Related Articles
Links
Made with
- HTML / CSS / JS
About a code
Bootstrap 5 Sidebar Menu with Toggle Button
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: boxicons.css
Bootstrap version: 5.0.0
Links
Made with
- HTML / CSS / JS
About a code
Bootstrap 4 Sidebar Menu
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: jquery.js, popper.js
Bootstrap version: 4.3.1
Links
Made with
- HTML / CSS / JS
About a code
Bootstrap 4.1.3 Sidebar Nav
Cool Bootstrap sidebar navigation modified for Bootstrap 4.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css, animate.css, tether.css, jquery.js, popper.js, tether.js
Bootstrap version: 4.1.3
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Bootstrap Sidebar
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css, jquery.js
Bootstrap version: 3.3.7
Links
Made with
- HTML / CSS / JS
About a code
Bootstrap Sidebar
Collapsible sidebar using Bootstrap 4.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css, jquery.js, popper.js
Bootstrap version: 4.1.0
Links
Made with
- HTML / CSS / JS
About a code
Bootstrap Sidebar #04
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css, jquery.js, popper.js
Bootstrap version: 4.3.1
Links
Made with
- HTML / CSS / JS
About a code
Bootstrap Sidebar #09
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css, jquery.js, popper.js
Bootstrap version: 4.3.1
Links
Made with
- HTML / CSS / JS
About a code
Bootstrap Sidebar #08
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css, jquery.js, popper.js
Bootstrap version: 4.3.1
Links
Made with
- HTML / CSS / JS
About a code
Bootstrap Sidebar #07
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css, jquery.js, popper.js
Bootstrap version: 4.3.1
Links
Made with
- HTML / CSS / JS
About a code
Bootstrap Sidebar #05
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css, jquery.js, popper.js
Bootstrap version: 4.3.1
Links
Made with
- HTML / CSS / JS
About a code
Bootstrap Sidebar #03
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css, jquery.js, popper.js
Bootstrap version: 4.3.1
Links
Made with
- HTML / CSS / JS
About a code
Bootstrap Sidebar #01
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css, jquery.js, popper.js
Bootstrap version: 4.3.1
Links
Made with
- HTML / CSS / JS
About a code
Bootstrap 4.1.3 Sidebar Nav
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: animate.css, font-awesome.css, tether.css, popper.js, jquery.js
Bootstrap version: 4.1.3
Links
Made with
- HTML / CSS / JS
About a code
Pro Sidebar
Responsive sidebar template with dropdown menu based on Bootstrap framwork.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css, mcustomscrollbar.css, jquery.js, popper.js, mcustomscrollbar.js
Bootstrap version: 4.2.1

Links
Made with
- HTML / CSS
About a code
Bootstrap 3 - Sidebar Layout
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: material-design-iconic-font.css
Bootstrap version: 3.3.7
Links
Made with
- HTML / CSS
About a code
Fixed Bootstrap Sidebar
This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css
Bootstrap version: 3.3.7
Links
Made with
- HTML / CSS / JS
About a code
Bootstrap Navbar Sidebar
Use classic Bootstrap navbar as sidebar, on left or right side.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: jquery.js
Bootstrap version: 4.3.1
Links
Made with
- HTML / CSS / JS
About a code
SideNav
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: jquery.js
Bootstrap version: 3.3.6
Links
Made with
- HTML / CSS / JS
About a code
Sidebar Menu
jQuery sidebar-menu component.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css, jquery.js
Bootstrap version: 3.3.6
Links
Made with
- HTML / CSS / JS
About a code
Bootstrap SideBar Menu
Simple sidebar admin menu responsive with Bootstrap.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css, jquery.js
Bootstrap version: 3.3.5
Links
Made with
- HTML / CSS / JS
About a code
Responsive Bootstrap Menu Sidebar
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css, jquery.js
Bootstrap version: 3.3.0