Twitter Bootstrap 3 How to center a block

Question

It seems to me that the class center-block is missing from the bootstrap 3 style sheets   Am I missing something   Its usage is described here  http   getbootstrap com css  helper-classes-center

User · Answer

center-block can be found in bootstrap 3 0 in utilities less on line 12 and mixins less on line 39

User · Answer

You can use class  center-block in combination with style  width 400px max-width 100    to preserve responsiveness   Using  col-md-  class with  center-block will not work because of the float on  col-md-

User · Answer

center-block is bad idea as it covers a portion on your screen and you cannot click on your fields or buttons  col-md-offset-  is better option   Use col-md-offset-3  is better option if class is col-sm-6  Just change the number to center your block

User · Answer

It s new in the Bootstrap 3 0 1 release  so make sure you have the latest  10 29       Demo  http   bootply com 91632   x000D   x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  rel  stylesheet   gt  x000D   lt div class  row  gt  x000D       lt div class  center-block  style  width 200px background-color  ccc   gt     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

You have to use style  width value  with center block class

User · Answer

A few answers here seem incomplete  Here are several variations    lt style gt   box       height  200px      width  200px      border  4px solid gray     lt  style gt        lt  -- This works   container gt  row gt  center-block box -- gt   lt div class  container  gt           lt div class  row  gt               lt div class  center-block bg-primary box  gt This div is centered with  center-block lt  div gt           lt  div gt       lt  div gt    lt  -- This does not work -- gt       lt div class  container  gt           lt div class  row  gt               lt div class  center-block bg-primary box col-xs-4  gt This div is centered with  center-block lt  div gt           lt  div gt       lt  div gt    lt  -- This is the hybrid solution from other answers        container gt  row gt  col-xs-6 gt  center-block box  -- gt      lt div class  container  gt           lt div class  row  gt               lt div class  col-xs-6 bg-info  gt                   lt div class  center-block bg-primary box  gt This div is centered with  center-block lt  div gt               lt  div gt           lt  div gt       lt  div gt    To make it work with col-  classes  you need to wrap the  center-block inside a  col-  class  but remember to either add another class that sets the width   box in this case   or to alter the  center-block itself by giving it a width   Check it out on bootply

User · Answer

It works far better this way  preserving responsiveness       lt  -- somewhere deep start -- gt     lt div class  row  gt       lt div class  center-block col-md-4  style  float  none  background-color  grey  gt        Hi there       lt  div gt     lt  div gt     lt  -- somewhere deep end -- gt    http   www bootply com 0L5rBI2taZ

[twitter-bootstrap-3] Twitter Bootstrap 3: How to center a block

Examples related to twitter-bootstrap-3