Collapsing Sidebar with Bootstrap

Question

I just visited this page http   www elmastudio de  and wondered if it is possible to build the left sidebar collapse with Bootstrap 3   Code to collapse the sidebar from the top  phone only     lt button type  button  class  navbar-toggle sidebar-toggle  data-toggle  collapse  data-target   sidebar-ex1-collapse  gt       lt span class  sr-only  gt Sidebar lt  span gt       lt span class  glyphicon glyphicon-check  gt  lt  span gt   lt  button gt    Sidebar itself has the hidden-xs class  It is removed with the following js      sidebar-toggle   click function             sidebar   removeClass  hidden-xs                      If you click the button it toggles the sidebar from the top  It be great to see the sidebar behave like the website above shows  Any help is appreciated

User · Answer

Its not mentioned on doc  but Left sidebar on Bootstrap 3 is possible using  Collapse  method   As mentioned by bootstrap js    Collapse prototype dimension   function          var hasWidth   this  element hasClass  width       return hasWidth    width     height        This mean  adding class  width  into target  will expand by width instead of height    http   jsfiddle net 2316sfbz 2

User · Answer

EDIT  I ve added one more option for bootstrap sidebars   There are actually three manners in which you can make a bootstrap 3 sidebar  I tried to keep the code as simple as possible   Fixed sidebar  Here you can see a demo of a simple fixed sidebar I ve developed with the same height as the page  Sidebar in a column  I ve also developed a rather simple column sidebar that works in a two or three column page inside a container  It takes the length of the longest column  Here you can see a demo  Dashboard  If you google bootstrap dashboard  you can find multiple suitable dashboard  such as this one  However  most of them require a lot of coding  I ve developed a dashboard that works without additional javascript  next to the bootstrap javascript   Here is a demo  For all three examples you off course have to include the jquery  bootstrap css  js and theme css files   Slidebar  If you want the sidebar to hide on pressing a button this is also possible with only a little javascript Here is a demo

User · Answer

Via Angular  using ng-class of Angular  we can hide and show the side bar   http   jsfiddle net DVE4f 359    lt div class  container  style  width 100   ng-app ng-controller  AppCtrl  gt   lt div class  row  gt       lt div ng-class  showgraphSidebar    col-xs-3     hidden   id  colPush   gt          Sidebar      lt  div gt       lt div ng-class  showgraphSidebar    col-xs-9     col-xs-12    id  colMain    gt           lt button  ng-click  toggle     gt Sidebar Toggle lt  a gt       lt  div gt         lt  div gt   lt  div gt       function AppCtrl  scope         scope showgraphSidebar   false       scope toggle   function              scope showgraphSidebar     scope showgraphSidebar

User · Answer

Bootstrap 3  Yes  it s possible  This  off-canvas  example should help to get you started   https   codeply com p esYgHWB2zJ  Basically you need to wrap the layout in an outer div  and use media queries to toggle the layout on smaller screens      collapsed sidebar styles     media screen and  max-width  767px       row-offcanvas       position  relative      -webkit-transition  all 0 25s ease-out      -moz-transition  all 0 25s ease-out      transition  all 0 25s ease-out         row-offcanvas-right    sidebar-offcanvas       right  -41 6           row-offcanvas-left    sidebar-offcanvas       left  -41 6          row-offcanvas-right active       right  41 6          row-offcanvas-left active       left  41 6          sidebar-offcanvas       position  absolute      top  0      width  41 6          sidebar       padding-top 0          Also  there are several more Bootstrap sidebar examples here    Bootstrap 4  Create a responsive navbar sidebar  quot drawer quot  in Bootstrap 4

User · Answer

http   getbootstrap com examples offcanvas   This is the official example  may be better for some   It is under their Experiments examples section  but since it is official  it should be kept up to date with the current bootstrap release    Looks like they have added an off canvas css file used in their example   http   getbootstrap com examples offcanvas offcanvas css  And some JS code     document  ready function            data-toggle  offcanvas     click function              row-offcanvas   toggleClass  active

[twitter-bootstrap-3] Collapsing Sidebar with Bootstrap

Examples related to twitter-bootstrap-3

Examples related to bootstrap-4

Examples related to sidebar

Examples related to collapse