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

2

can we see your work? – aaronmallen Nov 03 '13 at 22:32

score 41 · Accepted Answer · edited Dec 02 '16 at 21:30

41

It's new in the Bootstrap 3.0.1 release, so make sure you have the latest (10/29)...

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
    <div class="center-block" style="width:200px;background-color:#ccc;">...</div>
</div>

edited Dec 02 '16 at 21:30

That1Guy

7,075
4
47
59

answered Nov 04 '13 at 00:48

Carol Skelly

351,302
90
710
624

forker · Answer 2 · 2014-09-10T21:42:01.447

19

It works far better this way (preserving responsiveness):

  <!-- somewhere deep start -->
  <div class="row">
    <div class="center-block col-md-4" style="float: none; background-color: grey">
      Hi there!
    </div>
  </div>
  <!-- somewhere deep end -->

http://www.bootply.com/0L5rBI2taZ

edited Sep 10 '14 at 21:42

answered Sep 10 '14 at 13:58

forker

2,609
4
23
24

1

works but give a horizontal scrollbar because of the row class. more info there https://www.dvdheiden.nl/2013/12/04/bootstrap-3-row-class-causes-horizontal-scrollbar/ – Bombinosh Sep 10 '14 at 20:17
You can use class `.center-block` in combination with `style="width:400px;max-width:100%;"` to preserve responsiveness. – Brainfeeder Jan 25 '17 at 09:09

score 11 · Answer 3 · answered Jul 24 '14 at 06:57

11

You have to use style="width:value" with center block class

answered Jul 24 '14 at 06:57

revolutionNET

355
2
9

score 3 · Answer 4 · answered Nov 03 '13 at 22:38

3

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

answered Nov 03 '13 at 22:38

aaronmallen

1,418
1
12
29

score 2 · Answer 5 · answered Jan 25 '17 at 09:11

2

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-*.

answered Jan 25 '17 at 09:11

Brainfeeder

2,604
2
19
37

score 1 · Answer 6 · answered Oct 21 '15 at 20:51

1

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.

answered Oct 21 '15 at 20:51

chowmean

152
1
9

score 1 · Answer 7 · answered Apr 03 '17 at 06:02

A few answers here seem incomplete. Here are several variations:

<style>
.box {
    height: 200px;
    width: 200px;
    border: 4px solid gray;
}
</style>    

<!-- This works: .container>.row>.center-block.box -->
<div class="container">
        <div class="row">
            <div class="center-block bg-primary box">This div is centered with .center-block</div>
        </div>
    </div>

<!-- This does not work -->    
<div class="container">
        <div class="row">
            <div class="center-block bg-primary box col-xs-4">This div is centered with .center-block</div>
        </div>
    </div>

<!-- This is the hybrid solution from other answers:
     .container>.row>.col-xs-6>.center-block.box
 -->   
<div class="container">
        <div class="row">
            <div class="col-xs-6 bg-info">
                <div class="center-block bg-primary box">This div is centered with .center-block</div>
            </div>
        </div>
    </div>

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.

Twitter Bootstrap 3: How to center a block

7 Answers7

Linked