Bootstrap 4 Template

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

by Manju06

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 class="main">
    <li id='newUploadBox' style='cursor: pointer;' onclick="addNewUpload()">
      <a >
        <i id='newUploadIcon'  class="addButton fa fa-plus-circle" aria-hidden="true"></i>
        Add Upload
      </a>
    </li>
    <li style='cursor: pointer;' class='pull-right mx-auto my-auto'>
    <a id='queue'>Render Queue</a></li>
  </ul>

CSS

.main{

  display:flex;
  justify-content:space-around;
border:1px solid blue;
 
}
.main li {
  border:1px solid teal;
 height:80px;
padding:10px;
 margin-left: auto;
}
/* new upload navbar */
#newUploadBox{
 
  color: white;
  text-align: center;

  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);
 
  font-size: 2rem; 
  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 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%;
}

JavaScript

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