Bootstrap Snippet Profile using HTML CSS Bootstrap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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 ---------->
<div class="container" style="margin-top:10px;">
<div class="row form-group">
<div class="col-xs-3">
<div class="panel panel-default">
<div class="panel-image hide-panel-body">
<img src="http://www.nstp.org//images/Instructors/Nina_Tross_130x130_images_instructor.jpg" class="panel-image-preview" />
</div>
<div class="panel-footer">
    <div class="agenda">
        <div class="table-responsive">
            <table class="table table-condensed table-bordered">
             
                <tbody>
                    <!-- Single event in a single day -->
                    <tr>
                        <td class="agenda-date" class="active" rowspan="1">
                            <div class="dayofmonth">26</div>
                            <div class="dayofweek">Saturday</div>
                            <div class="shortdate text-muted">July, 2014</div>
                        </td>
                        <td class="agenda-time">
                            5:30 AM
                        </td>
                        <td class="agenda-events">
                            <div class="agenda-event">
                                <i class="glyphicon glyphicon-repeat text-muted" title="Repeating event"></i>
                                Fishing
                            </div>
                        </td>
                    </tr>
                    
                    <!-- Multiple events in a single day (note the rowspan) -->
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@import url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
.panel-image img.panel-image-preview {
    width: 100%;
    border-radius: 4px 4px 0px 0px;
}
.panel-heading ~ .panel-image img.panel-image-preview {
    border-radius: 0px;
}
.panel-image ~ .panel-body, .panel-image.hide-panel-body ~ .panel-body {
    overflow: hidden;
}
.panel-image ~ .panel-footer a {
    padding: 0px 2px;
    font-size: .9em;
    color: rgb(100, 100, 100);
}
.agenda {  }
/* Dates */
.agenda .agenda-date { width: 170px; }
.agenda .agenda-date .dayofmonth {
  width: 40px;
  font-size: 36px;
  line-height: 36px;
  float: left;
  text-align: right;
  margin-right: 10px; 
}
.agenda .agenda-date .shortdate {
  font-size: 0.75em; 
}
/* Times */
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Profile"
Bootstrap 3.3.0 Snippet by joshuaedwardk

Related: See More

Questions / Comments:

"Profile" Bootstrap 3.3.0 Snippet by joshuaedwardk

Related: See More

Questions / Comments:

"Profile"
Bootstrap 3.3.0 Snippet by joshuaedwardk