<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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 ----------> <div class="container"> <div class="row"> <h2>Bootstrap 4 ul il box</h2> <div class="andi_icns_servics"> <ul> <li><span class="icons"><i class="oct-bir_brif_case"></i> </span> <span class="text">Business</span></li> <li><span class="icons"><i class="oct-e_comars"></i> </span> <span class="text">eCommerce</span></li> <li><span class="icons"><i class="oct-sport"></i> </span> <span class="text">Sports</span></li> <li><span class="icons"><i class="oct-social_net"></i> </span> <span class="text">Social Network</span></li> <li><span class="icons"><i class="oct-health"></i> </span> <span class="text">Healthcare</span></li> <li><span class="icons"><i class="oct-eduction"></i> </span> <span class="text">Education</span></li> <li><span class="icons"><i class="oct-travel"></i> </span> <span class="text">Travel</span></li> <li><span class="icons"><i class="oct-game"></i> </span> <span class="text">Games</span></li> </ul> </div> </div> </div>

.andi_icns_servics { display: block; margin-bottom: 35px; background-color: #000; } @media (max-width: 1499px) { .andi_icns_servics ul li { width: 140px; }} .andi_icns_servics ul { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; justify-content: space-between; text-align: center; } .andi_icns_servics ul li { display: inline-block; border-width: 1px; border-color: rgb(255, 255, 255); border-style: dashed; border-radius: 5px; width: 162px; height: 167px; text-align: center; margin-bottom: 5px; padding: 0 2px; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } .andi_icns_servics ul li span.icons { margin-top: 30px; margin-bottom: 30px; font-size: 50px; height: 50px; line-height: 50px; } .andi_icns_servics ul li span { display: block; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; color: #fff; } .andi_icns_servics ul li span.text { font-size: 18px; } .andi_icns_servics ul li:hover { background-color: #fff; }