<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://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="container anidi_services "> <div class="row"> <ul class="links"> <li><a href="" title="Food & Beverages"> <span class="icon"><i class="fa fa-car"></i></span> <span class="text">Food & Beverages</span></a> <div class="clearfix"></div> </li> <li><a href="" title="Banking & Insurance apps"> <span class="icon"><i class="fa fa-car"></i></span> <span class="text">Banking & Insurance</span></a> <div class="clearfix"></div> </li> </ul> </div> </div>

li { list-style: none; } .anidi_services { padding: 40px 20px 80px; border-radius: 6px; background-color: rgb(20, 110, 153); } .anidi_services ul { display: block; } .anidi_services ul li { display: block; margin-bottom: 15px; color: #fff; text-decoration: none; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } .anidi_services ul li a { display: block; color: #fff; text-decoration: none; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } .anidi_services ul li a span.icon { width: 50px; display: block; font-size: 30px; vertical-align: middle; float: left; } .anidi_services ul li a span.text { display: block; vertical-align: middle; font-size: 16px; margin-left: 50px; padding-top: 12px; }