How can I center elements horizontally or vertically with Twitter Bootstrap?

Question

Is there any way to center html elements vertically or horizontally inside the main parents?

score 259 · Accepted Answer · edited Dec 16 '21 at 16:39

259

Update: while this answer was likely correct back in early 2013, it should not be used anymore. The proper solution uses offsets, like so:

class="mx-auto"

As for other users suggestion there are also native bootstrap classes available like:

class="text-center"
class="pagination-centered"

edited Dec 16 '21 at 16:39

TylerH

20,799
66
75
101

answered Feb 01 '13 at 09:09

itsme

48,972
96
224
345

3

Using `text-center` for layout is very bad practice. The proper way to align columns in Bootstrap is by using `col-XX-offset-Y` classes. http://getbootstrap.com/css/#grid-offsetting. This answer was likely right in 2013 but should not be used anymore today. – Niels Keurentjes Oct 12 '16 at 21:44

score 78 · Answer 2 · edited Oct 07 '14 at 03:23

78

From the Bootstrap documentation:

Set an element to display: block and center via margin. Available as a mixin and class.

<div class="center-block">...</div>

edited Oct 07 '14 at 03:23

Dan Dascalescu

143,271
52
317
404

answered Apr 22 '14 at 21:47

m0000g

913
6
6

score 56 · Answer 3 · edited Dec 16 '21 at 16:56

If you are trying to center an image in a div, but the image won't center, this could describe your problem:

JSFiddle Demo of the problem

<div class="col-sm-4 text-center">
    <img class="img-responsive text-center" src="myPic.jpg" />
</div>

The img-responsive class adds a display:block instruction to the image tag, which stops text-align:center (text-center class) from working.

SOLUTION:

<div class="col-sm-4">
    <img class="img-responsive center-block" src="myPic.jpg" />
</div>

JSFiddle demo of solution

Adding the center-block class overrides the display:block instruction put in by using the img-responsive class. Without the img-responsive class, the image would center just by adding text-center class

Also, you should know the basics of flexbox and how to use it, since Bootstrap 4 now uses it natively.

Here is an excellent, fast-paced video tutorial by Brad Schiff

Here is a great cheat sheet

score 37 · Answer 4 · edited Dec 16 '21 at 16:57

In Bootstrap 4, the centering methods have changed.

Horizontal Center in Bootstrap 4

text-center is still used for display:inline elements
mx-auto replaces center-block to center display:flex children
offset-* or mx-auto can be used to center grid columns

mx-auto (auto x-axis margins) will center display:block or display:flex elements that have a defined width, (%, vw, px, etc..). Flexbox is used by default on grid columns, so there are also various flexbox centering methods.

Demo Bootstrap 4 Horizontal Centering

For vertical centering in BS4 see https://stackoverflow.com/a/41464397

score 31 · Answer 5 · edited Dec 16 '21 at 16:57

31

You may directly write into your CSS file like this:

.content {
  position: absolute;
  top: 50%;
  left:50%;
  transform: translate(-50%,-50%);
  }

<div class = "content" >
  
   <p> some text </p>
  </div>

edited Dec 16 '21 at 16:57

TylerH

20,799
66
75
101

answered Mar 22 '16 at 11:19

Kanat

616
1
9
24

1

This seems to ignore the fact that this is a Bootstrap question, so interested users will almost certainly have other Bootstrap-specific classes which cause this not to work. – TylerH Dec 16 '21 at 16:57

score 9 · Answer 6 · edited Jan 03 '14 at 00:38

9

i use this

<style>
    html, body {
        height: 100%;
        margin: 0;
        padding: 0 0;
    }

    .container-fluid {
        height: 100%;
        display: table;
        width: 100%;
        padding-right: 0;
        padding-left: 0;
    }

    .row-fluid {
        height: 100%;
        display: table-cell;
        vertical-align: middle;
        width: 100%;
    }

    .centering {
        float: none;
        margin: 0 auto;
    }
</style>
<body>
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="offset3 span6 centering">
                content here
            </div>
        </div>
    </div>
</body>

edited Jan 03 '14 at 00:38

Ian Campbell

2,678
10
56
104

answered Jun 19 '13 at 21:16

atabak

193
1
4

2

