html - Keep div always center horizontally no matter the quantity -

html - Keep div always center horizontally no matter the quantity -

im trying define clean css+html way maintain divs center no matter how many, there one, 3 or 4. got:

<div class="row"> <div class="col-xs-3" style="background-color: red;"> -1- </div> <div class="col-xs-3" style="background-color: blue;"> -2- </div> <div class="col-xs-3" style="background-color: green;"> -3- </div> <div class="col-xs-3" style="background-color: yellow;"> -4- </div> </div> <div class="row"> <div class="col-xs-3" style="background-color: red;"> -1- </div> </div> <div class="row"> <div class="col-xs-3" style="background-color: red;"> -1- </div> <div class="col-xs-3" style="background-color: blue;"> -2- </div> <div class="col-xs-3" style="background-color: green;"> -3- </div> </div>

you can play here: http://www.bootply.com/iskvwiffjr

as can see divs left, there way maintain them center no matter number, maybe wrapper prepare on row div?

add classes row , col create centered. mentioned on site: center divs bootstrap 3

.row-centered { text-align:center; } .col-centered { display:inline-block; float:none; /* reset text-align */ text-align:left; /* inline-block space prepare */ margin-right:-4px; } <div class="row row-centered"> <div class="col-xs-3 col-centered" style="background-color: red;"> -1- </div> </div>

html css twitter-bootstrap