Bootstrap 4 Vertical menu using HTML CSS

<div class="bg-primary side-menu"> 
           <ul>
               <li class="bg-warning mb-4"><a href=""><strong><i class="fa fa-paper-plane-o"></i></strong> <div class="logo"><strong>Logo</strong></div></a></li>
               <li><a href=""><i class="fa  fa-bars"></i> <div>Menu Bar</div></a></li>
               <li><a href=""><i class="fa  fa-cubes"></i> <div>Cubes Collection</div></a></li>
               <li><a href=""><i class="fa  fa-dashboard"></i> <div>Dashboard</div></a></li>
               <li><a href=""><i class="fa  fa-search"></i> <div>Search Section</div></a></li>
               <li><a href=""><i class="fa  fa-user"></i> <div>User Register</div></a></li>
               <li><a href=""><i class="fa  fa-envelope"></i> <div>Inbox</div></a></li>
               <li><a href=""><i class="fa  fa-pie-chart"></i> <div>Chart Collection</div></a></li>
           </ul>
   </div>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

.side-menu {  display: inline-block; font-family: 'Roboto', sans-serif; height:100vh;    }
        .side-menu ul { margin: 0; padding: 0; list-style-type: none; }
        .side-menu ul li { line-height: 40px; padding:0px 8px; font-size: 15px; border-bottom: solid 1px #2b91ff; -webkit-transition: all 1s ease-in-out;
        -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } 
        .side-menu ul li a { display: block;  }
        .logo { font-size: 21px;}
        .side-menu i { color: #fff; font-size: 22px;  width:30px; text-align: center; } 
        .side-menu ul li div { color: #fff; display: none; padding-left: 10px;  } 
        .side-menu ul li a:hover { text-decoration: none; }
        .side-menu ul li:hover { background: #066996;}
        .side-menu:hover { width:250px;   }
        .side-menu:hover div { display: inline-block;}