content logo
Bootstrap Sidebars: Bootstrap Expanding Sidebar

Many websites do not have enough space to place a sidebar. In this code, we have a short and small sidebar, which normally has only its icons specified. In Hover mode, this sidebar increases and the title of each item appears in the sidebar. Also, any item that has a cursor on it will change its background color to dark.

#Bootstrap Sidebar #Expanding Sidebar #Icon Sidebar #Blue Sidebar
<!-- this script got from www.frontendfreecode.com -->
<div class="left"> <div class="item"> <i class="fas fa-fw fa-bars"></i> </div> <div class="item active"> <i class="fas fa-fw fa-map-marked-alt"></i> Map </div> <div class="item"> <i class="fas fa-fw fa-columns"></i> Split </div> <div class="item"> <i class="fas fa-fw fa-th"></i> Grid </div> <div class="item"> <i class="fas fa-fw fa-user-circle"></i> Dash </div> </div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://www.frontendfreecode.com">Frontend Code</a>
.left,
.right {
    top: 50%;
    float: left;
}
.left {
    background: #337ab7;
    display: inline-block;
    white-space: nowrap;
    width: 50px;
    transition: width .5s;
}
.right {
    background: #fff;
    width: 350px;
    transition: width 1s;
    border-style: solid;
    border-color: #ccc;
    border-width: 1px;
}
.left:hover {
    width: 250px;
}
.item:hover {
    background-color: #222;
}
.left .fas {
    margin: 15px;
    width: 20px;
    color: #fff;
}
i.fas {
    font-size: 17px;
    vertical-align: middle !important;
}
.item {
    height: 50px;
    overflow: hidden;
    color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" >
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" >
<script src="https://code.jquery.com/jquery-3.3.1.slim.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.1.2/js/bootstrap.min.js" ></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" ></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"><!-- this script got from www.frontendfreecode.com -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" >
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" >
<script src="https://code.jquery.com/jquery-3.3.1.slim.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.1.2/js/bootstrap.min.js" ></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" ></script>
<style>
.left,
.right {
    top: 50%;
    float: left;
}
.left {
    background: #337ab7;
    display: inline-block;
    white-space: nowrap;
    width: 50px;
    transition: width .5s;
}
.right {
    background: #fff;
    width: 350px;
    transition: width 1s;
    border-style: solid;
    border-color: #ccc;
    border-width: 1px;
}
.left:hover {
    width: 250px;
}
.item:hover {
    background-color: #222;
}
.left .fas {
    margin: 15px;
    width: 20px;
    color: #fff;
}
i.fas {
    font-size: 17px;
    vertical-align: middle !important;
}
.item {
    height: 50px;
    overflow: hidden;
    color: #fff;
}
</style>

</head>
<body>
<div class="left">
    <div class="item">
        <i class="fas fa-fw fa-bars"></i>
    </div>
    <div class="item active">
        <i class="fas fa-fw fa-map-marked-alt"></i> Map
    </div>
    <div class="item">
        <i class="fas fa-fw fa-columns"></i> Split
    </div>
    <div class="item">
        <i class="fas fa-fw fa-th"></i> Grid
    </div>
    <div class="item">
        <i class="fas fa-fw fa-user-circle"></i> Dash
    </div>
</div>
<div id="bcl"><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://www.frontendfreecode.com">Frontend Code</a></div>

</body>
</html>
Preview