<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/font-awesome/4.5.0/css/font-awesome.css" rel="stylesheet"> <div class="container"> <div class="row"> <div class="col-md-3"> <div class="panel panel-primary"> <div class="panel-heading"> <h4 class="panel-title"> <a href="#">Разделы личного кабинета </a> </h4> </div> <div class="panel-collapse"> <ul class="list-group list-unstyled"> <li class="list-group-item"><a href="#">Личные даннные</a></li> <li class="list-group-item"><a href="#">Заказы</a></li> <li class="list-group-item"><a href="#">Закладки</a></li> <li class="list-group-item"><a href="#">Вы смотрели</a></li> <li class="list-group-item"><a href="#">Смена пароля</a></li> </ul> </div> </div> </div> <div class="col-md-9"> <div class="panel panel-primary"> <div class="panel-heading">Личный кабинет</div> <div class="panel-body panel-profile"> <div class="row"> <div class="col-md-6"> <div class="profile-item profile-item-user"> <a href="#"> <span>Личные данные</span> </a> <small>В этом разделе вы можете изменить свои личные данные.</small> </div> </div> <div class="col-md-6"> <div class="profile-item profile-item-orders"> <a href="#"> <span>Заказы</span> </a> <small>Информация о всех ваших заказах: номера, даты, состав заказов и их статусы.</small> </div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="profile-item profile-item-star"> <a href="#"> <span>Избранное</span> </a> <small>Информация о всех ваших заказах: номера, даты, состав заказов и их статусы.</small> </div> </div> <div class="col-md-6"> <div class="profile-item profile-item-eye"> <a href="#"> <span>Вы смотрели</span> </a> <small>Здесь можно увидеть список ранее просмотренных вами товаров.</small> </div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="profile-item profile-item-pwd"> <a href="#"> <span>Смена пароля</span> </a> <small>Здесь вы можете сменить свои данные для доступа в личный кабинет.</small> </div> </div> <div class="col-md-6"> </div> </div> </div> </div> </div> <div class="col-md-12 profile"> </div> </div> </div>

.panel-profile > .row { padding-bottom: 30px; } .profile-item { position: relative; padding: 0 0 0 70px; text-transform: none; display:block; } .profile-item > a { display: block; overflow: hidden; text-decoration: none; font-size: 14pt; } .profile-item > a:first-child:before { font-family: "FontAwesome"; display: inline-block; font-size: 55px; line-height: 18px; padding: 20px 0 0 0px; width: 70px; height: 70px; position: absolute; left: 0; } .profile-item-user > a:first-child:before { content: "\f07a"; } .profile-item-orders > a:first-child:before { content: "\f022"; } .profile-item-pwd > a:first-child:before { content: "\f023"; } .profile-item-pwd > a:first-child:before { content: "\f023"; padding: 20px 0 0 10px; } .profile-item-star > a:first-child:before { content: "\f006"; } .profile-item-eye > a:first-child:before { content: "\f06e"; } .block { display:block; }