<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <script src="https://use.fontawesome.com/1dec14be15.js"></script> <div class="container"> <div class="row"> <h1 class="text-center">Features and Services Design Layout Using Bootstrap</h1> <div class="col-xs-12"> <ul class="list-inline cause-list pad42-top"> <li> <div class="icon-holder dsp-flex"> <i class="fa fa-tree font_70" aria-hidden="true"></i> </div> <label>Tree Planation</label> </li> <li> <div class="icon-holder dsp-flex"> <i class="fa fa-tint font_70" aria-hidden="true"></i> </div> <label>Blood Donation</label> </li> <li> <div class="icon-holder dsp-flex"> <i class="fa fa-child font_70" aria-hidden="true"></i> </div> <label>Awareness</label> </li> <li> <div class="icon-holder dsp-flex"> <i class="fa fa-area-chart font_70" aria-hidden="true"></i> </div> <label>Save Nature</label> </li> <li> <div class="icon-holder dsp-flex"> <i class="fa fa-dribbble font_70" aria-hidden="true"></i> </div> <label>Sports</label> </li> <li> <div class="icon-holder dsp-flex"> <i class="fa fa-trophy font_70" aria-hidden="true"></i> </div> <label>Activities</label> </li> </ul> </div> </div> </div>

.cause-list { margin-left: -13px; } .cause-list .icon-holder { margin: 0; border: 1px solid #eda636; width: 158px; height: 158px; background: #ffffff; } .cause-list li { padding: 0 13px; margin: 12px 0; } .cause-list li label { color: #eda636; font-size: 14px; text-transform: uppercase; margin: 12px 0 0; display: block; text-align: center; font-weight: normal } .icon-holder { background: #eda636; border-radius: 100%; vertical-align: middle; height: 90px; width: 90px; text-align: center; margin-right: 20px; } .dsp-flex { display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ align-items: center; -webkit-align-items: center; justify-content: center } .font_70 { font-size: 70px !important;}