<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"> <div class="project-detail"> <ul> <li><div class="number h1"> 650+</div><div class="title-text h6"> Happy Customers</div></li><li><div class="number h1"> 1800+</div><div class="title-text h6"> Finished Project</div></li><li><div class="number h1"> 70+</div><div class="title-text h6"> Resource Strength</div></li></ul></div> </div> </div>

.project-detail { display: table; width: 100%; margin-top: 150px; } .project-detail ul { width: 60%; margin: 0 auto; } .project-detail ul li { display: inline-block; text-align: center; opacity: 1; width: 32%; text-align: center; color: #000; z-index: 1; position: relative; padding: 0 25px; } .project-detail ul li .number { border-bottom: solid 3px #fff; padding-bottom: 10px; } .number.h1 { font-size: 36px!important; font-weight: 600; padding-bottom: 0!important; } .project-detail ul li .title-text { font-size: 15px; padding: 10px 30px; text-transform: uppercase; }