<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="srvice02"> <div class="wlm2">OUR SERVICES :</div> <div class="service1"><div class="serviceicon01"><i class="fa fa-cloud fa-3x" aria-hidden="true"></i></div> <div class="texticon"><h3>Hi eao kkzt braa</h3></div> <div class="texticon02">Praediximus enim Montium sub ipso vivendi termino his vocabulis appellatos fabricarum culpasse tribunos ut adminicula futurae molitioni pollicitos</div> </div> <div class="service2"><div class="serviceicon01"><i class="fa fa-eercast fa-3x" aria-hidden="true"></i></i></div><div class="texticon"><h3>Hi eao kkzt braa</h3></div><div class="texticon02">Praediximus enim Montium sub ipso vivendi termino his vocabulis appellatos fabricarum culpasse tribunos ut adminicula futurae molitioni pollicitos</div></div> <div class="service3"><div class="serviceicon01"><i class="fa fa-spinner fa-3x" aria-hidden="true"></i></div><div class="texticon"><h3>Hi eao kkzt braa</h3></div><div class="texticon02">Praediximus enim Montium sub ipso vivendi termino his vocabulis appellatos fabricarum culpasse tribunos ut adminicula futurae molitioni pollicitos</div></div> </div> Put a <a href="http://fontawesome.io/icons/">icon</a> </div> </div>

.srvice02{ margin-left: 150px; margin-bottom: 700px; } .service1 { width: 230px; height: 300px; border:1px solid #cccccc; float: left; width: 28%; display: inline-block; -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; } .service2 { width: 230px; height: 300px; border:1px solid #cccccc; float: left; width: 28%; display: inline-block; -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; } .service3 { width: 230px; height: 300px; border:1px solid #cccccc; float: left; width: 28%; display: inline-block; -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; } .serviceicon01 i { font-size:70px; color:#FFFFFF; background: #5bc0de; padding:15px; border-radius:50%; border: solid 3px #5bc0de; -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; } .serviceicon01 { margin-left: 96px; margin-top: 15px; } .texticon { color: #5bc0de; font-size: 18px; margin-left: 73px; margin-top: 15px; } .texticon02 { text-align: center; margin-left: 12px; margin-right: 12px; margin-top: 30px; color: rgba(111,97,97,0.7); } .service1:hover { background-color: #F5F5F5; -webkit-transform: translate(0,1em); -moz-transform: translate(0,1em); -o-transform: translate(0,1em); -ms-transform: translate(0,1em); transform: translate(0,1em); } .service2:hover { background-color: #F5F5F5; -webkit-transform: translate(0,1em); -moz-transform: translate(0,1em); -o-transform: translate(0,1em); -ms-transform: translate(0,1em); transform: translate(0,1em); } .service3:hover { background-color: #F5F5F5; -webkit-transform: translate(0,1em); -moz-transform: translate(0,1em); -o-transform: translate(0,1em); -ms-transform: translate(0,1em); transform: translate(0,1em); } .service1:hover i { color: #5bc0de; background-color: white; border-color: #5bc0de; -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; } .service2:hover i { color: #5bc0de; background-color: white; border-color: #5bc0de; -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; } .service3:hover i { color: #5bc0de; background-color: white; border-color: #5bc0de; -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; } .wlm2 { margin-bottom: 40px; color: #999; border-bottom: rgba(0,0,0,0.13); border-bottom-width: 1px; border-bottom-style: solid; width: 920px; height: 21px; font-weight: bold; font-size: 13px; letter-spacing: 1.5px; }