JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<html>
  <head>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap.no-icons.min.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <div class="row">
       <div class="span8 background">
         <div class="btn-group btn-block" id="colours">
<span class="btn"><input type='checkbox' name='size' value='red'/>red</span>
<span class="btn"><input type='checkbox' name='size' value='orange'/>orange</span>
<span class="btn"><input type='checkbox' name='size' value='yellow'/>yellow</span>
<span class="btn"><input type='checkbox' name='size' value='green'/>green</span>
<span class="btn"><input type='checkbox' name='size' value='blue'/>blue</span>
</div> <!-- /btn-group -->
      </div>
      </div>
    </div>
  </body>
</html>

CSS

.background { 
   background-color: black; 
}
#colours { 
  width: 100%;
  /* What styles to use to cover up all the black background? */
}
input[type="checkbox"] { 
  display: none;
}

.btn-group.btn-block {
    display: flex;
}
.btn-group.btn-block > .btn {
    flex: 1;
}