<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" id="tourpackages-carousel"> <div class="row"> <div class="col-lg-12"><h1>My Card <a class="btn icon-btn btn-primary pull-right" href="#"><span class="glyphicon btn-glyphicon glyphicon-plus img-circle"></span> Add New Card</a></h1></div> <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4"> <div class="thumbnail"> <div class="caption"> <div class='col-lg-12'> <span class="glyphicon glyphicon-credit-card"></span> <span class="glyphicon glyphicon-trash pull-right text-primary"></span> </div> <div class='col-lg-12 well well-add-card'> <h4>John Deo Mobilel</h4> </div> <div class='col-lg-12'> <p>4111xxxxxxxx3265</p> <p class"text-muted">Exp: 12-08</p> </div> <button type="button" class="btn btn-primary btn-xs btn-update btn-add-card">Update</button> <button type="button" class="btn btn-danger btn-xs btn-update btn-add-card">Vrify Now</button> <span class='glyphicon glyphicon-exclamation-sign text-danger pull-right icon-style'></span> </div> </div> </div> <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4"> <div class="thumbnail"> <div class="caption"> <div class='col-lg-12'> <span class="glyphicon glyphicon-credit-card"></span> <span class="glyphicon glyphicon-trash pull-right text-primary"></span> </div> <div class='col-lg-12 well well-add-card'> <h4>John Deo Mobilel</h4> </div> <div class='col-lg-12'> <p>4111xxxxxxxx3265</p> <p class"text-muted">Exp: 12-08</p> </div> <button type="button" class="btn btn-primary btn-xs btn-update btn-add-card">Update</button> </div> </div> </div> <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4"> <div class="thumbnail"> <div class="caption"> <div class='col-lg-12'> <span class="glyphicon glyphicon-credit-card"></span> <span class="glyphicon glyphicon-trash pull-right text-primary"></span> </div> <div class='col-lg-12 well well-add-card'> <h4>John Deo Mobilel</h4> </div> <div class='col-lg-12'> <p>4111xxxxxxxx3265</p> <p class"text-muted">Exp: 12-08</p> </div> <button type="button" class="btn btn-primary btn-xs btn-update btn-add-card">Update</button> </div> </div> </div> <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4"> <div class="thumbnail"> <div class="caption"> <div class='col-lg-12'> <span class="glyphicon glyphicon-credit-card"></span> <span class="glyphicon glyphicon-trash pull-right text-primary"></span> </div> <div class='col-lg-12 well well-add-card'> <h4>John Deo Mobilel</h4> </div> <div class='col-lg-12'> <p>4111xxxxxxxx3265</p> <p class"text-muted">Exp: 12-08</p> </div> <button type="button" class="btn btn-primary btn-xs btn-update btn-add-card">Update</button> </div> </div> </div> <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4"> <div class="thumbnail"> <div class="caption"> <div class='col-lg-12'> <span class="glyphicon glyphicon-credit-card"></span> <span class="glyphicon glyphicon-trash pull-right text-primary"></span> </div> <div class='col-lg-12 well well-add-card'> <h4>John Deo Mobilel</h4> </div> <div class='col-lg-12'> <p>4111xxxxxxxx3265</p> <p class"text-muted">Exp: 12-08</p> </div> <button type="button" class="btn btn-primary btn-xs btn-update btn-add-card">Update</button> <button type="button" class="btn btn-danger btn-xs btn-update btn-add-card">Vrify Now</button> <span class='glyphicon glyphicon-exclamation-sign text-danger pull-right icon-style'></span> </div> </div> </div> <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4"> <div class="thumbnail"> <div class="caption"> <div class='col-lg-12'> <span class="glyphicon glyphicon-credit-card"></span> <span class="glyphicon glyphicon-trash pull-right text-primary"></span> </div> <div class='col-lg-12 well well-add-card'> <h4>John Deo Mobilel</h4> </div> <div class='col-lg-12'> <p>4111xxxxxxxx3265</p> <p class"text-muted">Exp: 12-08</p> </div> <button type="button" class="btn btn-primary btn-xs btn-update btn-add-card">Update</button> </div> </div> </div> <div class="col-lg-12"><a href="#">View Deleted Cards</a></div> </div><!-- End row --> </div><!-- End container -->

.well { min-height: 20px; padding: 0px; margin-bottom: 20px; background-color: #D9D9D9; border: 1px solid #D9D9D9; border-radius: 0px; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.05); box-shadow: inset 0 1px 1px rgba(0,0,0,.05); padding-left: 15px; border:0px; } .thumbnail .caption { padding: 9px; color: #333; padding-left: 0px; padding-right: 0px; } .icon-style { margin-right:15px; font-size:18px; margin-top:20px; } p { margin:3px; } .well-add-card { margin-bottom:10px; } .btn-add-card { margin-top:20px; } .thumbnail { display: block; padding: 4px; margin-bottom: 20px; line-height: 1.42857143; background-color: #fff; border: 6px solid #D9D9D9; border-radius: 15px; -webkit-transition: border .2s ease-in-out; -o-transition: border .2s ease-in-out; transition: border .2s ease-in-out; padding-left: 0px; padding-right: 0px; } .btn { border-radius:0px; } .btn-update { margin-left:15px;