Bootstrap 4 Template

This is a simple Twitter Bootstrap 4 template. To check BS4 and Bootstrap-table compatibility.

by GopsAB

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<head>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
  <ul>
    <li style='cursor: pointer;' onclick="addNewUpload()">
      <a id='newUploadBox'>
        <i id='newUploadIcon'  class="addButton fa fa-plus-circle" aria-hidden="true"></i>
        Add Upload
      </a>
    </li>
    <li style='cursor: pointer; display: inline;' class='pull-right mx-auto my-auto'><a id='queue'>Render Queue</a></li>
  </ul>

CSS

/* new upload navbar */
#newUploadBox{
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  background-color: rgb(48, 187, 102);
  display: flex;             /* establish flex container */
  align-items: center;       /* center ul container vertically */
  justify-content: center;   /* center ul container horizontally (optional) */
}
#newUploadBox:hover {
  background-color:rgb(56, 107, 76);
 
}
#newUploadIcon{
  color:rgb(14, 80, 36);
  display: block;
  margin:auto; 
  font-size: 1.4rem; 
  margin-right:10px;
  cursor: pointer;
}

/* queue navbar */
#queue{
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  background-color: rgb(159, 201, 255);
}


/* navbar */
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/*
li a:hover:not(.active) {
  background-color: #111;
}
*/


/* expand/collapse js */
.expandable .fa {
      transition: .3s transform ease-in-out;
    }
.expandable .collapsed .rotate.fa{
      transform: rotate(180deg);
}
/* footer style */
#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}