JSFiddle - React, Tailwind, and code Playground

by Chuan Shao

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<div class="container">
<div class="block row"></div>
<div class="clearfix row row2">
  <div class="col-sm-6 col"><div class="block"></div></div>
  <div class="col-sm-6 col"><div class="block"></div></div>
</div>
<div class="block row"></div>
<div class="clearfix row row4">
  <div class="col-sm-4 col"><div class="block"></div></div>
  <div class="col-sm-4 col"><div class="block"></div></div>
  <div class="col-sm-4 col"><div class="block"></div></div>
</div>
</div>

CSS

.block {
  background: blue;
  height: 30px;
}
.row {
  margin-bottom: 20px;
}
.row .col:first-child {
  padding-left: 0;
}
.row .col:last-child {
  padding-right: 0;
}
.row4 .col {
  padding: 0 30px;
}