Bootstrap Sidebar Examples

Stay Updated

Subscribe to Bootsnipp newsletter. (only important updates will be sent, your email is never shared or sold to anyone else)


Learn Bootstrap

Learn Bootstrap 4 Fast
Bootstrap 4 textbook and toolkit

Dan's Deals All Deals


Recent Comments

Does anyone have a 4.1.1 version of this snippet?
Fancy Sidebar Navigation

for .sidebar1 css you can use height: 100vh; instead of 100%.Also, for bootstrap 4 img-responsive and center-block are not working.Otherwise: great starter!
Simple Side navbar with hover effect - Sidebar #Inspiration from dribbble

I've made changes to the code so that it worked for my Joomla website - and I've also added media width to the CSS so the menu will be displayed all the time when it's shown on a screen at bootstrap 3 md breakpoint and beyond (you can later the @media width sections if you want the breakpoint to start at other points)https://bootsnipp.com/user/snippets/aM9yo
Fancy Sidebar Navigation

If you change the javascript a bit so it just toggles an open/closed class on the wrapper instead. And then apply all the other changes via CSS then you can use @media queries to only show the hamburger when the screen is of a certain width and only hide the sidebar when the menu is at a certain width.It also reduces the amount of javascript needed to just one onclick - toggleClass command.
Fancy Sidebar Navigation

Hey maridlcrmnDo you have a fix for the navbar, if I fx. want the nav shown on laptop/desktop?You know like Booststraps standard navbar? Sincerely Mads Dalsgaard.
Fancy Sidebar Navigation

This is exactly what I need, thank you dear!
Sidebar responsive

The above is not an image, it is generated from the associated code, which you can view by clicking the HTML/CSS/JS buttons at the top. If you are having a problem, create a snippet with your code, and post a reference here explaining what is not working.
Dashboard Template (Sidebar icons animated)

hello, I am a new user, and new in web page design, I think your template is very good, but the moment I lift the service of the website, it does not appear the same as the image, can you help me?
Dashboard Template (Sidebar icons animated)