content logo

Bootstrap Sidebars:

Bootstrap Purple Sidebar

Sidebars are great features in any website. It does a lot of great things from increasing traffic and speeding up the site. Even though, those people who have skill in web development may actually be able to design their own sidebar with custom features, it is not as easy as it seems. It is always much faster to just choose a professionally designed template and use that instead. It both saves a lot of time not needing to write the codes for the sidebar and is optimized for the best performance for any website which is great.

Here we have a Bootstrap purple sidebar to help you when creating your website. The design is pretty simplistic with a purple and lilac theme. The sidebar doesn’t seem to have any spectacular features but it is a sidebar with hover effect which means every time you move your mouse cursor over one of the items on this purple sidebar, the background colour will become lighter to indicate that you are going to select it. it is also a sidebar with close button. It can be expanded or minimized by the press of a toggle button located at the top of the screen.

#

Purple Sidebar

#

Bootstrap Purple Sidebar

#

Sidebar with Hover Effect

#

Sidebar with Close Button

<!-- This script got from frontendfreecode.com -->
<div id="wrapper">
    <!-- Sidebar -->
    <div id="sidebar-wrapper">
        <ul class="sidebar-nav">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
    <!-- Page Content -->
    <div id="page-content-wrapper">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <a href="#" class="btn" id="menu-toggle"><span class="glyphicon glyphicon-menu-hamburger"></span></a>
                    <h1 class="text-center">Bootstrap Sidebar</h1>
                    <h2 class="small text-center">Second Header</h2>
                    <p class="text-center">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium perferendis maiores velit ad id delectus nisi eligendi doloremque officia necessitatibus, repellendus alias omnis, natus nam voluptates dolor vel
                        minus ab?
                    </p>
                </div>
            </div>
        </div>
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
#sidebar-wrapper {
    z-index: 1;
    position: absolute;
    width: 0;
    height: 100%;
    overflow-y: hidden;
    background: #5b4282;
    opacity: 0.9;
    transition: all 0.5s;
    display: flex;
    align-items: center;
}
/* Main Content */
#page-content-wrapper {
    width: 100%;
    position: absolute;
    padding: 15px;
    transition: all 0.5s;
}
#menu-toggle {
    transition: all 0.3s;
    font-size: 2em;
}
/* Change the width of the sidebar to display it*/
#wrapper.menuDisplayed #sidebar-wrapper {
    width: 250px;
}
#wrapper.menuDisplayed #page-content-wrapper {
    padding-left: 250px;
}
/* Sidebar styling */
.sidebar-nav {
    padding: 0;
    list-style: none;
    transition: all 0.5s;
    width: 100%;
    text-align: center;
}
.sidebar-nav li {
    line-height: 40px;
    width: 100%;
    transition: all 0.3s;
    padding: 10px;
}
.sidebar-nav li a {
    display: block;
    text-decoration: none;
    color: #ddd;
}
.sidebar-nav li:hover {
    background: #846bab;
}
$(document).ready(function () {
    $("#menu-toggle").click(function (e) {
        e.preventDefault();
        $("#wrapper").toggleClass("menuDisplayed");
    });
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.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.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<style>
#sidebar-wrapper {
    z-index: 1;
    position: absolute;
    width: 0;
    height: 100%;
    overflow-y: hidden;
    background: #5b4282;
    opacity: 0.9;
    transition: all 0.5s;
    display: flex;
    align-items: center;
}
/* Main Content */
#page-content-wrapper {
    width: 100%;
    position: absolute;
    padding: 15px;
    transition: all 0.5s;
}
#menu-toggle {
    transition: all 0.3s;
    font-size: 2em;
}
/* Change the width of the sidebar to display it*/
#wrapper.menuDisplayed #sidebar-wrapper {
    width: 250px;
}
#wrapper.menuDisplayed #page-content-wrapper {
    padding-left: 250px;
}
/* Sidebar styling */
.sidebar-nav {
    padding: 0;
    list-style: none;
    transition: all 0.5s;
    width: 100%;
    text-align: center;
}
.sidebar-nav li {
    line-height: 40px;
    width: 100%;
    transition: all 0.3s;
    padding: 10px;
}
.sidebar-nav li a {
    display: block;
    text-decoration: none;
    color: #ddd;
}
.sidebar-nav li:hover {
    background: #846bab;
}
</style>

</head>
<body>
<div id="wrapper">
    <!-- Sidebar -->
    <div id="sidebar-wrapper">
        <ul class="sidebar-nav">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
    <!-- Page Content -->
    <div id="page-content-wrapper">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <a href="#" class="btn" id="menu-toggle"><span class="glyphicon glyphicon-menu-hamburger"></span></a>
                    <h1 class="text-center">Bootstrap Sidebar</h1>
                    <h2 class="small text-center">Second Header</h2>
                    <p class="text-center">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium perferendis maiores velit ad id delectus nisi eligendi doloremque officia necessitatibus, repellendus alias omnis, natus nam voluptates dolor vel
                        minus ab?
                    </p>
                </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 () {
    $("#menu-toggle").click(function (e) {
        e.preventDefault();
        $("#wrapper").toggleClass("menuDisplayed");
    });
});
</script>

</body>
</html>
Preview