<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://fontawesome.com/v4.7.0/assets/font-awesome/css/font-awesome.css"> <div class="main-slider-bar hidden-xs"> <div class="container-fluid"> <div class=" row"> <div class="col-md-3 col-xs-12 border-r"> <div class="main-slider-info"> <div class="main-slider-info-cell"> <div class="cell-icon"> <i class="fa fa-truck"></i> </div> <div class="cell-content"> <span class="cell-caption"> FREE SHIPPING </span> <span class="cell-subcaption"> On all orders over 90$ </span> </div> </div> </div> </div> <div class="col-md-3 col-xs-12 border-r"> <div class="main-slider-info"> <div class="main-slider-info-cell"> <div class="cell-icon"> <i class="fa fa-shield"></i> </div> <div class="cell-content"> <span class="cell-caption"> SECURE SHOPPING </span> <span class="cell-subcaption"> From Online Full Secure shoping </span> </div> </div> </div> </div> <div class="col-md-3 col-xs-12 border-r"> <div class="main-slider-info"> <div class="main-slider-info-cell"> <div class="cell-icon"> <i class="fa fa-mobile"></i> </div> <div class="cell-content"> <span class="cell-caption"> CALL US ANYTIME </span> <span class="cell-subcaption"> +04786445953 </span> </div> </div> </div> </div> <div class="col-md-3 col-xs-12 border-r"> <div class="main-slider-info"> <div class="main-slider-info-cell"> <div class="cell-icon"> <i class="fa fa-share"></i> </div> <div class="cell-content"> <span class="cell-caption"> FREE RETURN </span> <span class="cell-subcaption"> 557-6308 Lacinia Road. NYC </span> </div> </div> </div> </div> </div> </div> </div>

.main-slider-bar { background: #F66249; color: #FFF; } .main-slider-bar span, .main-slider .main-slider-bar a, .main-slider .main-slider-bar i, .main-slider .main-slider-bar p, .main-slider .main-slider-bar h1, .main-slider .main-slider-bar h2, .main-slider .main-slider-bar h3, .main-slider .main-slider-bar h4, .main-slider .main-slider-bar h5, .main-slider .main-slider-bar h6 { color: #FFF; } .main-slider-bar .main-slider-info { display: inline-block; padding: 14px 0 14px; margin-top: 5px; width: 100%; } .main-slider-bar .main-slider-info { display: inline-block; } .main-slider-bar .border-r .main-slider-info { border-right: 1px solid rgba(255, 255, 255, 0.3); } .main-slider-bar .border-r:last-of-type .main-slider-info { border-right: 1px solid rgba(255, 255, 255, 0); } .main-slider-bar .main-slider-info .cell-icon { font-size: 50px; display: inline-block; position: relative; line-height: 40px; float: left; } .main-slider-bar .main-slider-info .cell-icon .dashicons { width: initial; height: initial; font-size: 30px; vertical-align: middle; } .main-slider-bar .main-slider-info .cell-content { float: left; margin-left: 15px; } .main-slider-bar .main-slider-info .cell-caption { font-size: 18px; line-height: 18px; font-weight: 700; display: block; position: relative; } .main-slider-bar .main-slider-info .cell-subcaption { font-size: 14px; display: block; position: relative; .main-slider-bar .main-slider-info .cell-caption { font-size: 16px; line-height: 16px; } .main-slider-bar .main-slider-info .cell-subcaption { font-size: 13px; }