.btn{display:inline-block;padding:.5rem 1rem;border:1px solid transparent;border-radius:4px;font-size:1rem;text-align:center;text-decoration:none;transition:all .2s ease;cursor:pointer}.btn:hover{opacity:.8}.btn:disabled,.btn[disabled]{opacity:.6;cursor:not-allowed!important}.btn:disabled:hover,.btn[disabled]:hover{opacity:.6}.btn-large{padding:.75rem 1.5rem;font-size:1.25rem}.btn-small{padding:.25rem .5rem;font-size:.875rem}.btn-success{background-color:#28a745;border-color:#28a745;color:#fff}.btn-danger{background-color:#dc3545;border-color:#dc3545;color:#fff}.btn-warning{background-color:#ffc107;border-color:#ffc107;color:#212529}.btn-info{background-color:#17a2b8;border-color:#17a2b8;color:#fff}.btn-default{background-color:#6c757d;border-color:#6c757d;color:#fff}
.btn-wrapper {
    display: flex;
    justify-content: center; /* default to center alignment */
    padding: 20px 0;
    border-top: 1px solid transparent; /* default to no border */
  }
  
  .btn-wrapper-left {
    justify-content: flex-start;
  }
  
  .btn-wrapper-right {
    justify-content: flex-end;
  }
  
  .btn-wrapper-line {
    border-color: #ddd; /* enable border */
  }
  
  .btn-wrapper .btn:not(:last-child) {
    margin-right: 20px;
  }
 
  /* Centered buttons with a border line:
  <div class="btn-wrapper btn-wrapper-line">
  <button class="btn btn-success">Okay</button>
  <button class="btn btn-danger close-modal">Cancel</button>
</div>
*/

/* Left-aligned buttons without a border line
<div class="btn-wrapper btn-wrapper-left">
  <button class="btn btn-success">Okay</button>
  <button class="btn btn-danger close-modal">Cancel</button>
</div>*/

/* Right-aligned buttons with a border line
<div class="btn-wrapper btn-wrapper-right btn-wrapper-line">
  <button class="btn btn-success">Okay</button>
  <button class="btn btn-danger close-modal">Cancel</button>
</div>
*/