Bootstrap Sidebars:

Simple Bootstrap Sidebar Menu

Let’s be honest! If you design your web pages properly and use a good layout for your website, your chances of creating a website which will soon become successful will be increased by a lot. Due to this important fact, a good number of web designers (those who are good) pay a lot of attention to this aspect of creating a website and put so much effort in doing it right. In fact, they care much about such elements as header, footer and even the body as well. Another really important element in creating a successful website is having a proper sidebar.

The code below is dedicated to showcasing one of the key features of any famous and high revenue website with a lot of visitors every day – a simple sidebar for your website. Simplicity is always on brand and never gets old; therefore, your chances of ranking high will be a lot by using a simple yet responsive sidebar. Since this is a Bootstrap sidebar it is created by Bootstrap. This little code adds a sidebar with accordion so that you get to press a hamburger shaped icon and open the sidebar the same way you open an accordion; plus, each item has its own little symbol beside it to make it simpler for the users to utilized this feature.

Bootstrap Sidebar

Sidebar with Accordion

Responsive Sidebar

Simple Sidebar

<!-- This script got from frontendfreecode.com -->
<nav class="mnb navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <i class="ic fa fa-bars"></i>
            </button>
            <div style="padding: 15px 0;">
                <a href="#" id="msbo"><i class="ic fa fa-bars"></i></a>
            </div>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">En</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Draude Oba <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Settings</a></li>
                        <li><a href="#">Upgrade</a></li>
                        <li><a href="#">Help</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Logout</a></li>
                    </ul>
                </li>
                <li><a href="#"><i class="fa fa-bell-o"></i></a></li>
                <li><a href="#"><i class="fa fa-comment-o"></i></a></li>
            </ul>
            <form class="navbar-form navbar-right">
                <input type="text" class="form-control" placeholder="Search...">
            </form>
        </div>
    </div>
</nav>
<!--msb: main sidebar-->
<div class="msb" id="msb">
    <nav class="navbar navbar-default" role="navigation">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <div class="brand-wrapper">
                <!-- Brand -->
                <div class="brand-name-wrapper">
                    <a class="navbar-brand" href="#">
                        Title
                    </a>
                </div>
            </div>
        </div>
        <!-- Main Menu -->
        <div class="side-menu-container">
            <ul class="nav navbar-nav">
                <li><a href="#"><i class="fa fa-dashboard"></i> Dashboard</a></li>
                <li class="active"><a href="#"><i class="fa fa-puzzle-piece"></i> Components</a></li>
                <li><a href="#"><i class="fa fa-heart"></i> Extras</a></li>
                <!-- Dropdown-->
                <li class="panel panel-default" id="dropdown">
                    <a data-toggle="collapse" href="#dropdown-lvl1">
                        <i class="fa fa-diamond"></i> Apps
                        <span class="caret"></span>
                    </a>
                    <!-- Dropdown level 1 -->
                    <div id="dropdown-lvl1" class="panel-collapse collapse">
                        <div class="panel-body">
                            <ul class="nav navbar-nav">
                                <li><a href="#">Mail</a></li>
                                <li><a href="#">Calendar</a></li>
                                <li><a href="#">Ecommerce</a></li>
                                <li><a href="#">User</a></li>
                                <li><a href="#">Social</a></li>
                                <!-- Dropdown level 2 -->
                                <li class="panel panel-default" id="dropdown">
                                    <a data-toggle="collapse" href="#dropdown-lvl2">
                                        <i class="glyphicon glyphicon-off"></i> Sub Level <span class="caret"></span>
                                    </a>
                                    <div id="dropdown-lvl2" class="panel-collapse collapse">
                                        <div class="panel-body">
                                            <ul class="nav navbar-nav">
                                                <li><a href="#">Link</a></li>
                                                <li><a href="#">Link</a></li>
                                                <li><a href="#">Link</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li><a href="#"><span class="glyphicon glyphicon-signal"></span> Link</a></li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </nav>
</div>
<!--main content wrapper-->
<div class="mcw">
    <!--navigation here-->
    <!--main content view-->
    <div class="cv">
        <div>
            <div class="inbox">
                <div class="inbox-sb">

                </div>
                <div class="inbox-bx container-fluid">
                    <div class="row">
                        <div class="col-md-12">
                            <ul>
                                <li><a href="#">Inbox</a></li>
                                <li><a href="#">Sent</a></li>
                                <li><a href="#">Trash</a></li>
                            </ul>
                        </div>
                        <div class="col-md-12">
                            <table class="table table-stripped">
                                <tbody>
                                    <tr>
                                        <td><input type="checkbox" /></td>
                                        <td><i class="fa fa-star"></i></td>
                                        <td><b>Mozilla</b></td>
                                        <td><b>In celebration of women and girls everywhere</b></td>
                                        <td></td>
                                        <td>Mar 10</td>
                                    </tr>
                                    <tr>
                                        <td><input type="checkbox" /></td>
                                        <td><i class="fa fa-star-o"></i></td>
                                        <td>Dan Glenn</td>
                                        <td>[ptcuser-announcements] - PTC/USER Expert Speaker Series Webinar March 9, 2017 11AM (EST)</td>
                                        <td><i class="fa fa-paperclip"></i></td>
                                        <td>Mar 10</td>
                                    </tr>
                                    <tr>
                                        <td><input type="checkbox" /></td>
                                        <td><i class="fa fa-star-o"></i></td>
                                        <td>Jetpack</td>
                                        <td>Announcing some highly requested improvements and our new affiliate program</td>
                                        <td></td>
                                        <td>Mar 08</td>
                                    </tr>
                                    <tr>
                                        <td><input type="checkbox" /></td>
                                        <td><i class="fa fa-star-o"></i></td>
                                        <td>Jetpack</td>
                                        <td>Announcing some highly requested improvements and our new affiliate program</td>
                                        <td></td>
                                        <td>Mar 08</td>
                                    </tr>
                                    <tr>
                                        <td><input type="checkbox" /></td>
                                        <td><i class="fa fa-star-o"></i></td>
                                        <td>Jetpack</td>
                                        <td>Announcing some highly requested improvements and our new affiliate program</td>
                                        <td></td>
                                        <td>Mar 08</td>
                                    </tr>
                                    <tr>
                                        <td><input type="checkbox" /></td>
                                        <td><i class="fa fa-star-o"></i></td>
                                        <td>Jetpack</td>
                                        <td>Announcing some highly requested improvements and our new affiliate program</td>
                                        <td></td>
                                        <td>Mar 08</td>
                                    </tr>
                                    <tr>
                                        <td><input type="checkbox" /></td>
                                        <td><i class="fa fa-star-o"></i></td>
                                        <td>Jetpack</td>
                                        <td>Announcing some highly requested improvements and our new affiliate program</td>
                                        <td></td>
                                        <td>Mar 08</td>
                                    </tr>
                                    <tr>
                                        <td><input type="checkbox" /></td>
                                        <td><i class="fa fa-star-o"></i></td>
                                        <td>Jetpack</td>
                                        <td>Announcing some highly requested improvements and our new affiliate program</td>
                                        <td></td>
                                        <td>Mar 08</td>
                                    </tr>

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

body {
  margin-top: 50px;
  background-color: #fff;
  font-family: Arial, sans-serif;
  font-size: 14px;
  letter-spacing: 0.01em;
  color: #39464e;
}
.navbar-nav {
   margin: 0px!important;
}
.navbar-header {
    margin-right: 0px!important;
    margin-left: 0px!important;
}
.navbar-default {
  background-color: #FFF;
  margin-left: 200px;
}
/*main side bar*/
.msb {
  width: 200px;
  background-color: #F5F7F9;
  position: fixed;
  left: 0;
  top: 0;
  right: auto;
  min-height: 100%;
  overflow-y: auto;
  white-space: nowrap;
  height: 100%;
  z-index: 1;
  border-right: 1px solid #ddd;
}
.msb .navbar {
  border: none;
  margin-left: 0;
  background-color: inherit;
}
.msb .navbar-header {
  width: 100%;
  border-bottom: 1px solid #e7e7e7;
  margin-bottom: 20px;
  background: #fff;
}
.msb .navbar-nav .panel {
  border: 0 none;
  box-shadow: none;
  margin: 0;
  background: inherit;
}
.msb .navbar-nav li {
  display: block;
  width: 100%;
}
.msb .navbar-nav li a {
  padding: 15px;
  color: #5f5f5f;
}
.msb .navbar-nav li a .glyphicon, .msb .navbar-nav li a .fa {
  margin-right: 8px;
}
.msb .nb {
  padding-top: 5px;
  padding-left: 10px;
  margin-bottom: 30px;
  overflow: hidden;
}

ul.nv,
ul.ns {
  position: relative;
  padding: 0;
  list-style: none;
}

.nv {
  /*ns: nav-sub*/
}
.nv li {
  display: block;
  position: relative;
}
.nv li::before {
  clear: both;
  content: "";
  display: table;
}
.nv li a {
  color: #444;
  padding: 10px 25px;
  display: block;
  vertical-align: middle;
}
.nv li a .ic {
  font-size: 16px;
  margin-right: 5px;
  font-weight: 300;
  display: inline-block;
}
.nv .ns li a {
  padding: 10px 50px;
}
/*main content wrapper*/
.mcw {
  margin-left: 200px;
  position: relative;
  min-height: 100%;
  /*content view*/
}
/*globals*/
a,
a:focus,
a:hover {
  text-decoration: none;
}
.inbox .container-fluid {
}
.inbox ul, .inbox li {
  margin: 0;
  padding: 0;
}
.inbox ul li {
  list-style: none;
}
.inbox ul li a {
  display: block;
  padding: 10px 20px;
}
.msb, .mnb {
  -moz-animation: slidein 300ms forwards;
  -o-animation: slidein 300ms forwards;
  -webkit-animation: slidein 300ms forwards;
  animation: slidein 300ms forwards;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.mcw {
  -moz-animation: bodyslidein 300ms forwards;
  -o-animation: bodyslidein 300ms forwards;
  -webkit-animation: bodyslidein 300ms forwards;
  animation: bodyslidein 300ms forwards;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
body.msb-x .mcw, body.msb-x .mnb {
  margin-left: 0;
  -moz-animation: bodyslideout 300ms forwards;
  -o-animation: bodyslideout 300ms forwards;
  -webkit-animation: bodyslideout 300ms forwards;
  animation: bodyslideout 300ms forwards;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
body.msb-x .msb {
  -moz-animation: slideout 300ms forwards;
  -o-animation: slideout 300ms forwards;
  -webkit-animation: slideout 300ms forwards;
  animation: slideout 300ms forwards;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
/* Slide in animation */
@-moz-keyframes slidein {
  0% {
    left: -200px;
  }
  100% {
    left: 0;
  }
}
@-webkit-keyframes slidein {
  0% {
    left: -200px;
  }
  100% {
    left: 0;
  }
}
@keyframes slidein {
  0% {
    left: -200px;
  }
  100% {
    left: 0;
  }
}
@-moz-keyframes slideout {
  0% {
    left: 0;
  }
  100% {
    left: -200px;
  }
}
@-webkit-keyframes slideout {
  0% {
    left: 0;
  }
  100% {
    left: -200px;
  }
}
@keyframes slideout {
  0% {
    left: 0;
  }
  100% {
    left: -200px;
  }
}
@-moz-keyframes bodyslidein {
  0% {
    left: 0;
  }
  100% {
    margin-left: 200px;
  }
}
@-webkit-keyframes bodyslidein {
  0% {
    left: 0;
  }
  100% {
    left: 0;
  }
}
@keyframes bodyslidein {
  0% {
    margin-left: 0;
  }
  100% {
    margin-left: 200px;
  }
}
@-moz-keyframes bodyslideout {
  0% {
    margin-left: 200px;
  }
  100% {
    margin-right: 0;
  }
}
@-webkit-keyframes bodyslideout {
  0% {
    margin-left: 200px;
  }
  100% {
    margin-left: 0;
  }
}
@keyframes bodyslideout {
  0% {
    margin-left: 200px;
  }
  100% {
    margin-left: 0;
  }
}

(function () {
    $('#msbo').on('click', function () {
        $('body').toggleClass('msb-x');
    });
}());

<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<script src='https://code.jquery.com/jquery-3.1.1.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<script src='https://code.jquery.com/jquery-3.1.1.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>
<style>
body {
  margin-top: 50px;
  background-color: #fff;
  font-family: Arial, sans-serif;
  font-size: 14px;
  letter-spacing: 0.01em;
  color: #39464e;
}
.navbar-nav {
   margin: 0px!important;
}
.navbar-header {
    margin-right: 0px!important;
    margin-left: 0px!important;
}
.navbar-default {
  background-color: #FFF;
  margin-left: 200px;
}
/*main side bar*/
.msb {
  width: 200px;
  background-color: #F5F7F9;
  position: fixed;
  left: 0;
  top: 0;
  right: auto;
  min-height: 100%;
  overflow-y: auto;
  white-space: nowrap;
  height: 100%;
  z-index: 1;
  border-right: 1px solid #ddd;
}
.msb .navbar {
  border: none;
  margin-left: 0;
  background-color: inherit;
}
.msb .navbar-header {
  width: 100%;
  border-bottom: 1px solid #e7e7e7;
  margin-bottom: 20px;
  background: #fff;
}
.msb .navbar-nav .panel {
  border: 0 none;
  box-shadow: none;
  margin: 0;
  background: inherit;
}
.msb .navbar-nav li {
  display: block;
  width: 100%;
}
.msb .navbar-nav li a {
  padding: 15px;
  color: #5f5f5f;
}
.msb .navbar-nav li a .glyphicon, .msb .navbar-nav li a .fa {
  margin-right: 8px;
}
.msb .nb {
  padding-top: 5px;
  padding-left: 10px;
  margin-bottom: 30px;
  overflow: hidden;
}

ul.nv,
ul.ns {
  position: relative;
  padding: 0;
  list-style: none;
}

.nv {
  /*ns: nav-sub*/
}
.nv li {
  display: block;
  position: relative;
}
.nv li::before {
  clear: both;
  content: "";
  display: table;
}
.nv li a {
  color: #444;
  padding: 10px 25px;
  display: block;
  vertical-align: middle;
}
.nv li a .ic {
  font-size: 16px;
  margin-right: 5px;
  font-weight: 300;
  display: inline-block;
}
.nv .ns li a {
  padding: 10px 50px;
}
/*main content wrapper*/
.mcw {
  margin-left: 200px;
  position: relative;
  min-height: 100%;
  /*content view*/
}
/*globals*/
a,
a:focus,
a:hover {
  text-decoration: none;
}
.inbox .container-fluid {
}
.inbox ul, .inbox li {
  margin: 0;
  padding: 0;
}
.inbox ul li {
  list-style: none;
}
.inbox ul li a {
  display: block;
  padding: 10px 20px;
}
.msb, .mnb {
  -moz-animation: slidein 300ms forwards;
  -o-animation: slidein 300ms forwards;
  -webkit-animation: slidein 300ms forwards;
  animation: slidein 300ms forwards;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.mcw {
  -moz-animation: bodyslidein 300ms forwards;
  -o-animation: bodyslidein 300ms forwards;
  -webkit-animation: bodyslidein 300ms forwards;
  animation: bodyslidein 300ms forwards;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
body.msb-x .mcw, body.msb-x .mnb {
  margin-left: 0;
  -moz-animation: bodyslideout 300ms forwards;
  -o-animation: bodyslideout 300ms forwards;
  -webkit-animation: bodyslideout 300ms forwards;
  animation: bodyslideout 300ms forwards;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
body.msb-x .msb {
  -moz-animation: slideout 300ms forwards;
  -o-animation: slideout 300ms forwards;
  -webkit-animation: slideout 300ms forwards;
  animation: slideout 300ms forwards;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
/* Slide in animation */
@-moz-keyframes slidein {
  0% {
    left: -200px;
  }
  100% {
    left: 0;
  }
}
@-webkit-keyframes slidein {
  0% {
    left: -200px;
  }
  100% {
    left: 0;
  }
}
@keyframes slidein {
  0% {
    left: -200px;
  }
  100% {
    left: 0;
  }
}
@-moz-keyframes slideout {
  0% {
    left: 0;
  }
  100% {
    left: -200px;
  }
}
@-webkit-keyframes slideout {
  0% {
    left: 0;
  }
  100% {
    left: -200px;
  }
}
@keyframes slideout {
  0% {
    left: 0;
  }
  100% {
    left: -200px;
  }
}
@-moz-keyframes bodyslidein {
  0% {
    left: 0;
  }
  100% {
    margin-left: 200px;
  }
}
@-webkit-keyframes bodyslidein {
  0% {
    left: 0;
  }
  100% {
    left: 0;
  }
}
@keyframes bodyslidein {
  0% {
    margin-left: 0;
  }
  100% {
    margin-left: 200px;
  }
}
@-moz-keyframes bodyslideout {
  0% {
    margin-left: 200px;
  }
  100% {
    margin-right: 0;
  }
}
@-webkit-keyframes bodyslideout {
  0% {
    margin-left: 200px;
  }
  100% {
    margin-left: 0;
  }
}
@keyframes bodyslideout {
  0% {
    margin-left: 200px;
  }
  100% {
    margin-left: 0;
  }
}
</style>

</head>
<body>
<nav class="mnb navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <i class="ic fa fa-bars"></i>
            </button>
            <div style="padding: 15px 0;">
                <a href="#" id="msbo"><i class="ic fa fa-bars"></i></a>
            </div>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">En</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Draude Oba <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Settings</a></li>
                        <li><a href="#">Upgrade</a></li>
                        <li><a href="#">Help</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Logout</a></li>
                    </ul>
                </li>
                <li><a href="#"><i class="fa fa-bell-o"></i></a></li>
                <li><a href="#"><i class="fa fa-comment-o"></i></a></li>
            </ul>
            <form class="navbar-form navbar-right">
                <input type="text" class="form-control" placeholder="Search...">
            </form>
        </div>
    </div>
</nav>
<!--msb: main sidebar-->
<div class="msb" id="msb">
    <nav class="navbar navbar-default" role="navigation">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <div class="brand-wrapper">
                <!-- Brand -->
                <div class="brand-name-wrapper">
                    <a class="navbar-brand" href="#">
                        Title
                    </a>
                </div>
            </div>
        </div>
        <!-- Main Menu -->
        <div class="side-menu-container">
            <ul class="nav navbar-nav">
                <li><a href="#"><i class="fa fa-dashboard"></i> Dashboard</a></li>
                <li class="active"><a href="#"><i class="fa fa-puzzle-piece"></i> Components</a></li>
                <li><a href="#"><i class="fa fa-heart"></i> Extras</a></li>
                <!-- Dropdown-->
                <li class="panel panel-default" id="dropdown">
                    <a data-toggle="collapse" href="#dropdown-lvl1">
                        <i class="fa fa-diamond"></i> Apps
                        <span class="caret"></span>
                    </a>
                    <!-- Dropdown level 1 -->
                    <div id="dropdown-lvl1" class="panel-collapse collapse">
                        <div class="panel-body">
                            <ul class="nav navbar-nav">
                                <li><a href="#">Mail</a></li>
                                <li><a href="#">Calendar</a></li>
                                <li><a href="#">Ecommerce</a></li>
                                <li><a href="#">User</a></li>
                                <li><a href="#">Social</a></li>
                                <!-- Dropdown level 2 -->
                                <li class="panel panel-default" id="dropdown">
                                    <a data-toggle="collapse" href="#dropdown-lvl2">
                                        <i class="glyphicon glyphicon-off"></i> Sub Level <span class="caret"></span>
                                    </a>
                                    <div id="dropdown-lvl2" class="panel-collapse collapse">
                                        <div class="panel-body">
                                            <ul class="nav navbar-nav">
                                                <li><a href="#">Link</a></li>
                                                <li><a href="#">Link</a></li>
                                                <li><a href="#">Link</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li><a href="#"><span class="glyphicon glyphicon-signal"></span> Link</a></li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </nav>
</div>
<!--main content wrapper-->
<div class="mcw">
    <!--navigation here-->
    <!--main content view-->
    <div class="cv">
        <div>
            <div class="inbox">
                <div class="inbox-sb">

                </div>
                <div class="inbox-bx container-fluid">
                    <div class="row">
                        <div class="col-md-12">
                            <ul>
                                <li><a href="#">Inbox</a></li>
                                <li><a href="#">Sent</a></li>
                                <li><a href="#">Trash</a></li>
                            </ul>
                        </div>
                        <div class="col-md-12">
                            <table class="table table-stripped">
                                <tbody>
                                    <tr>
                                        <td><input type="checkbox" /></td>
                                        <td><i class="fa fa-star"></i></td>
                                        <td><b>Mozilla</b></td>
                                        <td><b>In celebration of women and girls everywhere</b></td>
                                        <td></td>
                                        <td>Mar 10</td>
                                    </tr>
                                    <tr>
                                        <td><input type="checkbox" /></td>
                                        <td><i class="fa fa-star-o"></i></td>
                                        <td>Dan Glenn</td>
                                        <td>[ptcuser-announcements] - PTC/USER Expert Speaker Series Webinar March 9, 2017 11AM (EST)</td>
                                        <td><i class="fa fa-paperclip"></i></td>
                                        <td>Mar 10</td>
                                    </tr>
                                    <tr>
                                        <td><input type="checkbox" /></td>
                                        <td><i class="fa fa-star-o"></i></td>
                                        <td>Jetpack</td>
                                        <td>Announcing some highly requested improvements and our new affiliate program</td>
                                        <td></td>
                                        <td>Mar 08</td>
                                    </tr>
                                    <tr>
                                        <td><input type="checkbox" /></td>
                                        <td><i class="fa fa-star-o"></i></td>
                                        <td>Jetpack</td>
                                        <td>Announcing some highly requested improvements and our new affiliate program</td>
                                        <td></td>
                                        <td>Mar 08</td>
                                    </tr>
                                    <tr>
                                        <td><input type="checkbox" /></td>
                                        <td><i class="fa fa-star-o"></i></td>
                                        <td>Jetpack</td>
                                        <td>Announcing some highly requested improvements and our new affiliate program</td>
                                        <td></td>
                                        <td>Mar 08</td>
                                    </tr>
                                    <tr>
                                        <td><input type="checkbox" /></td>
                                        <td><i class="fa fa-star-o"></i></td>
                                        <td>Jetpack</td>
                                        <td>Announcing some highly requested improvements and our new affiliate program</td>
                                        <td></td>
                                        <td>Mar 08</td>
                                    </tr>
                                    <tr>
                                        <td><input type="checkbox" /></td>
                                        <td><i class="fa fa-star-o"></i></td>
                                        <td>Jetpack</td>
                                        <td>Announcing some highly requested improvements and our new affiliate program</td>
                                        <td></td>
                                        <td>Mar 08</td>
                                    </tr>
                                    <tr>
                                        <td><input type="checkbox" /></td>
                                        <td><i class="fa fa-star-o"></i></td>
                                        <td>Jetpack</td>
                                        <td>Announcing some highly requested improvements and our new affiliate program</td>
                                        <td></td>
                                        <td>Mar 08</td>
                                    </tr>

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
(function () {
    $('#msbo').on('click', function () {
        $('body').toggleClass('msb-x');
    });
}());
</script>

</body>
</html>

Preview

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS