<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"> <div class="row"> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="card"> <div class="card-header"><strong class="card-title">Variants</strong></div> <div class="card-body"> <div class="col-12"> <ul class="list-group"> <li class="list-group-item p-0 collapsed"> <div class="d-flex"> <a class="btn btn-link" data-toggle="collapse" href="#collapseExample10" role="button" aria-expanded="false" aria-controls="collapseExample1">Varian 02</a> <div class="ml-auto my-1 mr-1"> <span class="price">12000</span> <button class="btn btn-outline"><i class="fa fa-pencil"></i></button> <button class="btn btn-outline"><i class="fa fa-trash text-danger"></i></button> </div> </div> <div class="collapse" id="collapseExample10" style=""> <div class="card card-body mt-2"> <table> <tr> <td>Code</td> <td>V02</td> </tr> <tr> <td>Description</td> <td>A description</td> </tr> <tr> <td>Default</td> <td><i class="fa fa-check"></i></td> </tr> <tr> <td>Use Stock</td> <td><i class="fa fa-check"></i></td> </tr> <tr> <td>Use Recipe</td> <td><i class="fa fa-times"></i></td> </tr> </table> </div> </div> </li> <li class="list-group-item p-0"> <div class="d-flex"> <a class="btn btn-link collapsed" data-toggle="collapse" href="#collapseExample11" role="button" aria-expanded="false" aria-controls="collapseExample1">Varian 03 is another variant</a> <div class="ml-auto my-1 mr-1"> <span class="price">341000</span> <button class="btn btn-outline"><i class="fa fa-pencil"></i></button> <button class="btn btn-outline"><i class="fa fa-trash text-danger"></i></button> </div> </div> <div class="collapse" id="collapseExample11" style=""> <div class="card card-body mt-2"> <table> <tr> <td>Code</td> <td>Variant 03</td> </tr> <tr> <td>Description</td> <td>just it</td> </tr> <tr> <td>Default</td> <td><i class="fa fa-times"></i></td> </tr> <tr> <td>Use Stock</td> <td><i class="fa fa-check"></i></td> </tr> <tr> <td>Use Recipe</td> <td><i class="fa fa-times"></i></td> </tr> </table> </div> </div> </li> <li class="list-group-item p-0"> <div class="d-flex"> <a class="btn btn-link collapsed" data-toggle="collapse" href="#collapseExample12" role="button" aria-expanded="false" aria-controls="collapseExample1">Yet Another Varian</a> <div class="ml-auto my-1 mr-1"> <span class="price">121212</span> <button class="btn btn-outline"><i class="fa fa-pencil"></i></button> <button class="btn btn-outline"><i class="fa fa-trash text-danger"></i></button> </div> </div> <div class="collapse" id="collapseExample12"> <div class="card card-body mt-2"> <table> <tr> <td>Code</td> <td>v34</td> </tr> <tr> <td>Description</td> <td>afrvrefr rre</td> </tr> <tr> <td>Default</td> <td><i class="fa fa-times"></i></td> </tr> <tr> <td>Use Stock</td> <td><i class="fa fa-check"></i></td> </tr> <tr> <td>Use Recipe</td> <td><i class="fa fa-times"></i></td> </tr> </table> </div> </div> </li> </ul> </div> <div class="col-12 mt-2 text-right"> <button type="button" class="btn btn-default">Add Varian</button> </div> </div> </div> </div> </div>

.row { background: #f8f9fa; margin-top: 20px; } .col { border: solid 1px #6c757d; padding: 10px; } .list-group .card { border: 0; border-top: 1px solid #ddd; border-radius: 0; }