"Sidebar responsive"
Bootstrap 3.2.0 Snippet by vijay18399

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <body> <div id="navbar-wrapper"> <header> <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Campus News</a> </div> <div id="navbar-collapse" class="collapse navbar-collapse"> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <form class="navbar-form navbar-left" role="search"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search"> <span class="input-group-btn"> <button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button> </span> </div> </form> </li> </ul> </div> </div> </nav> </header> </div> <div id="wrapper"> <div id="sidebar-wrapper"> <aside id="sidebar"> <ul id="sidemenu" class="sidebar-nav"> <li> <a href="#"> <span class="sidebar-icon"><img src="https://findicons.com/files/icons/1261/sticker_system/128/home.png" width='25px'></span> <span class="sidebar-title">Home Page</span> </a> </li> <li> <a class="accordion-toggle collapsed toggle-switch" data-toggle="collapse" href="#submenu-2"> <span class="sidebar-icon"><img src="http://pragati.ac.in/wp-content/uploads/2014/10/icon-staff-512x410.png" width='25px'></span> <span class="sidebar-title">Drive Details</span> <b class="caret"></b> </a> <ul id="submenu-2" class="panel-collapse collapse panel-switch" role="menu"> <li><a href="#"><i class="fa fa-caret-right"></i>Placed Candidates</a></li> <li><a href="#"><i class="fa fa-caret-right"></i>Campus Drive</a></li> </ul> </li> <li> <a class="accordion-toggle collapsed toggle-switch" data-toggle="collapse" href="#submenu-3"> <span class="sidebar-icon"><img src="https://png2.kisspng.com/sh/260777402872b1f4de5ee31c9aa92fe4/L0KzQYm3U8IxN5t6fZH0aYP2gLBuTgBieJZ3ReZuc4Swdrr1gfwubalmhdt3YYTsf7A0gBxqeF5miuY2ZYjkfcS0gBxqeJJ3jOU2NXHlQbPohcA2O5U6S6Q3N0G3R4WBVsMyPWM2TasCMUW1Q4W6VL5xdpg=/kisspng-paper-test-final-examination-clip-art-exams-cliparts-5ab1bae053d532.7147486315215971523434.png" width='25px'></span> <span class="sidebar-title">Exam</span> <b class="caret"></b> </a> <ul id="submenu-3" class="panel-collapse collapse panel-switch" role="menu"> <li><a href="#"><i class="fa fa-caret-right"></i>Results</a></li> <li><a href="#"><i class="fa fa-caret-right"></i>Schedule</a></li> </ul> </li> <li> <a href="#"> <span class="sidebar-icon"><img src="https://menministry.org/wp-content/uploads/2016/01/seminar-icon-2.png" width='25px'></span> <span class="sidebar-title">Seminars</span> </a> </li> <li> <a href="#"> <span class="sidebar-icon"><img src="https://image.winudf.com/v2/image/Y29tLlJTU1RlY2gubXluZXdzX2ljb25fMF83ZWIxNjFmMQ/icon.png?w=170&fakeurl=1&type=.png" width='25px'></span> <span class="sidebar-title">Tech Bit</span> </a> </li> <li> <a href="#"> <span class="sidebar-icon"><img src="http://chittagongit.com//images/events-icon/events-icon-0.jpg" width='25px'></span> <span class="sidebar-title">Events</span> </a> </li> <li> <a href="#"> <span class="sidebar-icon"><img src="http://resultscoachingwithgina.com/wp-content/uploads/2016/05/workshop-icon-300x300.jpg" width='25px'></span> <span class="sidebar-title">Workshops</span> </a> </li> <li> <a href="#"> <span class="sidebar-icon"><img src="https://www.mcs4kids.com/img/IT/training-icon.png" width='25px'></span> <span class="sidebar-title">Trainings</span> </a> </li> <li> <a href="#"> <span class="sidebar-icon"><img src="https://steemitimages.com/DQmX3UYjuRAq9xGjeDd7uqijy6AqhTkYNSyLYXFF3kDbmst/Latest-News.jpg" width='25px'></span> <span class="sidebar-title">News Bit</span> </a> </li> <li> <a href="#"> <span class="sidebar-icon"><img src="https://steamuserimages-a.akamaihd.net/ugc/903402282898635356/5BE19E415A66E55CCE83F469521610528F122C4F/?interpolation=lanczos-none&output-format=jpeg&output-quality=95&fit=inside%7C128%3A128&composite-to=*,*%7C128%3A128&background-color=black" width='25px'></i></span> <span class="sidebar-title">Achievements</span> </a> </li> </ul> </aside> t </div> <main id="page-content-wrapper" role="main"> </main> </div> </body>
@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'); body { background: lightgray; } .navbar-fixed-top { top: 0; border-width: 0 0 1px; } .navbar-default .navbar-nav #user-profile { height: 50px; padding-top: 15px; padding-left: 58px; } .navbar-default .navbar-nav #user-profile img { height: 45px; width: 45px; position: absolute; top: 2px; left: 8px; padding: 1px; } #wrapper { padding-top: 50px; padding-left: 0; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; } @media (min-width: 992px) { #wrapper { padding-left: 225px; } } @media (min-width: 992px) { #wrapper #sidebar-wrapper { width: 225px; } } #sidebar-wrapper { border-right: 1px solid #e7e7e7; } #sidebar-wrapper { z-index: 1000; position: fixed; left: 225px; width: 0; height: 100%; margin-left: -225px; overflow-y: auto; background: #f8f8f8; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; } #sidebar-wrapper .sidebar-nav { position: absolute; top: 0; width: 225px; font-size: 14px; margin: 0; padding: 0; list-style: none; } #sidebar-wrapper .sidebar-nav li { text-indent: 0; line-height: 45px; } #sidebar-wrapper .sidebar-nav li a { display: block; text-decoration: none; color: #428bca; } .sidebar-nav li:first-child a { background: #92bce0 !important; color: #fff !important; } #sidebar-wrapper .sidebar-nav li a .sidebar-icon { width: 45px; height: 45px; font-size: 14px; padding: 0 2px; display: inline-block; text-indent: 7px; margin-right: 10px; color: #fff; float: left; } #sidebar-wrapper .sidebar-nav li a .caret { position: absolute; right: 23px; top: auto; margin-top: 20px; } #sidebar-wrapper .sidebar-nav li ul.panel-collapse { list-style: none; -moz-padding-start: 0; -webkit-padding-start: 0; -khtml-padding-start: 0; -o-padding-start: 0; padding-start: 0; padding: 0; } #sidebar-wrapper .sidebar-nav li ul.panel-collapse li i { margin-right: 10px; } #sidebar-wrapper .sidebar-nav li ul.panel-collapse li { text-indent: 15px; } @media (max-width: 992px) { #wrapper #sidebar-wrapper { width: 45px; } #wrapper #sidebar-wrapper #sidebar #sidemenu li ul { position: fixed; left: 45px; margin-top: -45px; z-index: 1000; width: 200px; height: 0; } } .sidebar-nav li:first-child a { background: #92bce0 !important; color: #fff !important; } .sidebar-nav li:nth-child(2) a { background: #6aa3d5 !important; color: #fff !important; } .sidebar-nav li:nth-child(3) a { background: #428bca !important; color: #fff !important; } .sidebar-nav li:nth-child(4) a { background: #3071a9 !important; color: #fff !important; } .sidebar-nav li:nth-child(5) a { background: #245682 !important; color: #fff !important; } .sidebar-nav li:nth-child(6) a { background: #6aa3d5 !important; color: #fff !important; } .sidebar-nav li:nth-child(7) a { background: #428bca !important; color: #fff !important; } .sidebar-nav li:nth-child(8) a { background: #3071a9 !important; color: #fff !important; } .sidebar-nav li:nth-child(9) a { background: #245682 !important; color: #fff !important; } .sidebar-nav li:nth-child(10) a { background: #245682 !important; color: #fff !important; }

Related: See More

Paper Dashboard Angular
sidebar.rtl
Responsive Invoice template
Responsive Data Cards (Bootstrap 4)

Questions / Comments: