Bootstrap Sidebars:

Beautiful Bootstrap Sidebar

Many website owners are always wondering about ways to make their websites better and more professional. They write well and produce great content but they neglect how the environment of their website actually looks. This is quite an important factor and many don’t think it is worth the effort. Sidebars are one of such factors that will make things easier for your users to access different parts of your site.

Here we are offering you a sidebar with special colour with absolutely no cost. You can anything you want to this Bootstrap sidebar such as a settings, dashboard, user accounts or contact us part and many more. The sidebar is placed at the left side of the page and can be opened once a user clicks on the hamburger icon. This sidebar with summarization, has a unique feature. Items on it can be specialized and their colour will change from the normal green background to an orange one. besides, every item that gets selected or hovered over by the mouse cursor will change to a white line effect on the side of it which shows which item is currently being selected. If you are interested in this beautiful sidebar and want it for yourself, then scroll down to find its code.

Sidebar with Special Color

Beautiful Sidebar

Bootstrap Sidebar

Sidebar with Summarization

<!-- This script got from frontendfreecode.com -->
<div class="container">
    <div class="row">
        <div class="wrapper">
            <div class="side-bar">
                <ul>
                    <li class="menu-head">
                        Bootstrap <a href="#" class="push_menu"><span class="glyphicon glyphicon-align-justify pull-right"></span></a>
                    </li>
                    <div class="menu">
                        <li>
                            <a href="#">Dashboard <span class="glyphicon glyphicon-dashboard pull-right"></span></a>
                        </li>
                        <li>
                            <a href="#" class="active">Love snippet<span class="glyphicon glyphicon-heart pull-right"></span></a>
                        </li>
                        <li>
                            <a href="#">Like it? <span class="glyphicon glyphicon-star pull-right"></span></a>
                        </li>
                        <li>
                            <a href="#">Settings <span class="glyphicon glyphicon-cog pull-right"></span></a>
                        </li>
                    </div>
                </ul>
            </div>
            <div class="content">
                <div class="col-md-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">Panel heading</div>
                        <div class="panel-body">
                            Panel content
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

@import url(https://fonts.googleapis.com/css?family=Lato);
.container {
    width: 800px;
    overflow: hidden;
    display: inline-block;
}
.side-bar {
    background: #74afad;
    position: absolute;
    height: 100%;
    width: 200px;
    color: #fff;
    transition: margin-left 0.5s;
}
.side-bar ul {
    list-style: none;
    padding: 0px;
}
.side-bar ul li.menu-head {
    font-family: "Lato", sans-serif;
    padding: 20px;
}
.side-bar ul li.menu-head a {
    color: #fff;
    text-decoration: none;
    height: 50px;
}
.side-bar ul .menu-head a {
    color: #fff;
    text-decoration: none;
    height: 50px;
}
.side-bar ul .menu li a {
    color: #fff;
    text-decoration: none;
    display: inline-table;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
}
.side-bar ul .menu li a:hover {
    border-left: 3px solid #ececea;
    padding-left: 17px;
}
.side-bar ul .menu li a.active {
    padding-left: 17px;
    background: #d9853b;
    border-left: 3px solid #ececea;
}
.side-bar ul .menu li a.active:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 7px solid #d9853b;
    margin-top: -10px;
    margin-left: 180px;
}
.content {
    padding-left: 200px;
    transition: padding-left 0.5s;
}
.active > .side-bar {
    margin-left: -150px;
    transition: margin-left 0.5s;
}
.active > .content {
    padding-left: 50px;
    transition: padding-left 0.5s;
}

$(document).ready(function () {
    $(".push_menu").click(function () {
        $(".wrapper").toggleClass("active");
    });
});

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

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

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<style>
@import url(https://fonts.googleapis.com/css?family=Lato);
.container {
    width: 800px;
    overflow: hidden;
    display: inline-block;
}
.side-bar {
    background: #74afad;
    position: absolute;
    height: 100%;
    width: 200px;
    color: #fff;
    transition: margin-left 0.5s;
}
.side-bar ul {
    list-style: none;
    padding: 0px;
}
.side-bar ul li.menu-head {
    font-family: "Lato", sans-serif;
    padding: 20px;
}
.side-bar ul li.menu-head a {
    color: #fff;
    text-decoration: none;
    height: 50px;
}
.side-bar ul .menu-head a {
    color: #fff;
    text-decoration: none;
    height: 50px;
}
.side-bar ul .menu li a {
    color: #fff;
    text-decoration: none;
    display: inline-table;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
}
.side-bar ul .menu li a:hover {
    border-left: 3px solid #ececea;
    padding-left: 17px;
}
.side-bar ul .menu li a.active {
    padding-left: 17px;
    background: #d9853b;
    border-left: 3px solid #ececea;
}
.side-bar ul .menu li a.active:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 7px solid #d9853b;
    margin-top: -10px;
    margin-left: 180px;
}
.content {
    padding-left: 200px;
    transition: padding-left 0.5s;
}
.active > .side-bar {
    margin-left: -150px;
    transition: margin-left 0.5s;
}
.active > .content {
    padding-left: 50px;
    transition: padding-left 0.5s;
}
</style>

</head>
<body>
<div class="container">
    <div class="row">
        <div class="wrapper">
            <div class="side-bar">
                <ul>
                    <li class="menu-head">
                        Bootstrap <a href="#" class="push_menu"><span class="glyphicon glyphicon-align-justify pull-right"></span></a>
                    </li>
                    <div class="menu">
                        <li>
                            <a href="#">Dashboard <span class="glyphicon glyphicon-dashboard pull-right"></span></a>
                        </li>
                        <li>
                            <a href="#" class="active">Love snippet<span class="glyphicon glyphicon-heart pull-right"></span></a>
                        </li>
                        <li>
                            <a href="#">Like it? <span class="glyphicon glyphicon-star pull-right"></span></a>
                        </li>
                        <li>
                            <a href="#">Settings <span class="glyphicon glyphicon-cog pull-right"></span></a>
                        </li>
                    </div>
                </ul>
            </div>
            <div class="content">
                <div class="col-md-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">Panel heading</div>
                        <div class="panel-body">
                            Panel content
                        </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>
$(document).ready(function () {
    $(".push_menu").click(function () {
        $(".wrapper").toggleClass("active");
    });
});
</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