Untitled

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 ---------->

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.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 ---------->

<head>
  <title>Student page</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>


<hr>
<div class="container bootstrap snippet">
    <div class="row">
  		<div class="col-sm-10"><h1>{{user.name}} ({{user.username}})</h1></div>
    </div>
    <div class="row">
  		<div class="col-sm-3"><!--left col-->
            <div class="text-center">
                <img src="{{user.avatar(128)}}" class="avatar img-circle img-thumbnail" alt="avatar">
            </div></hr><br>


          <ul class="list-group">
            <li class="list-group-item text-muted">Лабораторные работы <i class="fa fa-dashboard fa-1x"></i></li>
            <li class="list-group-item text-right"><span class="pull-left"><strong>Всего</strong></span> 125</li>
            <li class="list-group-item text-right"><span class="pull-left"><strong>Сдано</strong></span> 13</li>
            <li class="list-group-item text-right"><span class="pull-left"><strong>На 'отлично'</strong></span> 37</li>
            <li class="list-group-item text-right"><span class="pull-left"><strong>На 'хорошо'</strong></span> 78</li>
            <li class="list-group-item text-right"><span class="pull-left"><strong>На 'удовлетворительно'</strong></span> 78</li>
          </ul>


        </div><!--/col-3-->

        <div class="col-sm-9">
            <ul class="nav nav-tabs">
                <li class="active"><a data-toggle="tab" href="#group">Группы</a></li>
                <li class=""><a data-toggle="tab" href="#lr">Лабораторные</a></li>
                <li class=""><a data-toggle="tab" href="#Mark">Оценки</a></li>
            </ul>


          <div class="tab-content">
            <div class="tab-pane active" id="group">
                <hr>
                 <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>Предмет</th>
                                    <th>Группа</th>
                                    <th>Количество студентов</th>
                                    <th>Количество лабораторных</th>
                                </tr>
                            </thead>
                            <tbody id="items">
                            </tbody>
                        </table>
                    <hr>
                 </div><!--/tab-pane-->
            </div><!--/tab-content-->
              <div class="tab-pane" id="lr">
                <hr>
                 <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>Предмет</th>
                                    <th>Название лабораторной</th>
                                    <th>Группа</th>
                                </tr>
                            </thead>
                            <tbody id="items">
                            </tbody>
                        </table>
                    <hr>
                 </div><!--/tab-pane-->
            </div><!--/tab-content-->
              <div class="tab-pane" id="Mark">
                <hr>
                 <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>Предмет</th>
                                    <th>Название лабораторной</th>
                                    <th>Группа</th>
                                    <th>Студент</th>
                                    <th>Оценка</th>
                                </tr>
                            </thead>
                            <tbody id="items">
                            </tbody>
                        </table>
                    <hr>
                 </div><!--/tab-pane-->
            </div><!--/tab-content-->

        </div><!--/col-9-->
    </div><!--/row-->