Frontend Free Code
Frontend Free Code
Developers Codes
Graphics Photo
Crypto World
Code Tutorial
Javascript Codes
Home Home How to How to use Sitemap Sitemap About us About Us Suggested Posts Suggested Privacy Policy Privacy Policy

Feel The Power


content logo

Bootstrap Sidebars:

Bootstrap White Sidebar with Scrollbar

Previous CodePrevious Code Next CodeNext Code

As you know sidebars are perfect for websites that have too much content and too many subpages. This can make it hard for the users to find what they need in your site. A sidebar can aid your users in this case so that they may find opportunities where otherwise they might have missed. It could also be a perfect place to feature the profile information or encourage the users to subscribe to your newsletter and social media. This is exactly what a website owner wants; to keep the users in the website for as long as possible. all of the above outcomes can help your site grow and will give a huge boost to your site revenue that you generate from it.

The code we are sharing with you in today’s post is a sidebar with white background. Now, you might be thinking well that is really simple. That is true! You don’t need busy backgrounds and heavy styles and effects for your beautiful sidebar to be effective. Sometimes a simple looking white sidebar with the right features can be more than effective in your site. This Bootstrap sidebar features a sidebar scrollbar which is really nice if you want to go over your limit and add more categories. It also has a space where you can display the information about the user profile.

#

White Sidebar

#

Beautiful Sidebar

#

Bootstrap Sidebar

#

Sidebar with White Background

#

Sidebar Scrollbar

<!-- This script got from frontendfreecode.com -->
<aside class="sidebar">
    <div class="toggle">
        <a href="#" class="burger js-menu-toggle" data-toggle="collapse" data-target="#main-navbar">
            <span></span>
        </a>
    </div>
    <div class="side-inner">
        <div class="profile">
            <img src="https://frontendfreecode.com/img/user.jpg" alt="Image" class="img-fluid" />
            <h3 class="name">Username</h3>
            <span class="country">New York, USA</span>
        </div>

        <div class="counter d-flex justify-content-center">
            <!-- <div class="row justify-content-center"> -->
            <div class="col">
                <strong class="number">920</strong>
                <span class="number-label">Posts</span>
            </div>
            <div class="col">
                <strong class="number">18.5k</strong>
                <span class="number-label">Followers</span>
            </div>
            <div class="col">
                <strong class="number">160</strong>
                <span class="number-label">Following</span>
            </div>
            <!-- </div> -->
        </div>
        <div class="nav-menu">
            <ul>
                <li class="active">
                    <a href="#"><span class="icon-home mr-3"></span>Feed</a>
                </li>
                <li>
                    <a href="#"><span class="icon-search2 mr-3"></span>Explore</a>
                </li>
                <li>
                    <a href="#"><span class="icon-notifications mr-3"></span>Notifications</a>
                </li>
                <li>
                    <a href="#"><span class="icon-location-arrow mr-3"></span>Direct</a>
                </li>
                <li>
                    <a href="#"><span class="icon-pie-chart mr-3"></span>Stats</a>
                </li>
                <li>
                    <a href="#"><span class="icon-sign-out mr-3"></span>Sign out</a>
                </li>
            </ul>
        </div>
    </div>
</aside>
<main>
    <div class="site-section">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-9">
                    <div class="row">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
                        id est laborum.
                    </div>
                </div>
            </div>
        </div>
    </div>
