<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="card">
<div class="card-header">
<div class="card-title">
<h2>Whiteframes</h2></div>
<hr>
</div>
<div class="card-body">
<div class="card shadow-shade1">
<div class="card-body">
<h3>Card works as row with bottom margin</h3>
<h4>card body comes with padding and it is right after card header</h4>
<p>You again create a card which just has a border and bottom-margin. </p>
</div>
</div>
<div class="card shadow-shade2">
<div class="card-body">
<h3>Card works as row with bottom margin</h3>
<h4>card body comes with padding and it is right after card header</h4>
<p>You again create a card which just has a border and bottom-margin. </p>
</div>
</div>
<div class="card shadow-shade3">
<div class="card-body">
<h3>Card works as row with bottom margin</h3>
<h4>card body comes with padding and it is right after card header</h4>
<p>You again create a card which just has a border and bottom-margin. </p>
</div>
</div>
<div class="card shadow-shade4">
<div class="card-body">
<h3>Card works as row with bottom margin</h3>
<h4>card body comes with padding and it is right after card header</h4>
<p>You again create a card which just has a border and bottom-margin. </p>
</div>
</div>
<div class="card shadow-shade5">
<div class="card-body">
<h3>Card works as row with bottom margin</h3>
<h4>card body comes with padding and it is right after card header</h4>
<p>You again create a card which just has a border and bottom-margin. </p>
</div>
</div>
</div>
</div>
</div>
body {background:#e2e2e2;}
hr {border:0.5px solid #dd0;}
/********card frame **************/
.card {
position: relative;
border-radius: 3px;
background-color: #fff;
color: #4f5256;
border: 1px solid #f2f2f2;
margin-bottom: 16px;
background:#fff;
}
.card-header{ padding: 16px;margin:0px;}
.card-body {position: relative; padding: 16px;}
/************* SHADOW SHADES *********************/
.shadow-shade1 {
-webkit-box-shadow: 0 3px 1px -2px rgba(0,0,0,.14), 0 2px 2px 0 rgba(0,0,0,.098), 0 1px 5px 0 rgba(0,0,0,.014);
box-shadow: 0 3px 1px -2px rgba(0,0,0,.14), 0 2px 2px 0 rgba(0,0,0,.098), 0 1px 5px 0 rgba(0,0,0,.014);
}
.shadow-shade2 {
-webkit-box-shadow: 0 2px 4px -1px rgba(0,0,0,.14), 0 4px 5px 0 rgba(0,0,0,.098), 0 1px 10px 0 rgba(0,0,0,.014);
box-shadow: 0 2px 4px -1px rgba(0,0,0,.14), 0 4px 5px 0 rgba(0,0,0,.098), 0 1px 10px 0 rgba(0,0,0,.014);
}
.shadow-shade3 {
-webkit-box-shadow: 0 3px 5px -1px rgba(0,0,0,.14), 0 6px 10px 0 rgba(0,0,0,.098), 0 1px 18px 0 rgba(0,0,0,.014);
box-shadow: 0 3px 5px -1px rgba(0,0,0,.14), 0 6px 10px 0 rgba(0,0,0,.098), 0 1px 18px 0 rgba(0,0,0,.014);
}
.shadow-shade4 {
-webkit-box-shadow: 0 5px 5px -3px rgba(0,0,0,.14), 0 8px 10px 1px rgba(0,0,0,.098), 0 3px 14px 2px rgba(0,0,0,.014);
box-shadow: 0 5px 5px -3px rgba(0,0,0,.14), 0 8px 10px 1px rgba(0,0,0,.098), 0 3px 14px 2px rgba(0,0,0,.014);
}
.shadow-shade5 {
-webkit-box-shadow: 0 8px 10px -5px rgba(0,0,0,.14), 0 16px 24px 2px rgba(0,0,0,.098), 0 6px 30px 5px rgba(0,0,0,.014);
box-shadow: 0 8px 10px -5px rgba(0,0,0,.14), 0 16px 24px 2px rgba(0,0,0,.098), 0 6px 30px 5px rgba(0,0,0,.014);
}
