Bootstrap Snippet Sidebar using HTML CSS Bootstrap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="row">
  <div class="col-sm-2 admin-sidebar">
    <div class="nav flex-column nav-pills text-center text-uppercase admin-nav" id="sidebar-admin" role="tablist" aria-orientation="vertical">
      <a class="nav-link active show admin-nav-item admin-sidebar-item"  data-toggle="pill" href="#admin-communicate" role="tab" aria-controls="admin-communicate" aria-selected="true">Communicate</a>
      <a class="nav-link admin-nav-item admin-sidebar-item" data-toggle="pill" href="#admin-requests" role="tab" aria-controls="admin-requests" aria-selected="false">Requests</a>
      <a class="nav-link admin-nav-item admin-sidebar-item" data-toggle="pill" href="#admin-users" role="tab" aria-controls="admin-users" aria-selected="false">Users</a>
      <a class="nav-link admin-nav-item admin-sidebar-item" data-toggle="pill" href="#admin-groups" role="tab" aria-controls="admin-groups" aria-selected="false">Groups</a>
      <a class="nav-link admin-nav-item admin-sidebar-item" data-toggle="pill" href="#admin-analytics" role="tab" aria-controls="admin-analytics" aria-selected="false">Analytics</a>
      <a class="nav-link admin-nav-item admin-sidebar-item" data-toggle="pill" href="#admin-messages" role="tab" aria-controls="admin-messages" aria-selected="false">Messages</a>
      <a class="nav-link admin-nav-item admin-sidebar-item" data-toggle="pill" href="#admin-sessions" role="tab" aria-controls="admin-sessions" aria-selected="false">Sessions</a>
      <a class="nav-link admin-nav-item admin-sidebar-item" data-toggle="pill" href="#admin-testimonials" role="tab" aria-controls="admin-testimonials" aria-selected="false">Testimonials</a>
      <a class="nav-link admin-nav-item admin-sidebar-item" data-toggle="pill" href="#admin-changelog" role="tab" aria-controls="admin-changelog" aria-selected="false">Changelog</a>
    </div>
  </div>
  <div class="col-sm-12 admin-tabs">
    <ul class="nav nav-tabs admin-nav text-uppercase" role="tablist">
      <li class="nav-item">
        <a class="nav-link admin-nav-item active" data-toggle="tab" href="#admin-communicate" role="tab" aria-controls="admin-communicate" aria-selected="true">Communicate</a>
      </li>
      <li class="nav-item">
        <a class="nav-link admin-nav-item" data-toggle="tab" href="#admin-requests" role="tab" aria-controls="admin-requests" aria-selected="false">Requests</a>
      </li>
      <li class="nav-item">
        <a class="nav-link admin-nav-item" data-toggle="tab" href="#admin-users" role="tab" aria-controls="admin-users" aria-selected="false">Users</a>
      </li>
      <li class="nav-item">
        <a class="nav-link admin-nav-item" data-toggle="tab" href="#admin-groups" role="tab" aria-controls="admin-groups" aria-selected="false">Groups</a>
      </li>
      <li class="nav-item">
        <a class="nav-link admin-nav-item" data-toggle="tab" href="#admin-analytics" role="tab" aria-controls="admin-analytics" aria-selected="false">Analytics</a>
      </li>
      <li class="nav-item">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@media screen and (max-width: 480px) {
    .admin-sidebar{
        display: none;
    }
}
@media screen and (min-width: 480px) {
    .admin-tabs{
        display: none;
    }
}
.admin-sidebar{
    max-width: 13%;
}
#sidebar-admin{
    position: fixed;
}
.admin-sidebar-item{
    padding: 1em;
    border-bottom: 1px solid white;
}
.admin-nav{
    background: #49C2B3;
}
.admin-nav-item{
    color: white;
    font-weight:bold;
}
.admin-nav-item:hover{
    color: white;
    background: #41aea1;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Sidebar"
Bootstrap 4.0.0 Snippet by Twinpair

Related: See More

Questions / Comments:

"Sidebar" Bootstrap 4.0.0 Snippet by Twinpair

Related: See More

Questions / Comments:

"Sidebar"
Bootstrap 4.0.0 Snippet by Twinpair