</main><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
body {
    font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    background-color: #fcfcfc;
}
p {
    color: #b3b3b3;
    font-weight: 300;
}
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
a {
    -webkit-transition: 0.3s all ease;
    -o-transition: 0.3s all ease;
    transition: 0.3s all ease;
}
a,
a:hover {
    text-decoration: none !important;
}
h2 {
    font-size: 20px;
}
body {
    position: relative;
}
body:before {
    position: absolute;
    content: "";
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: 0.3s all ease-in-out;
    -o-transition: 0.3s all ease-in-out;
    transition: 0.3s all ease-in-out;
}
body.show-sidebar:before {
    opacity: 1;
    visibility: visible;
}
.site-section {
    padding: 7rem 0;
}
aside,
main {
    height: 100vh;
    min-height: 580px;
}
aside {
    width: 300px;
    left: 0;
    z-index: 1001;
    position: fixed;
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
    background-color: #fff;
    -webkit-transition: 1s -webkit-transform cubic-bezier(0.23, 1, 0.32, 1);
    transition: 1s -webkit-transform cubic-bezier(0.23, 1, 0.32, 1);
    -o-transition: 1s transform cubic-bezier(0.23, 1, 0.32, 1);
    transition: 1s transform cubic-bezier(0.23, 1, 0.32, 1);
    transition: 1s transform cubic-bezier(0.23, 1, 0.32, 1), 1s -webkit-transform cubic-bezier(0.23, 1, 0.32, 1);
}
.show-sidebar aside {
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);
}
aside .toggle {
    padding-left: 30px;
    padding-top: 30px;
    position: absolute;
    right: 0;
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
}
.show-sidebar aside .toggle .burger:before,
.show-sidebar aside .toggle .burger span,
.show-sidebar aside .toggle .burger:after {
    background: #fff;
}
.show-sidebar aside {
    -webkit-box-shadow: 10px 0 30px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 10px 0 30px 0 rgba(0, 0, 0, 0.1);
}
aside .side-inner {
    padding: 30px 0;
    height: 100vh;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}
