How can I center elements horizontally or vertically with Twitter Bootstrap?
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"
Bootstrap Center Vertical and Horizontal Alignment
Bootstrap 5 (Updated 2021)
Bootstrap 5 is still flexbox based so vertical centering works the same way as it did in Bootstrap 4. For example, align-items-center
(flex-direction: row) and justify-content-center
(flex-direction: column) can used on the flexbox parent (row or d-flex).
Centering examples in Bootstrap 5
Vertical center (don't forget the parent must have a defined height!):
my-auto
for centering inside flex (.d-flex
) elementsmy-auto
can be used to center columns (.col-
) insiderow
align-items-center
to center columns (col-*
) insiderow
Horizontal center:
text-center
to centerdisplay:inline
elements & column contentmx-auto
for centering inside flex elementsmx-auto
can be used to center columns (.col-
) insiderow
justify-content-center
to center columns (col-*
) insiderow
Bootstrap 4.3+ (Update 2019)
There's no need for extra CSS. What's already included in Bootstrap will work. Make sure the container(s) of the form are full height. Bootstrap 4 now has a h-100
class for 100% height...
Vertical center:
<div class="container h-100">
<div class="row h-100 justify-content-center align-items-center">
<form class="col-12">
<div class="form-group">
<label for="formGroupExampleInput">Example label</label>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
</div>
<div class="form-group">
<label for="formGroupExampleInput2">Another label</label>
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
</div>
</form>
</div>
</div>
https://codeply.com/go/raCutAGHre
the height of the container with the item(s) to center should be 100%
(or whatever the desired height is relative to the centered item)
Note: When using height:100%
(percentage height) on any element, the element takes in the height of it's container. In modern browsers vh units height:100vh;
can be used instead of %
to get the desired height.
Therefore, you can set html, body {height: 100%}, or use the new min-vh-100
class on container instead of h-100
.
Horizontal center:
text-center
to centerdisplay:inline
elements & column contentmx-auto
for centering inside flex elementsoffset-*
ormx-auto
can be used to center columns (.col-
)justify-content-center
to center columns (col-*
) insiderow
Vertical Align Center in Bootstrap
Bootstrap 4 full-screen centered form
Bootstrap 4 center input group
Bootstrap 4 horizontal + vertical center full screen
Vertical Align Center in Bootstrap 4
Important! Vertical center is relative to the height of the parent
If the parent of the element you're trying to center has no defined
height, none of the vertical centering solutions will work!
Now, onto vertical centering...
Bootstrap 5 (Updated 2021)
Bootstrap 5 is still flexbox based so vertical centering works the same way as Bootstrap 4. For example, align-items-center
, justify-content-center
or auto margins can used on the flexbox parent (row
or d-flex
).
- use
align-items-center
on a flexbox row parent (row
ord-flex
) - use
justify-content-center
on a flexbox column parent (d-flex flex-column
) - use
my-auto
on a flexbox parent
Vertical Center in Bootstrap 5
Bootstrap 4
You can use the new flexbox & size utilities to make the container
full-height and display: flex
. These options don't require extra CSS (except that the height of the container (ie:html,body) must be 100%).
Option 1 align-self-center
on flexbox child
<div class="container d-flex h-100">
<div class="row justify-content-center align-self-center">
I'm vertically centered
</div>
</div>
https://codeply.com/go/fFqaDe5Oey
Option 2 align-items-center
on flexbox parent (.row
is display:flex; flex-direction:row
)
<div class="container h-100">
<div class="row align-items-center h-100">
<div class="col-6 mx-auto">
<div class="jumbotron">
I'm vertically centered
</div>
</div>
</div>
</div>
https://codeply.com/go/BumdFnmLuk
Option 3 justify-content-center
on flexbox parent (.card
is display:flex;flex-direction:column
)
<div class="container h-100">
<div class="row align-items-center h-100">
<div class="col-6 mx-auto">
<div class="card h-100 border-primary justify-content-center">
<div>
...card content...
</div>
</div>
</div>
</div>
</div>
https://codeply.com/go/3gySSEe7nd
More on Bootstrap 4 Vertical Centering
Now that Bootstrap 4 offers flexbox and other utilities, there are many approaches to vertical
alignment. http://www.codeply.com/go/WG15ZWC4lf
1 - Vertical Center Using Auto Margins:
Another way to vertically center is to use my-auto
. This will center the element within it's container. For example, h-100
makes the row full height, and my-auto
will vertically center the col-sm-12
column.
<div class="row h-100">
<div class="col-sm-12 my-auto">
<div class="card card-block w-25">Card</div>
</div>
</div>
Vertical Center Using Auto Margins Demo
my-auto
represents margins on the vertical y-axis and is equivalent to:
margin-top: auto;
margin-bottom: auto;
2 - Vertical Center with Flexbox:
Since Bootstrap 4 .row
is now display:flex
you can simply use align-self-center
on any column to vertically center it...
<div class="row">
<div class="col-6 align-self-center">
<div class="card card-block">
Center
</div>
</div>
<div class="col-6">
<div class="card card-inverse card-danger">
Taller
</div>
</div>
</div>
or, use align-items-center
on the entire .row
to vertically center align all col-*
in the row...
<div class="row align-items-center">
<div class="col-6">
<div class="card card-block">
Center
</div>
</div>
<div class="col-6">
<div class="card card-inverse card-danger">
Taller
</div>
</div>
</div>
Vertical Center Different Height Columns Demo
See this Q/A to center, but maintain equal height
3 - Vertical Center Using Display Utils:
Bootstrap 4 has display utils that can be used for display:table
, display:table-cell
, display:inline
, etc.. These can be used with the vertical alignment utils to align inline, inline-block or table cell elements.
<div class="row h-50">
<div class="col-sm-12 h-100 d-table">
<div class="card card-block d-table-cell align-middle">
I am centered vertically
</div>
</div>
</div>
Vertical Center Using Display Utils Demo
More examples
Vertical center image in <div>
Vertical center .row in .container
Vertical center and bottom in <div>
Vertical center child inside parent
Vertical center full screen jumbotron
Important! Did I mention height?
Remember vertical centering is relative to the height of the parent element. If you want to center on the entire page, in most cases, this should be your CSS...
body,html {
height: 100%;
}
Or use min-height: 100vh
(min-vh-100
in Bootstrap 4.1+) on the parent/container. If you want to center a child element inside the parent. The parent must have a defined height.
Also see:
Vertical alignment in bootstrap 4
Bootstrap Center Vertical and Horizontal Alignment
How to center an h1 vertically and horizontally using bootstrap
Rather than using multiple bootstrap classes, you can use flex properties on the .greeting-container
. You just have to add flex properties to justify and align the content in center.
.backIMg .greeting-container { height: 100vh; display: flex; justify-content: center; align-items: center;}
<div class="backIMg"> <div class="greeting-container"> <h1>Welcome</h1> </div></div>
Vertically Center in Twitter Bootstrap
You can add the following css:
.notification-content >.ion-chevron-right {
display:table-cell;
vertical-align:middle;
}
.notification-content>span{
display:table-cell;
}
Here is a fiddle
Twitter bootstrap center table column contents vertically as well as horizontally
Okay. You can achieve vertical alignment by using:
.table>tbody>tr>td {
vertical-align: middle;
display: table-cell; /* Courtesy: @Tracker1, for consistency across browsers */
}
Bootstrap has a CSS rule that counteracts this. It is like:
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td,
.table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
padding: 8px;
line-height: 1.42857143;
vertical-align: top;
border-top: 1px solid #ddd;
}
Here is a link to the line in Bootstrap's CSS master repo.
NOTE:
Ensure your CSS rule is more specific than Bootstrap's or overwrite theirs in your local copy of Bootstrap's CSS.
Center a column using Twitter Bootstrap 3
There are two approaches to centering a column <div>
in Bootstrap 3:
Approach 1 (offsets):
The first approach uses Bootstrap's own offset classes so it requires no change in markup and no extra CSS. The key is to set an offset equal to half of the remaining size of the row. So for example, a column of size 2 would be centered by adding an offset of 5, that's (12-2)/2
.
In markup this would look like:
<div class="row">
<div class="col-md-2 col-md-offset-5"></div>
</div>
Now, there's an obvious drawback for this method. It only works for even column sizes, so only .col-X-2
, .col-X-4
, col-X-6
, col-X-8
, and col-X-10
are supported.
Approach 2 (the old margin:auto
)
You can center any column size by using the proven margin: 0 auto;
technique. You just need to take care of the floating that is added by Bootstrap's grid system. I recommend defining a custom CSS class like the following:
.col-centered{
float: none;
margin: 0 auto;
}
Now you can add it to any column size at any screen size, and it will work seamlessly with Bootstrap's responsive layout:
<div class="row">
<div class="col-lg-1 col-centered"></div>
</div>
Note: With both techniques you could skip the .row
element and have the column centered inside a .container
, but you would notice a minimal difference in the actual column size because of the padding in the container class.
Update:
Since v3.0.1 Bootstrap has a built-in class named center-block
that uses margin: 0 auto
, but is missing float:none
, you can add that to your CSS to make it work with the grid system.
Related Topics
Css Background-Size: Cover + Background-Attachment: Fixed Clipping Background Images
Why Percentage Value Within Grid-Gap Create Overflow in CSS Grid
Css to Make an Empty Cell'S Border Appear
@Font-Face Works in Ie8 But Not Ie9
Absolute VS Relative Position Width & Height
Import .CSS File into .Less File
Bootstrap 3 Modal Vertical Position Center
Defining Variable Variables Using Less CSS
What Does a Star-Preceded Property Mean in Css
Simulating Transform-Origin Using Translate
How to Create a Curve on the Top of a Background
Ordering of Vendor-Specific CSS Declarations
How to Center an Inline-Block Element and If So, How
Two-Tone Background Split by Diagonal Line Using CSS