vertical-align with Bootstrap 3
vertical-align with Bootstrap 3
Question
I'm using Twitter Bootstrap 3, and I have problems when I want to align vertically two div
, for example — JSFiddle link:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-xs-5">
<div style="height:5em;border:1px solid #000">Big</div>
</div>
<div class="col-xs-5">
<div style="height:3em;border:1px solid #F00">Small</div>
</div>
</div>
The grid system in Bootstrap uses float: left
, not display:inline-block
, so the property vertical-align
doesn't work. I tried using margin-top
to fix it, but I think this is not a good solution for the responsive design.
Accepted Answer
This answer presents a hack, but I would highly recommend you to use flexbox (as stated in @Haschem answer), since it's now supported everywhere.
Demos link:
- Bootstrap 3
- Bootstrap 4 alpha 6
You still can use a custom class when you need it:
.vcenter {
display: inline-block;
vertical-align: middle;
float: none;
}
<div class="row">
<div class="col-xs-5 col-md-3 col-lg-1 vcenter">
<div style="height:10em;border:1px solid #000">Big</div>
</div><!--
--><div class="col-xs-5 col-md-7 col-lg-9 vcenter">
<div style="height:3em;border:1px solid #F00">Small</div>
</div>
</div>
Using inline-block
adds extra space between blocks if you let a real space in your code (like ...</div> </div>...
). This extra space breaks our grid if column sizes add up to 12:
<div class="row">
<div class="col-xs-6 col-md-4 col-lg-2 vcenter">
<div style="height:10em;border:1px solid #000">Big</div>
</div>
<div class="col-xs-6 col-md-8 col-lg-10 vcenter">
<div style="height:3em;border:1px solid #F00">Small</div>
</div>
</div>
Here, we've got extra spaces between <div class="[...] col-lg-2">
and <div class="[...] col-lg-10">
(a carriage return and 2 tabs/8 spaces). And so...
Let's kick this extra space!!
<div class="row">
<div class="col-xs-6 col-md-4 col-lg-2 vcenter">
<div style="height:10em;border:1px solid #000">Big</div>
</div><!--
--><div class="col-xs-6 col-md-8 col-lg-10 vcenter">
<div style="height:3em;border:1px solid #F00">Small</div>
</div>
</div>
Notice the seemingly useless comments <!-- ... -->
? They are important -- without them, the whitespace between the <div>
elements will take up space in the layout, breaking the grid system.
Note: the Bootply has been updated
Popular Answer
Flexible box layout
With the advent of the CSS Flexible Box, many of web designers' nightmares1 have been resolved. One of the most hacky ones, the vertical alignment. Now it is possible even in unknown heights.
"Two decades of layout hacks are coming to an end. Maybe not tomorrow, but soon, and for the rest of our lives."
— CSS Legendary Eric Meyer at W3Conf 2013
Flexible Box (or in short, Flexbox), is a new layout system that is specifically designed for layout purposes. The specification states:
Flex layout is superficially similar to block layout. It lacks many of the more complex text- or document-centric properties that can be used in block layout, such as floats and columns. In return it gains simple and powerful tools for distributing space and aligning content in ways that webapps and complex web pages often need.
How can it help in this case? Well, let's see.
Vertical aligned columns
Using Twitter Bootstrap we have .row
s having some .col-*
s. All we need to do is to display the desired .row
2 as a flex container box and then align all its flex items (the columns) vertically by align-items
property.
EXAMPLE HERE (Please read the comments with care)
<div class="container">
<div class="row vertical-align"> <!--
^-- Additional class -->
<div class="col-xs-6"> ... </div>
<div class="col-xs-6"> ... </div>
</div>
</div>
.vertical-align {
display: flex;
align-items: center;
}
The Output
Colored area displays the padding-box of columns.
Clarifying on align-items: center
8.3 Cross-axis Alignment: the
align-items
propertyFlex items can be aligned in the cross axis of the current line of the flex container, similar to
justify-content
but in the perpendicular direction.align-items
sets the default alignment for all of the flex container’s items, including anonymous flex items.
align-items: center;
By center value, the flex item’s margin box is centered in the cross axis within the line.
Big Alert
Important note #1: Twitter Bootstrap doesn't specify the width
of columns in extra small devices unless you give one of .col-xs-#
classes to the columns.
Therefore in this particular demo, I have used .col-xs-*
classes in order for columns to be displayed properly in mobile mode, because it specifies the width
of the column explicitly.
But alternatively you could switch off the Flexbox layout simply by changing display: flex;
to display: block;
in specific screen sizes. For instance:
/* Extra small devices (767px and down) */
@media (max-width: 767px) {
.row.vertical-align {
display: block; /* Turn off the flexible box layout */
}
}
Or you could specify .vertical-align
only on specific screen sizes like so:
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
.row.vertical-align {
display: flex;
align-items: center;
}
}
In that case, I'd go with @KevinNelson's approach.
Important note #2: Vendor prefixes omitted due to brevity. Flexbox syntax has been changed during the time. The new written syntax won't work on older versions of web browsers (but not that old as Internet Explorer 9! Flexbox is supported on Internet Explorer 10 and later).
This means you should also use vendor-prefixed properties like display: -webkit-box
and so on in production mode.
If you click on "Toggle Compiled View" in the Demo, you'll see the prefixed version of CSS declarations (thanks to Autoprefixer).
Full-height columns with vertical aligned contents
As you see in the previous demo, columns (the flex items) are no longer as high as their container (the flex container box. i.e. the .row
element).
This is because of using center
value for align-items
property. The default value is stretch
so that the items can fill the entire height of the parent element.
In order to fix that, you can add display: flex;
to the columns as well:
EXAMPLE HERE (Again, mind the comments)
.vertical-align {
display: flex;
flex-direction: row;
}
.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
display: flex;
align-items: center; /* Align the flex-items vertically */
justify-content: center; /* Optional, to align inner flex-items
horizontally within the column */
}
The Output
Colored area displays the padding-box of columns.
Last, but not least, notice that the demos and code snippets here are meant to give you a different idea, to provide a modern approach to achieve the goal. Please mind the "Big Alert" section if you are going to use this approach in real world websites or applications.
For further reading including browser support, these resources would be useful:
- Mozilla Developer Network - Flexible boxes
- Guide To Flexbox - CSS Tricks
- HTML5Rocks - Flexbox quick
- SmashingMagazine - Centering Elements with Flexbox
- Philip Walton - Solved By Flexbox
- Can I Use: Flexible Box Layout Module
1. Vertically align an image inside a div with responsive height
2. It's better to use an additional class in order not to alter Twitter Bootstrap's default .row
.
Read more… Read less…
The below code worked for me:
.vertical-align {
display: flex;
align-items: center;
}
Update 2020
I know the original question was for Bootstrap 3, but now that Bootstrap 4 has been released, here is some updated guidance on vertical center.
Important! Vertical center is relative to the height of the parent
If the parent of the element your trying to center has no defined height, none of the vertical centering solutions will work!
Bootstrap 4
Now that Bootstrap 4 is flexbox by default there are many different approaches to vertical alignment using: auto-margins, flexbox utils, or the display utils along with vertical align utils. At first "vertical align utils" seems obvious, but these only work with inline and table display elements. Here are some Bootstrap 4 vertical centering options..
1 - Vertical Center Using Auto Margins:
Another way to vertically center is to use my-auto
. This will center the element within its 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>
Bootstrap 4 - 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>
Bootstrap 4 - Vertical center different height columns Demo
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>
Bootstrap 4 - Vertical center using display utils Demo
Also see: Vertical Align Center in Bootstrap 4
Bootstrap 3
Flexbox method on the container of the item(s) to center:
.display-flex-center {
display: flex;
align-items: center;
}
Transform translateY method:
.transform-center-parent {
position: relative;
transform-style: preserve-3d;
}
.transform-center {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Display inline method:
.display-inline-block {
display: inline;
}
.display-inline-block > div {
display: inline-block;
float: none;
vertical-align: middle;
}
I thought I'd share my "solution" in case it helps anyone else who isn't familiar with the @media queries themselves.
Thanks to @HashemQolami's answer, I built some media queries that would work mobile-up like the col-* classes so that I could stack the col-* for mobile but display them vertically-aligned in the center for larger screens, e.g.
<div class='row row-sm-flex-center'>
<div class='col-xs-12 col-sm-6'></div>
<div class='col-xs-12 col-sm-6'></div>
</div>
.
.row-xs-flex-center {
display:flex;
align-items:center;
}
@media ( min-width:768px ) {
.row-sm-flex-center {
display:flex;
align-items:center;
}
}
@media ( min-width: 992px ) {
.row-md-flex-center {
display:flex;
align-items:center;
}
}
@media ( min-width: 1200px ) {
.row-lg-flex-center {
display:flex;
align-items:center;
}
}
More complicated layouts that require a different number of columns per screen resolution (e.g. 2 rows for -xs, 3 for -sm, and 4 for -md, etc.) would need some more advanced finagling, but for a simple page with -xs stacked and -sm and larger in rows, this works fine.
Following the accepted answer, if you do not wish to customize the markup, for separation of concerns or simply because you use a CMS, the following solution works fine:
.valign {
font-size: 0;
}
.valign > [class*="col"] {
display: inline-block;
float: none;
font-size: 14px;
font-size: 1rem;
vertical-align: middle;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row valign">
<div class="col-xs-5">
<div style="height:5em;border:1px solid #000">Big</div>
</div>
<div class="col-xs-5">
<div style="height:3em;border:1px solid #F00">Small</div>
</div>
</div>
The limitation here is that you cannot inherit font size from the parent element because the row sets the font size to 0 in order to remove white space.