aside .side-inner .profile {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #efefef;
}
aside .side-inner .profile img {
    width: 80px;
    margin: 0 auto 20px auto;
    border-radius: 50%;
}
aside .side-inner .profile .name {
    font-size: 18px;
    margin-bottom: 0;
}
aside .side-inner .profile .country {
    font-size: 14px;
    color: #cfcfcf;
}
aside .side-inner .counter {
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #efefef;
    text-align: center;
}
aside .side-inner .counter div .number {
    display: block;
    font-size: 20px;
    color: #000;
}
aside .side-inner .counter div .number-label {
    color: #cfcfcf;
}
aside .side-inner .nav-menu ul,
aside .side-inner .nav-menu ul li {
    padding: 0;
    margin: 0px;
    list-style: none;
}
aside .side-inner .nav-menu ul li a {
    display: block;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #8b8b8b;
    position: relative;
    -webkit-transition: 0.3s padding-left ease;
    -o-transition: 0.3s padding-left ease;
    transition: 0.3s padding-left ease;
}
aside .side-inner .nav-menu ul li a:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0px;
    background-color: #ff7315;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: 0.3s opacity ease, 0.3s visibility ease, 0.3s width ease;
    -o-transition: 0.3s opacity ease, 0.3s visibility ease, 0.3s width ease;
    transition: 0.3s opacity ease, 0.3s visibility ease, 0.3s width ease;
}
aside .side-inner .nav-menu ul li a:active,
aside .side-inner .nav-menu ul li a:focus,
aside .side-inner .nav-menu ul li a:hover {
    outline: none;
}
aside .side-inner .nav-menu ul li a:hover {
    background: #fcfcfc;
    color: #000;
}
aside .side-inner .nav-menu ul li a:hover:before {
    width: 4px;
    opacity: 1;
    visibility: visible;
}
aside .side-inner .nav-menu ul li.active a {
    background: #fcfcfc;
    color: #000;
}
aside .side-inner .nav-menu ul li.active a:before {
    opacity: 1;
    visibility: visible;
    width: 4px;
}
main {
    width: calc(100%);
}
main .post-entry {
    margin-bottom: 30px;
}
main .post-entry .custom-thumbnail {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 80px;
    flex: 0 0 80px;
    margin-right: 30px;
}
main .post-content h3 {
    font-size: 18px;
}
main .post-content .post-meta {
    font-size: 15px;
    color: #ccc;
}
/* Burger */
.burger {
    width: 28px;
    height: 32px;
    cursor: pointer;
    position: relative;
    z-index: 99;
    float: right;
}
.burger:before,
.burger span,
.burger:after {
    width: 100%;
    height: 2px;
    display: block;
    background: #000;
    border-radius: 2px;
    position: absolute;
    opacity: 1;
}
.burger:before,
.burger:after {
    -webkit-transition: top 0.35s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1), background-color 1.15s cubic-bezier(0.86, 0, 0.07, 1), -webkit-transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
    transition: top 0.35s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1), background-color 1.15s cubic-bezier(0.86, 0, 0.07, 1), -webkit-transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
    -o-transition: top 0.35s cubic-bezier(0.23, 1, 0.32, 1), transform 0.35s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1), background-color 1.15s cubic-bezier(0.86, 0, 0.07, 1);
    transition: top 0.35s cubic-bezier(0.23, 1, 0.32, 1), transform 0.35s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1), background-color 1.15s cubic-bezier(0.86, 0, 0.07, 1);
    transition: top 0.35s cubic-bezier(0.23, 1, 0.32, 1), transform 0.35s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1), background-color 1.15s cubic-bezier(0.86, 0, 0.07, 1);
    -webkit-transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
    -webkit-transition: top 0.35s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.35s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1), background-color 1.15s cubic-bezier(0.86, 0, 0.07, 1);
    content: "";
}
.burger:before {
    top: 4px;
}
.burger span {
    top: 15px;
}
.burger:after {
    top: 26px;
}
/* Hover */
.burger:hover:before {
    top: 7px;
}
.burger:hover:after {
    top: 23px;
}
/* Click */
.burger.active span {
    opacity: 0;
}
.burger.active:before,
.burger.active:after {
    top: 40%;
}
.burger.active:before {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=5);
    /*for IE*/
}
.burger.active:after {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=-5);
    /*for IE*/
}
.burger:focus {
    outline: none;
}
$(function () {
    "use strict";
    $(".js-menu-toggle").click(function (e) {
        var $this = $(this);
        if ($("body").hasClass("show-sidebar")) {
            $("body").removeClass("show-sidebar");
            $this.removeClass("active");
        } else {
            $("body").addClass("show-sidebar");
            $this.addClass("active");
        }
        e.preventDefault();
    });
    $(document).mouseup(function (e) {
        var container = $(".sidebar");
        if (!container.is(e.target) && container.has(e.target).length === 0) {
            if ($("body").hasClass("show-sidebar")) {
                $("body").removeClass("show-sidebar");
                $("body").find(".js-menu-toggle").removeClass("active");
            }
        }
    });
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
body {
    font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    background-color: #fcfcfc;
}
p {
    color: #b3b3b3;
    font-weight: 300;
}
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
a {
    -webkit-transition: 0.3s all ease;
    -o-transition: 0.3s all ease;
    transition: 0.3s all ease;
}
a,
a:hover {
    text-decoration: none !important;
}
h2 {
    font-size: 20px;
}
body {
    position: relative;
}
body:before {
    position: absolute;
    content: "";
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: 0.3s all ease-in-out;
    -o-transition: 0.3s all ease-in-out;
    transition: 0.3s all ease-in-out;
}
body.show-sidebar:before {
    opacity: 1;
    visibility: visible;
}
.site-section {
    padding: 7rem 0;
}
aside,
main {
    height: 100vh;
    min-height: 580px;
}
aside {
    width: 300px;
    left: 0;
    z-index: 1001;
    position: fixed;
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
    background-color: #fff;
    -webkit-transition: 1s -webkit-transform cubic-bezier(0.23, 1, 0.32, 1);
    transition: 1s -webkit-transform cubic-bezier(0.23, 1, 0.32, 1);
    -o-transition: 1s transform cubic-bezier(0.23, 1, 0.32, 1);
    transition: 1s transform cubic-bezier(0.23, 1, 0.32, 1);
    transition: 1s transform cubic-bezier(0.23, 1, 0.32, 1), 1s -webkit-transform cubic-bezier(0.23, 1, 0.32, 1);
}
.show-sidebar aside {
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);
}
aside .toggle {
    padding-left: 30px;
    padding-top: 30px;
    position: absolute;
    right: 0;
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
}
.show-sidebar aside .toggle .burger:before,
.show-sidebar aside .toggle .burger span,
.show-sidebar aside .toggle .burger:after {
    background: #fff;
}
.show-sidebar aside {
    -webkit-box-shadow: 10px 0 30px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 10px 0 30px 0 rgba(0, 0, 0, 0.1);
}
aside .side-inner {
    padding: 30px 0;
    height: 100vh;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}
aside .side-inner .profile {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #efefef;
}
aside .side-inner .profile img {
    width: 80px;
    margin: 0 auto 20px auto;
    border-radius: 50%;
}
aside .side-inner .profile .name {
    font-size: 18px;
    margin-bottom: 0;
}
aside .side-inner .profile .country {
    font-size: 14px;
    color: #cfcfcf;
}
aside .side-inner .counter {
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #efefef;
    text-align: center;
}
aside .side-inner .counter div .number {
    display: block;
    font-size: 20px;
    color: #000;
}
aside .side-inner .counter div .number-label {
    color: #cfcfcf;
}
aside .side-inner .nav-menu ul,
aside .side-inner .nav-menu ul li {
    padding: 0;
    margin: 0px;
    list-style: none;
}
aside .side-inner .nav-menu ul li a {
    display: block;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #8b8b8b;
    position: relative;
    -webkit-transition: 0.3s padding-left ease;
    -o-transition: 0.3s padding-left ease;
    transition: 0.3s padding-left ease;
}
aside .side-inner .nav-menu ul li a:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0px;
    background-color: #ff7315;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: 0.3s opacity ease, 0.3s visibility ease, 0.3s width ease;
    -o-transition: 0.3s opacity ease, 0.3s visibility ease, 0.3s width ease;
    transition: 0.3s opacity ease, 0.3s visibility ease, 0.3s width ease;
}
aside .side-inner .nav-menu ul li a:active,
aside .side-inner .nav-menu ul li a:focus,
aside .side-inner .nav-menu ul li a:hover {
    outline: none;
}
aside .side-inner .nav-menu ul li a:hover {
    background: #fcfcfc;
    color: #000;
}
aside .side-inner .nav-menu ul li a:hover:before {
    width: 4px;
    opacity: 1;
    visibility: visible;
}
aside .side-inner .nav-menu ul li.active a {
    background: #fcfcfc;
    color: #000;
}
aside .side-inner .nav-menu ul li.active a:before {
    opacity: 1;
    visibility: visible;
    width: 4px;
}
main {
    width: calc(100%);
}
main .post-entry {
    margin-bottom: 30px;
}
main .post-entry .custom-thumbnail {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 80px;
    flex: 0 0 80px;
    margin-right: 30px;
}
main .post-content h3 {
    font-size: 18px;
}
main .post-content .post-meta {
    font-size: 15px;
    color: #ccc;
}
/* Burger */
.burger {
    width: 28px;
    height: 32px;
    cursor: pointer;
    position: relative;
    z-index: 99;
    float: right;
}
.burger:before,
.burger span,
.burger:after {
    width: 100%;
    height: 2px;
    display: block;
    background: #000;
    border-radius: 2px;
    position: absolute;
    opacity: 1;
}
.burger:before,
.burger:after {
    -webkit-transition: top 0.35s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1), background-color 1.15s cubic-bezier(0.86, 0, 0.07, 1), -webkit-transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
    transition: top 0.35s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1), background-color 1.15s cubic-bezier(0.86, 0, 0.07, 1), -webkit-transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
    -o-transition: top 0.35s cubic-bezier(0.23, 1, 0.32, 1), transform 0.35s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1), background-color 1.15s cubic-bezier(0.86, 0, 0.07, 1);
    transition: top 0.35s cubic-bezier(0.23, 1, 0.32, 1), transform 0.35s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1), background-color 1.15s cubic-bezier(0.86, 0, 0.07, 1);
    transition: top 0.35s cubic-bezier(0.23, 1, 0.32, 1), transform 0.35s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1), background-color 1.15s cubic-bezier(0.86, 0, 0.07, 1);
    -webkit-transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
    -webkit-transition: top 0.35s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.35s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1), background-color 1.15s cubic-bezier(0.86, 0, 0.07, 1);
    content: "";
}
.burger:before {
    top: 4px;
}
.burger span {
    top: 15px;
}
.burger:after {
    top: 26px;
}
/* Hover */
.burger:hover:before {
    top: 7px;
}
.burger:hover:after {
    top: 23px;
}
/* Click */
.burger.active span {
    opacity: 0;
}
.burger.active:before,
.burger.active:after {
    top: 40%;
}
.burger.active:before {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=5);
    /*for IE*/
}
.burger.active:after {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=-5);
    /*for IE*/
}
.burger:focus {
    outline: none;
}
</style>

