Bootstrap Collapsible Sidebars

#sidebar-left

.col-md-3

Has a negative left margin when collapsed.

@media (min-width: 992px) {
  #sidebar-left.collapsed {
    /* same width as sidebar */
    margin-left: -25%;
  }
}

Common sidebar code:

.sidebar {
  /* for the animation */
  transition: margin 0.3s ease;
}

.collapsed {
  /* hide it for small displays*/
  display: none;
}

@media (min-width: 992px) {
  .collapsed {
    display: block;
  }
}

#row-main {
  /* necessary to hide collapsed sidebars */
  overflow-x: hidden;
}

#content {
  /* for the animation */
  transition: width 0.3s ease;
}

#sidebar-right

.col-md-3

Has a negative right margin when collapsed.

@media (min-width: 992px) {
  #sidebar-right.collapsed {
    /* same width as sidebar */
    margin-right: -25%;
  }
}