Bootstrap sidebar

sidebar

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid">
  <div class="row">

    <div class="col-sm-3 col-md-2">
      <div class="sidebar-1">
        <div class="navbar navbar-default" role="navigation">

          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#sidebar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <span class="visible-xs navbar-brand">Sidebar menu</span>
          </div>
          <!-- .navbar-header -->

          <div class="navbar-collapse collapse" id="sidebar">

            <!-- first menu item with collapse -->
            <a href="#" class="btn btn-primary sidebar-btn" role="button" data-toggle="collapse" data-target="#settings" aria-label="Settings"><span>Settings</span><span><i class="glyphicon glyphicon-menu-right"></i></span></a>
            <div id="settings" class="collapse">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor
              inreprehenderit in voluptate velit esse cillum d
            </div>
            <!-- .collapse -->
            <!-- end of first menu item with collapse -->

            <!-- second menu item with collapse -->
            <a href="#" class="btn btn-primary sidebar-btn"...

CSS

.sidebar-1 {
  margin: 0px 0px 0px -15px;
}

.sidebar-1 .sidebar-btn {
  display: table;
  width: 100%;
}

.sidebar-1 .sidebar-btn > * {
  border-radius: 0;
  display: table-cell;
  border-right-width: 0px;
  border-left-width: 0px;
}

.sidebar-1 .sidebar-btn > *:nth-child(2) {
  width: 14px;
}

JavaScript

$(function() {
  $("#settings").on('show.bs.collapse', function() {
    $(this).prev().children(":eq(1)").children("i").removeClass().addClass("glyphicon glyphicon-menu-down");
  });
  $("#settings").on('hide.bs.collapse', function() {
    $(this).prev().children(":eq(1)").children("i").removeClass().addClass("glyphicon glyphicon-menu-right");
  });
  $("#components").on('show.bs.collapse', function() {
    $(this).prev().children(":eq(1)").children("i").removeClass().addClass("glyphicon glyphicon-menu-down");
  });
  $("#components").on('hide.bs.collapse', function() {
    $(this).prev().children(":eq(1)").children("i").removeClass().addClass("glyphicon glyphicon-menu-right");
  });
});