Bootstrap v4 Primary Card with Header / Footer

This is an unfinished bootstrap view of v4 with header and footer in an primary card

by Wayne Humphrey

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css">
<script src="https://unpkg.com/[email protected]/dist/sweetalert2.all.js"></script>
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Hello, world!</title>
  </head>
  <body>

<div class="container">

  <div class="row">
    <div class="col">
      <div class="card">
        <!--CARD HEADER-->
        <h4 class="card-header bg-success text-white">Directories 
          <small class="float-sm-right" data-toggle="tooltip" data-placement="bottom" data-original-title="Add new plot location.">
          <span onclick="myFunction()">
     <i class="fas fa-plus"></i>
</span>
          </small>
        </h4>
        <!--CARD BODY-->
        <div class="card-body">
        <div id="plotDirList" class="list-group">
        
        <a href="#" class="list-group-item active">/Volume/plots/ (6 files, 6.00 GB)<small class="float-sm-right"><i class="fas fa-minus text-danger"></i></small>
        <div class="progress"><div id="pb-0" class="progress-bar progress-bar-success progress-bar-striped bg-success" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;"></div></div></a>
        
        <a href="#" class="list-group-item">/test1 (0 files, 0.00 MB)
        <div class="progress"></div></a>
        
        <a href="#" class="list-group-item">/test2 (0 files, 0.00 MB)
        <div class="progress"></div></a>
        
        </div>
        </div>
      </div>
    </div>
 ...

CSS

body {
  font-family: 'Open Sans', sans-serif;
}
p {
  line-height: 25px; margin: 30px auto;
  font-size: 17px; font-weight: 300;
  color: #848d94;
  
}
button {
  background-color: #3085d6; color: #fff;
  border: 0; box-shadow: none; border-radius: 3px;
  font-size: 17px; font-weight: 500;
  padding: 15px 35px; margin: 26px 5px 0;
  cursor: pointer;
  white-space: nowrap;
}

JavaScript

$(
function () {
  $('[data-toggle="tooltip"]').tooltip()
}
)

$('button').on('click', () => {
    swal({
      title: '<i>HTML</i> <u>example</u>',
      type: 'info',
      html:
        'You can use <b>bold text</b>, ' +
        '<a href="//github.com">links</a> ' +
        'and other HTML tags',
      showCloseButton: true,
      showCancelButton: true,
      confirmButtonText:
        '<i class="fa fa-thumbs-up"></i> Great!',
      cancelButtonText:
        '<i class="fa fa-thumbs-down"></i>'
		})
})