<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 ----------> <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet"> <div id="steps" class="container"> <div class="row"> <div class="step col-md-4"> <div class="icon"> <div class="icon-wrap"> <i class="glyphicon glyphicon-user"></i> </div> </div> <div class="content-wrap"> <div class="content"> <h3>ПОИСК ОБЪЕКТОВ</h3> </div> <div class="description"> <p>Регистрация</p> </div> </div> </div> <div class="step col-md-4"> <div class="icon"> <div class="icon-wrap"> <i class="glyphicon glyphicon-search"></i> </div> </div> <div class="content-wrap"> <div class="content"> <h3>ПОИСК ОБЪЕКТОВ</h3> </div> <div class="description"> <p>Регистрация</p> </div> </div> </div> <div class="step col-md-4"> <div class="icon"> <div class="icon-wrap"> <i class="glyphicon glyphicon-heart"></i> </div> </div> <div class="content-wrap"> <div class="content"> <h3>ПОИСК ОБЪЕКТОВ</h3> </div> <div class="description"> <p>Регистрация</p> </div> </div> </div> </div> </div>

#steps { text-align: center; } #steps.container { max-width: 750px; } #steps h3 { color: #444444; font-size: 17px; line-height: 1.4; text-align: center; text-transform: uppercase; padding: 0; margin: 0 0 .75em 0; text-transform: uppercase; font-weight: 600; } .icon { border-radius: 0px; padding-top: 8px; padding-right: 8px; padding-bottom: 8px; padding-left: 8px; margin-top: 0px; margin-right: 0px; margin-bottom: 8px; margin-left: 0px; background: #ffffff; display: inline-block; text-align: center; line-height: 1em; vertical-align: middle; max-width: 100%; font-size: 48px; } .icon-wrap { position: relative; overflow: hidden; transform: translate3d(0, 0, 0); }