JSFiddle - React, Tailwind, and code Playground

by Steffi

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<div class="container-fluid">
    <div class="row centered">
        <div class="col-sm-4 col-md-4">
            Col 1
        </div>
        <div class="col-sm-4 col-md-4">
            Col 2
        </div>
        <div class="col-sm-4 col-md-4">
            Col 3
        </div>
    </div>
</div>

<div class="container-fluid">
    <div class="row centered">
        <div class="col-sm-6 col-md-6">
            Col 1
        </div>
    </div>
</div>

<div class="container-fluid">
    <div class="row centered">
        <div class="col-sm-2 col-md-2">
            Col 1
        </div>
        <div class="col-sm-2 col-md-2">
            Col 2
        </div>
        <div class="col-sm-4 col-md-4">
            Col 3
        </div>
        <div class="col-sm-2 col-md-2">
            Col 4
        </div>
        <div class="col-sm-2 col-md-2">
            Col 5
        </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;
}

JavaScript

/* 

My approach to center columns is to use 'display: inline-block' for columns and 'text-align: center' for container parent.

You just have to add the CSS class 'centered' to the 'row'.

http://www.steffirakotozafy.com

*/