<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<br />
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
<div class="container">
<div class="row">
<div class="col-sm-6" >
<div class="row">
<div class="col-sm-4">
<div class="widget well well-sm">
<div class="icon">
<button type="button" class="btn btn-default btn-icon"><i class="fa fa-credit-card"></i></button>
</div>
<div class="text">
<span>Charge 3.5%</span>
<label class="text-muted">Orders Over $85.00</label>
</div>
<div class="options">
<a href="javascript:;" class="btn btn-primary">Select</a>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="widget well well-sm">
<div class="icon">
<button type="button" class="btn btn-default btn-icon"><i class="fa fa-credit-card"></i></button>
</div>
<div class="text">
<span>Charge $3.00</span>
<label class="text-muted">Orders Under $85.00</label>
</div>
<div class="options">
<a href="javascript:;" class="btn btn-primary">Select</a>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="widget well well-sm">
<div class="icon">
<button type="button" class="btn btn-default btn-icon"><i class="fa fa-money"></i></button>
</div>
<div class="text">
<span>Charge $.00</span>
<label class="text-muted">Cash Orders</label>
</div>
<div class="options">
<a href="javascript:;" class="btn btn-primary">Submit</a>
</div>
</div>
</div>
</div>
</div>
</div>
.widget { text-align: center; }
.widget span { font-size: 16px; display: block; height: 32px; line-height: 32px; }
.widget label { font-size: 12px; }
.widget .options { margin-top: 5px; }
.widget {border: 1px solid rgba(119, 119, 119, .5); background-color: rgb(245,245,245); padding: 11px; border-radius: 6px; cursor: pointer; position: relative; margin-bottom: 10px; margin-left: 10px; margin-right: 10x;}
.widget:hover,
.widget:focus,
.widget:active,
.widget.active
{
border: 1px solid rgb(50, 118, 177);
background-color: rgba(217, 237, 247,.3);
-webkit-transition: all 0.75s;
-moz-transition: all 0.75s;
transition: all 0.75s;
}
.btn-default
{
color: rgba(119, 119, 119, .7);
background-color: rgb(255, 255, 255);
border: 1px solid rgba(119, 119, 119, .5);
}
.btn-icon
{
width: 70px;
height: 70px;
border-radius: 35px;
padding: 10px 16px;
font-size: 36px;
}
.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active
{
color: rgba(119, 119, 119, .9);
background-color: rgb(255, 255, 255);
}
.widget:hover button.btn,
.widget:hover button.btn-icon
{
border: 1px solid rgb(50, 118, 177);
-webkit-transition: all 0.75s;
-moz-transition: all 0.75s;
transition: all 0.75s;
}
