Colored columns - Custom

by Hugo Carneiro

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container-fluid">
  <!-- Duplicate rows -->
  <div class="row fl-height">
    <!-- Use how many columns you want, but the total must be 100% -->
    <div class="fl-col-10 fl-cyan">
      10%
    </div>
    <div class="fl-col-30 fl-magenta">
      30%
    </div>
    <div class="fl-col-40 fl-yellow">
      40%
    </div>
    <div class="fl-col-20 fl-green">
      20%
    </div>
  </div>
  <div class="row fl-height">
    <div class="fl-col-30 fl-yellow">
      30%
    </div>
    <div class="fl-col-10 fl-cyan">
      10%
    </div>
    <div class="fl-col-50 fl-green">
      50%
    </div>
    <div class="fl-col-10 fl-magenta">
      10%
    </div>
  </div>
  <div class="row fl-height">
    <div class="fl-col-10 fl-cyan">
      10%
    </div>
    <div class="fl-col-30 fl-magenta">
      30%
    </div>
    <div class="fl-col-40 fl-yellow">
      40%
    </div>
    <div class="fl-col-20 fl-green">
      20%
    </div>
  </div>
</div>

CSS

/* Sets the height of columns - change to what you want */
.fl-height [class*="fl-col-"] {
  height: 60px;
}

[class*="fl-col-"] {
  float: left;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 10px;
  overflow: hidden;
}

/* Columns sizes */
/* If a new custom size is needed, just needs to be added to the CSS*/
/* E.g.: .fl-col-25 { width: 25% } */
/* Columns in a .row must accrue a total of 100% width */

.fl-col-10 {
  width: 10%;
}

.fl-col-20 {
  width: 20%;
}

.fl-col-30 {
  width: 30%;
}

.fl-col-40 {
  width: 40%;
}

.fl-col-50 {
  width: 50%;
}

.fl-col-60 {
  width: 60%;
}

.fl-col-60 {
  width: 60%;
}

.fl-col-70 {
  width: 70%;
}

.fl-col-80 {
  width: 80%;
}

.fl-col-90 {
  width: 90%;
}

.fl-col-100 {
  width: 100%;
}

/* Colours */
/* This can also be done directly in the element with
style="background-color: #000;"
*/
/* Change the colours and classes names as you like, don't forget to find them in the elements in the HTML and change them too */

.fl-cyan {
  background-color: #00abd1;
  color: #fff;
}

.fl-magenta {
  background-color: #d10038;
  color: #fff;
}

.fl-yellow {
  background-color: #ecd309;
  color: #333;
}

.fl-green {
  background-color: #64b448;
  color: #fff;
}