JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container">
    <div class="row row-centered">
        <h2>Center Kolom Di Bootstrap</h2>
        <div class="col-md-3 col-centered">
            <div class="item">
                <div class="content">
                    <p>Paragraf Kolom 1</p>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-centered">
            <div class="item">
                <div class="content">
                    <p>Paragraf Kolom 2</p>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

/* centered columns styles */
.row-centered {
    text-align:center;
}

.col-centered {
    display:inline-block;
    float:none;
    /* reset the text-align */
    text-align:left;
    /* inline-block space fix */
    margin-right:-4px;
}

.item {
    background-color: #09F;
    border: 1px solid #333;
    width: 100%;
    height: 100%;
    padding: 20px;
}

.content {
    background-color: #FFF;
    padding: 10px;
    border: 1px solid #333;
}