JSFiddle - React, Tailwind, and code Playground

by Valentin Delbeke

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="tab-content">            
<form method="GET" action="" class="row seven-cols">
   <div class="col-xs-1">
      <div class="form-group">1</div>
   </div>
   <div class="col-xs-1">
      <div class="form-group">2</div>
   </div>
   <div class="col-xs-1">
      <div class="form-group">3</div>
   </div>
   <div class="col-xs-1">
      <div class="form-group">4</div>
   </div>
   <div class="col-xs-1">
      <div class="form-group">5</div>
   </div>
   <div class="col-xs-1">
      <div class="form-group">6</div>
   </div>
   <div class="col-xs-1">
      <div class="form-group">7</div>
   </div>
   <div class="clearfix"></div>
   </form>
</div>

CSS

.seven-cols .col-xs-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-md-1,
  .seven-cols .col-lg-1 {
    width: 14.285714285714285714285714285714%;
    *width: 14.285714285714285714285714285714%;
  }
  
  div.form-group{
    border: 1px solid #000;
  }