<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script> <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>

<style> .left, .right { top: 50%; float: left; transform: translateY(125%); } .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>