8 bootstrap tips: Tip 1-1

Tip 1, option 1: Center-block

by Rafael Ramos

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container-fluid text-center font0">
  <div class="col-xs-4 fl-no dis-ib font14">
    Column 4, float none, display inline block
  </div>
  <div class="col-xs-4 fl-no dis-ib font14">
    Column 4, float none, display inline block
  </div>
  <div class="col-xs-4 fl-no dis-ib font14">
    Column 4, float none, display inline block
  </div>
  <div class="col-xs-4 fl-no dis-ib font14">
    Column 4, float none, display inline block
  </div>
</div>

CSS

.fl-no { float: none; }
.dis-ib { display: inline-block; }

/* Hack to fix the 12 columns issue */
.font0 { font-size: 0; }
.font14 { font-size: 14px; }

/* This styles are just to make it look nice, but not necessary */
.container-fluid {background-color: #eee;border: 1px solid #e1e1e8;border-radius: 5px;padding: 5px;}
.col-xs-4 {background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);border-radius: 5px;padding: 5px;}