Doesn't work in certain cases (see [comment on essentially the same answer](http://stackoverflow.com/questions/10088706/twitter-bootstrap-how-to-center-elements-horizontally-or-vertically#comment24195315_15853518) and doesn't make use of [Bootstrap-specific classes for centering](http://getbootstrap.com/css/#helper-classes-center). – Dan Dascalescu Oct 07 '14 at 03:25

score 8 · Answer 7 · edited Jul 25 '14 at 14:22

8

for horizontaly centering you can have something like this:

.centering{
float:none;
margin:0 auto
}

 <div class="span8 centering"></div>

edited Jul 25 '14 at 14:22

Jsalinas

302
2
11

answered Apr 06 '13 at 16:52

PersianMan

2,779
2
17
20

5

Does not work (at least not in current implementation), when directly used in an image: ``. Surrounding `img` with parent `div` and giving `.text-center` or `.pagination-centered` class to parent works like a charm. – trejder May 28 '13 at 10:56
3

to center an element with margin:0 auto, you need to add a width to that element. In the above example there is no width specified because span8 has a width in boobstrap but your image doesn't so will center horizontally that image inside the parent – Raul Oct 25 '13 at 04:37
4

This ignores the "Bootstrap" part of the question. – Dan Dascalescu Oct 07 '14 at 03:24

score 8 · Answer 8 · edited Dec 16 '21 at 16:41

8

With Bootstrap 4 you can use flex-based HTML classes d-flex, justify-content-center, and align-items-center:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex justify-content-center align-items-center">
    <button type="submit" class="btn btn-primary">Create</button>
</div>

Source: Bootstrap 4.1

edited Dec 16 '21 at 16:41

TylerH

20,799
66
75
101

answered Jul 12 '18 at 13:14

alvseek

381
3
11

The only suggestion that worked for me when trying to align "export" button os jQuery datatable. +1 – NoBullMan Mar 04 '22 at 17:50

score 5 · Answer 9 · edited Dec 16 '21 at 16:42

5

I like this solution from a similar question:

Use bootstrap's text-center class on the actual table data <td> and table header <th> elements. So

<td class="text-center">Cell data</td> and <th class="text-center">Header cell data</th>

edited Dec 16 '21 at 16:42

TylerH

20,799
66
75
101

answered Jun 18 '15 at 12:56

xander-miller

529
5
12

score 2 · Answer 10 · answered Nov 19 '18 at 15:19

2

I discovered in Bootstrap 4 you can do this:

center horizontal is indeed text-center class

center vertical however using bootstrap classes is adding both mb-auto mt-auto so that margin-top and margin bottom are set to auto.

answered Nov 19 '18 at 15:19

online Thomas

8,864
6
44
85

`text-center` worked for me. I was trying to center a button in a `md-12` div – Gitau Harrison Oct 27 '20 at 06:59
This appears to just repeat existing answers. – TylerH Dec 16 '21 at 16:45

score 2 · Answer 11 · edited Dec 16 '21 at 16:39

2

Bootstrap 4's use of flex properties solve this. You can use these classes:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex justify-content-center align-items-center">
    <button type="submit" class="btn btn-primary">Create</button>
</div>

These classes will center your content horizontally and vertically.

edited Dec 16 '21 at 16:39

TylerH

20,799
66
75
101

answered Aug 19 '19 at 10:20

taoufiqaitali

460
5
10

This repeats the answer from alvseek over a year prior. – TylerH Dec 16 '21 at 16:40

Ramil Gilfanov · Answer 12 · 2021-12-17T19:24:35.490

0

for bootstrap4 vertical center of few items

d-flex for flex rules

flex-column for vertical direction on items

align-items-center for horizontal centering

justify-content-center for vertical centering

style='height: 300px;' must have for set points where center be calc or use h-100 class

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex flex-column align-items-center justify-content-center bg-secondary" style="
    height: 300px;
">
    <div class="p-2 bg-primary">Flex item</div>
    <div class="p-2 bg-primary">Flex item</div>
    <div class="p-2 bg-primary">Flex item</div>
</div>

edited Dec 17 '21 at 19:24

answered May 29 '19 at 10:48

Ramil Gilfanov

552
1
8
12

This repeats existing answer by alvseek nearly a year prior. – TylerH Dec 16 '21 at 16:45
edit answer for new version of bootstrap and add "run code snippet". my answer more correct. @TylerH run code snippet – Ramil Gilfanov Dec 17 '21 at 19:27
difference is class d-column – Ramil Gilfanov Dec 17 '21 at 19:33

score 0 · Answer 13 · answered May 02 '23 at 13:08

0

With Bootstrap 5 you can use my-auto to verticaly center inside a col

answered May 02 '23 at 13:08

Joffrey Outtier

880
10
9

How can I center elements horizontally or vertically with Twitter Bootstrap?

13 Answers13

Linked

Related