</head>
<body>
<aside class="sidebar">
    <div class="toggle">
        <a href="#" class="burger js-menu-toggle" data-toggle="collapse" data-target="#main-navbar">
            <span></span>
        </a>
    </div>
    <div class="side-inner">
        <div class="profile">
            <img src="https://frontendfreecode.com/img/user.jpg" alt="Image" class="img-fluid" />
            <h3 class="name">Username</h3>
            <span class="country">New York, USA</span>
        </div>

        <div class="counter d-flex justify-content-center">
            <!-- <div class="row justify-content-center"> -->
            <div class="col">
                <strong class="number">920</strong>
                <span class="number-label">Posts</span>
            </div>
            <div class="col">
                <strong class="number">18.5k</strong>
                <span class="number-label">Followers</span>
            </div>
            <div class="col">
                <strong class="number">160</strong>
                <span class="number-label">Following</span>
            </div>
            <!-- </div> -->
        </div>
        <div class="nav-menu">
            <ul>
                <li class="active">
                    <a href="#"><span class="icon-home mr-3"></span>Feed</a>
                </li>
                <li>
                    <a href="#"><span class="icon-search2 mr-3"></span>Explore</a>
                </li>
                <li>
                    <a href="#"><span class="icon-notifications mr-3"></span>Notifications</a>
                </li>
                <li>
                    <a href="#"><span class="icon-location-arrow mr-3"></span>Direct</a>
                </li>
                <li>
                    <a href="#"><span class="icon-pie-chart mr-3"></span>Stats</a>
                </li>
                <li>
                    <a href="#"><span class="icon-sign-out mr-3"></span>Sign out</a>
                </li>
            </ul>
        </div>
    </div>
