content logo

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 www.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://www.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 www.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