<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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-fluid"> <div class="row"> <div class="col-lg-8 col-md-4 col-sm-6 col-xs-12"> <div class="tile"> <div class="wrapper"> <div class="header">Real Account</div> <table class="table table-hover"> <thead> <tr> <th scope="col" colspan="2">Acc. Number</th> <th scope="col" >Type</th> <th scope="col" >Minimum</th> <th scope="col" >Balance</th> </tr> </thead> <tbody> <tr> <th scope="row"colspan="2">1947-id-num</th> <td>CENT (SILVER)</td> <td>10 USD </td> <td> 0 USD <button type="button" class="btn btn-primary btn-sm">DEPOSITE</button> </td> </tr> <tr> <th scope="row"colspan="2">1947-id-num</th> <td>STANDRD (GOLD)</td> <td>100 USD </td> <td> 0 USD <button type="button" class="btn btn-primary btn-sm">DEPOSITE</button> </td> </tr> <tr> <th scope="row"colspan="2">1947-id-num</th> <td>PRO ( DIMAND)</td> <td>500 USD </td> <td> 0 USD <button type="button" class="btn btn-primary btn-sm">DEPOSITE</button> </td> </tr> <tr> <th scope="row"colspan="2">1947-id-num</th> <td>ECN ( PLATINUME)</td> <td>1000 USD </td> <td> 0 USD <button type="button" class="btn btn-primary btn-sm">DEPOSITE</button> </td> </tr> </tbody> </table> </div> </div> </div> <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12"> <div class="tile"> <div class="wrapper"> <div class="header">DEMO Account</div> <table class="table table-hover"> <thead> <tr> <th scope="col" colspan="2">Acc. Nummber</th> <th> Type </th> <th scope="col" >BALNCE</th> </tr> </thead> <tbody> <tr> <th scope="row"colspan="2">1947-id-num</th> <td>CENT (SILVER)</td> <td> 0 USD <button type="button" class="btn btn-primary btn-sm">DEPOSITE</button> </td> </tr> <tr> <th scope="row"colspan="2">1947-id-num</th> <td>STANDRD (GOLD)</td> <td> 0 USD <button type="button" class="btn btn-primary btn-sm">DEPOSITE</button> </td> </tr> <tr> <th scope="row"colspan="2">1947-id-num</th> <td>PRO ( DIMAND)</td> <td> 0 USD <button type="button" class="btn btn-primary btn-sm">DEPOSITE</button> </td> </tr> <tr> <th scope="row"colspan="2">1947-id-num</th> <td>ECN ( PLATINUME)</td> <td> 0 USD <button type="button" class="btn btn-primary btn-sm">DEPOSITE</button> </td> </tr> </tbody> </table> </div> </div> </div> </div>

/* Reset & General ---------------------------------------------------------------------- */ * { margin: 0px; padding: 0px; } body { background: #ecf1f5; font:18px "Open Sans", sans-serif; } .tile{ width: 100%; background:#fff; border-radius:50px; box-shadow:5px 2px 3px -1px rgba(151, 171, 187, 0.7); float:left; transform-style: preserve-3d; margin: 10px 10px; } .header{ border-bottom:1px solid #ebeff2; padding:19px 0; text-align:center; color:#59687f; font-size:600; font-size:35px; position:relative; }