Center Contents of Bootstrap row container

Question

I have the code below and I d like to center the  well  elements of the outer  row  div   I ve tried various approaches such as text-align  center  which just centers the text and not the inner DIV elements     Here is a jsfiddle   The idea is that I get a page of  well  tiles and that after 4 or so it wraps   But if it is less than 4  they should appear centered on the page    lt body class  container-fluid  gt       lt div class  row  gt           lt div class  well span2  gt               lt div class  row  gt                   lt div class  span2  gt                      Header                  lt  div gt               lt  div gt               lt div class  row  gt                   lt div class  span2  gt                      Sub Header                  lt  div gt               lt  div gt            lt  div gt            lt div class  well span2  gt               lt div class  row  gt                   lt div class  span2  gt                      Header                  lt  div gt               lt  div gt               lt div class  row  gt                   lt div class  span2  gt                      Sub Header                  lt  div gt               lt  div gt           lt  div gt       lt  div gt   lt  body gt

User · Answer

For Bootstrap 4  use the below code    lt div class  mx-auto  style  width  200px   gt    Centered element  lt  div gt    Ref  https   getbootstrap com docs 4 0 utilities spacing  horizontal-centering

User · Answer

Try this  it works    lt div class  row  gt       lt div class  center  gt           lt div class  col-xs-12 col-sm-4  gt               lt p gt hi 1  lt  p gt           lt  div gt           lt div class  col-xs-12 col-sm-4  gt               lt p gt hi 2  lt  p gt           lt  div gt           lt div class  col-xs-12 col-sm-4  gt               lt p gt hi 3  lt  p gt           lt  div gt       lt  div gt   lt  div gt    Then  in css define the width of center div and center in a document    center       margin  0 auto      width  80

User · Answer

With Bootstrap 4  there is a css class specifically for this  The below will center row content    lt div class  row justify-content-center  gt       inner divs and content     lt  div gt    See  https   v4-alpha getbootstrap com layout grid  horizontal-alignment  for more information

User · Answer

I solved this by doing the following    lt body class  container-fluid  gt       lt div class  row  gt           lt div class  span6  style  float  none  margin  0 auto   gt                           lt  div gt       lt  div gt   lt  body gt

[twitter-bootstrap] Center Contents of Bootstrap row container

Examples related to twitter-bootstrap

Examples related to center