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

Question 1

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

Question 2

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"

Question 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. getbootstrap.com/css/#grid-offsetting. This answer was likely right in 2013 but should not be used anymore today.

Question 4

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>

Question 5

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

Question 6

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

Question 7

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>

Question 8

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.

Question 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>

Question 10

Doesn't work in certain cases (see comment on essentially the same answer and doesn't make use of Bootstrap-specific classes for centering.

Question 11

for horizontaly centering you can have something like this:

.centering{
float:none;
margin:0 auto
}
 <div class="span8 centering"></div>

Question 12

Does not work (at least not in current implementation), when directly used in an image: <img src="img/logo.png" style="float:none; margin:0 auto" />. Surrounding img with parent div and giving .text-center or .pagination-centered class to parent works like a charm.

Question 13

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 <img src="img/logo.png" style="float:none; margin:0 auto; width:300px" /> will center horizontally that image inside the parent

Question 14

This ignores the "Bootstrap" part of the question.

Question 15

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/[email protected]/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

Question 16

The only suggestion that worked for me when trying to align "export" button os jQuery datatable. +1

Question 17

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>

Question 18

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.

Question 19

text-center worked for me. I was trying to center a button in a md-12 div

Question 20

This appears to just repeat existing answers.

Question 21

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

<link href="https://cdn.jsdelivr.net/npm/[email protected]/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.

Question 22

This repeats the answer from alvseek over a year prior.

Question 23

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/[email protected]/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>

Question 24

This repeats existing answer by alvseek nearly a year prior.

Question 25

edit answer for new version of bootstrap and add "run code snippet". my answer more correct. @TylerH run code snippet

Question 26

difference is class d-column

Question 27

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

Filippo oretti 50k96 gold badges230 silver badges351 bronze badges · Accepted Answer · 2013-02-01 09:09:01Z

261

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"

Share

Improve this answer

edited Dec 16, 2021 at 16:39

TylerH's user avatar

TylerH

21.3k85 gold badges84 silver badges122 bronze badges

answered Feb 1, 2013 at 9:09

Filippo oretti's user avatar

Filippo oretti

50k96 gold badges230 silver badges351 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Niels Keurentjes

Niels Keurentjes Over a year ago

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. getbootstrap.com/css/#grid-offsetting. This answer was likely right in 2013 but should not be used anymore today.

2016年10月12日T21:44:18.157Z+00:00

CollectivesTM on Stack Overflow

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

13 Answers 13

1 Comment

Comments

Comments

Comments

1 Comment

1 Comment

3 Comments

1 Comment

Comments

2 Comments

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Linked

Hot Network Questions

CollectivesTM on Stack Overflow

13 Answers 13

1 Comment

Comments

Comments

Comments

1 Comment

1 Comment

3 Comments

1 Comment

Comments

2 Comments

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Linked

Related