JSFiddle - React, Tailwind, and code Playground

by Shree Khanal

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">


<div class="row container-fluid">
  <div class="text-center  row centered">
    <div class="col-sm-4" id="ph-container"> Col 1</div>
    <div class="col-sm-4" id="do-container"> Col 2</div>
    <div class="col-sm-4" id="water-temperature-container"> Col 3</div>
  </div>
</div>

CSS

.centered {
    text-align: center;
    font-size: 0;
}
.centered > div {
    float: none;
    display: inline-block;
    text-align: left;
    font-size: 13px;
}


/* Extra: Just to see columns...*/
.row {
    border: 1px solid black;
}

.row > div {
    padding: 15px;
    border: 1px solid red;
}