</aside>
<main>
    <div class="site-section">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-9">
                    <div class="row">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
                        id est laborum.
                    </div>
                </div>
            </div>
        </div>
    </div>
</main><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
$(function () {
    "use strict";
    $(".js-menu-toggle").click(function (e) {
        var $this = $(this);
        if ($("body").hasClass("show-sidebar")) {
            $("body").removeClass("show-sidebar");
            $this.removeClass("active");
        } else {
            $("body").addClass("show-sidebar");
            $this.addClass("active");
        }
        e.preventDefault();
    });
    $(document).mouseup(function (e) {
        var container = $(".sidebar");
        if (!container.is(e.target) && container.has(e.target).length === 0) {
            if ($("body").hasClass("show-sidebar")) {
                $("body").removeClass("show-sidebar");
                $("body").find(".js-menu-toggle").removeClass("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
CATEGORIES
Bootstrap Accordions Bootstrap Buttons
Bootstrap Cards Bootstrap Footers
Bootstrap Forms Bootstrap Grids
Bootstrap Headers Bootstrap Paginations
Bootstrap Popups Bootstrap Progress Bars
Bootstrap Search Boxes Bootstrap Sidebars
Bootstrap Sliders Bootstrap Tables
Bootstrap Tabs Bootstrap Thumbnails
Bootstrap Timeline Bootstrap Toggle Switches
React Accordions React Buttons
React Forms React Headers
React Menus React Popups
React Progress Bars React Sidebars
Frontend Free Code
© 2024 Kerixa Inc