Collection of free Bootstrap sidebar code examples: responsive sidebars, side navbar, sidebar menu, vertical navbar, etc.

  1. CSS Sidebar Menus

Creator

  • Anli

Programming language

  • HTML / CSS / JS

Information a code

Bootstrap 4 Sidebar Menu

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js, popper.js

Bootstrap version: 4.3.1

Creator

  • Tio Jevero

Programming language

  • HTML / CSS / JS

Information a code

Bootstrap 4.1.3 Sidebar Nav

Cool Bootstrap sidebar navigation modified for Bootstrap 4.

Browser Support: 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

Creator

  • rijdzuan sampoerna

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Bootstrap Sidebar

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css, jquery.js

Bootstrap version: 3.3.7

Creator

  • colorlib

Programming language

  • HTML / CSS / JS

Information a code

Bootstrap Sidebar #04

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css, jquery.js, popper.js

Bootstrap version: 4.3.1

Creator

  • colorlib

Programming language

  • HTML / CSS / JS

Information a code

Bootstrap Sidebar #09

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css, jquery.js, popper.js

Bootstrap version: 4.3.1

Creator

  • colorlib

Programming language

  • HTML / CSS / JS

Information a code

Bootstrap Sidebar #08

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css, jquery.js, popper.js

Bootstrap version: 4.3.1

Creator

  • colorlib

Programming language

  • HTML / CSS / JS

Information a code

Bootstrap Sidebar #07

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css, jquery.js, popper.js

Bootstrap version: 4.3.1

Creator

  • colorlib

Programming language

  • HTML / CSS / JS

Information a code

Bootstrap Sidebar #05

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css, jquery.js, popper.js

Bootstrap version: 4.3.1

Creator

  • colorlib

Programming language

  • HTML / CSS / JS

Information a code

Bootstrap Sidebar #03

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css, jquery.js, popper.js

Bootstrap version: 4.3.1

Creator

  • colorlib

Programming language

  • HTML / CSS / JS

Information a code

Bootstrap Sidebar #01

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css, jquery.js, popper.js

Bootstrap version: 4.3.1

Creator

  • Darryl

Programming language

  • HTML / CSS / JS

Information a code

Bootstrap 4.1.3 Sidebar Nav

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: animate.css, font-awesome.css, tether.css, popper.js, jquery.js

Bootstrap version: 4.1.3

Creator

  • Mohamed Azouaoui

Programming language

  • HTML / CSS / JS

Information a code

Pro Sidebar

Responsive sidebar template with dropdown menu based on Bootstrap framwork.

Browser Support: 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

Creator

  • Brenna Veen

Programming language

  • HTML / CSS

Information a code

Bootstrap 3 – Sidebar Layout

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: material-design-iconic-font.css

Bootstrap version: 3.3.7

Creator

  • Daan Vankerkom

Programming language

  • HTML / CSS

Information 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.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Bootstrap version: 3.3.7

Creator

  • Mladen Plavsic

Programming language

  • HTML / CSS / JS

Information a code

Bootstrap Navbar Sidebar

Use classic Bootstrap navbar as sidebar, on left or right side.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Bootstrap version: 4.3.1

Creator

  • m

Programming language

  • HTML / CSS / JS

Information a code

SideNav

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Bootstrap version: 3.3.6

Creator

  • huang.xinghui

Programming language

  • HTML / CSS / JS

Information a code

Sidebar Menu

jQuery sidebar-menu component.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css, jquery.js

Bootstrap version: 3.3.6

Creator

  • Hugh Balboa

Programming language

  • HTML / CSS / JS

Information a code

Bootstrap SideBar Menu

Simple sidebar admin menu responsive with Bootstrap.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css, jquery.js

Bootstrap version: 3.3.5

Creator

  • ElenaDomingos

Programming language

  • HTML / CSS / JS

Information a code

Responsive Bootstrap Menu Sidebar

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css, jquery.js

Bootstrap version: 3.3.0