bootstrap 4

by Dug Sohn

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/5.1.3/cerulean/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">

<link rel="stylesheet" href="    https://cdn.jsdelivr.net/npm/[email protected]/dist/pretty-checkbox.min.css">


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>

<div class="container">

<h2>Availabilty
</h2>
<form>
<div class="row">
<div class="col-md-3">
Days:
</div>
<div class="col-md-9">
<div class="row">

<div class="col">

    <!-- primary -->
    <div class="card">
    <div class="pretty p-default">
        
        <input type="checkbox" />
        <div class="state p-primary">
            <label>SU</label>
        </div>
    </div>
</div>
</div>
<div class="col">
    <div class="card">

    <!-- success -->
    <div class="pretty p-default">
        <input type="checkbox" />
        <div class="state p-primary">
            <label>MO</label>
        </div>
        </div>
    </div>
</div>
<div class="col">
    <!-- info -->
    <div class="card">
    
    <div class="pretty p-default">
        <input type="checkbox" />
        <div class="state p-primary">
            <label>TU</label>
        </div>
        </div>
    </div>
</div>
<div class="col">
    <!-- warning -->
    <div...

SCSS

.card {
  text-align: center;
  border:0 !important;
}
.time .form-control {
  display: inline-block;
  width:25%;
  text-align:center
}