Bootstrap Snippet Update Cards using HTML CSS

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="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css"/>
<!--Card with Media-->    
<div class="media block-update-card">
  <a class="pull-left" href="#">
    <img class="media-object update-card-MDimentions" src="http://3.bp.blogspot.com/-IbEOTNtCMyU/TfCAdHaAxEI/AAAAAAAAA8U/EATib38SSAM/s320/joe-mcelderry.jpg" alt="...">
  </a>
  <div class="media-body update-card-body">
    <h4 class="media-heading">Manning Hilton</h4>
    <p>This is the body content of this media.This can be 
      used as an update panel</p>
  </div>
 </div>
  
  <!--Simple Card Layout-->
  <div class="block-update-card">
    <div class="update-card-body">
      <h4>Vinothbabu K</h4>
      <p>This is me. I am a Good Boy.This is the body content of this media.This can be 
      used as an update panel.</p>
    </div>
  </div>
  
  
  <!--Wanna Call Someone :P -->
  <div class="media block-update-card">
  <a class="pull-left" href="#">
    <img class="media-object update-card-MDimentions" src="http://3.bp.blogspot.com/-IbEOTNtCMyU/TfCAdHaAxEI/AAAAAAAAA8U/EATib38SSAM/s320/joe-mcelderry.jpg" alt="...">
  </a>
  <div class="media-body update-card-body">
    <h4 class="media-heading">Manning Hilton</h4>
    <div class="btn-toolbar card-body-social" role="toolbar">
      <div class="btn-group fa fa-github-alt git"></div>
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
.block-update-card {
  height: 100%;
  border: 1px #FFFFFF solid;
  width: 380px;
  float: left;
  margin-left: 10px;
  margin-top: 0;
  padding: 0;
  box-shadow: 1px 1px 8px #d8d8d8;
  background-color: #FFFFFF;
}
.block-update-card .h-status {
  width: 100%;
  height: 7px;
  background: repeating-linear-gradient(45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px);
}
.block-update-card .v-status {
  width: 5px;
  height: 80px;
  float: left;
  margin-right: 5px;
  background: repeating-linear-gradient(45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px);
}
.block-update-card .update-card-MDimentions {
  width: 80px;
  height: 80px;
}
.block-update-card .update-card-body {
  margin-top: 10px;
  margin-left: 5px;
}
.block-update-card .update-card-body h4 {
  color: #737373;
  font-weight: bold;
  font-size: 13px;
}
.block-update-card .update-card-body p {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Update Cards"
Bootstrap 3.2.0 Snippet by shahariaazam

Related: See More

Questions / Comments:

"Update Cards" Bootstrap 3.2.0 Snippet by shahariaazam

Related: See More

Questions / Comments:

"Update Cards"
Bootstrap 3.2.0 Snippet by shahariaazam