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

  1. CSS Sidebar Menus

Author

  • BBBootstrap Team

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

Author

  • Anli

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

Author

  • Tio Jevero

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

Author

  • rijdzuan sampoerna

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

Author

  • Truong Tran

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

Author

  • colorlib

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

Author

  • colorlib

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

Author

  • colorlib

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

Author

  • colorlib

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

Author

  • colorlib

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

Author

  • colorlib

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

Author

  • colorlib

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

Author

  • Darryl

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

Author

  • Mohamed Azouaoui

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

Demo image: Bootstrap 3 - Sidebar Layout

Author

  • Brenna Veen

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

Author

  • Daan Vankerkom

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

Author

  • Mladen Plavsic

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

Author

  • m

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

Author

  • huang.xinghui

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

Author

  • Hugh Balboa

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

Author

  • ElenaDomingos

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