CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
parliament
parliament

Reputation: 22934

center multiple bootstrap columns when less than 12 col

<div class="row">
    <div ng-repeat="tile in tiles" class="col-md-3"></div>
</div>

How can I make sure that these bootstrap columns are always centered, even if there is only 2 of them?

Upvotes: 9

Views: 7475

Answers (2)

Bassem Shahin
Bassem Shahin

Reputation: 706

Starting from bootstrap 4

this feature added!

you can use this class: justify-content-center

so your code should looks like:

<div class="container">
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

Check bootstrap documentation: https://getbootstrap.com/docs/4.0/layout/grid/#horizontal-alignment

Upvotes: 12

m4n0
m4n0

Reputation: 32285

Add row-center class to the row and col-center to col-md-3 in this way:

<div class="row row-center">
  <div ng-repeat="tile in tiles" class="col-md-3 col-center"></div>
</div>

.row-center {
  text-align:center;
}

.col-center {
  display:inline-block;
  float:none;
}

Bootply Demo

Upvotes: 17

Related Questions