<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="index-content"> <div class="container"> <div class="col-lg-4"> <div class="number-card text-center"> <div>100<span class="glyphicon glyphicon-plus"></span></div> <span class="title">vendors</span> </div> </div> <div class="col-lg-4"> <div class="number-card text-center"> <div>17K<span class="glyphicon glyphicon-plus"></span></div> <span class="title">years</span> </div> </div> <div class="col-lg-4"> <div class="number-card text-center"> <div>50<span class="glyphicon glyphicon-plus"></span></div> <span class="title">presentations</span> </div> </div> </div> </div>

.index-content{ margin: 40px 0; } .index-content .row{ margin-top:20px; } .index-content .number-card{ background-color: #FFFFFF; padding: 30px 0; } .index-content .number-card div{ font-weight: 600; font-size: 88px; line-height: 120px; letter-spacing: 2px; font-family: 'Arial',Helvetica,sans-serif; color: #062547; } .index-content .number-card div .glyphicon-plus { font-size: 52px; margin-left: 4px; color: #062547; } .index-content .number-card .title { text-transform: uppercase; color: #005095; font-size: 26px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: 'robotoslab',Arial,Helvetica,sans-serif; font-weight: 700; line-height: 0; } @media (max-width: 768px) { .index-content .col-lg-4 { margin-top: 20px; } .index-content .number-card div{ font-weight: 600; font-size: 68px; line-height: 90px; } .index-content .number-card div .glyphicon-plus { font-size: 40px; margin-left: 4px; } }