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    x000D   x000D   lt  -- Latest compiled and minified CSS -- gt  x000D   lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 4 css bootstrap min css  gt  x000D   x000D   lt  -- Optional theme -- gt  x000D   lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 4 css bootstrap-theme min css  gt  x000D   x000D   lt  -- Latest compiled and minified JavaScript -- gt  x000D   lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 4 js bootstrap min js  gt  lt  script gt  x000D   lt div class  row  gt  x000D     lt div class  col-xs-5  gt  x000D       lt div style  height 5em border 1px solid  000  gt Big lt  div gt  x000D     lt  div gt  x000D     lt div class  col-xs-5  gt  x000D       lt div style  height 3em border 1px solid  F00  gt Small lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    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

User · Answer

For latest version of bootstrap you can use align-items-center  Use align-items utilities on flexbox containers to change the alignment of flex items on the cross axis  the y-axis to start  x-axis if flex-direction  column   Choose from start  end  center  baseline  or stretch  browser default    lt div class  quot d-flex align-items-center quot  gt           lt  div gt

User · 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  rows having some  col- s  All we need to do is to display the desired  row2 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    lt div class  container  gt       lt div class  row vertical-align  gt   lt  --                      --  Additional class -- gt           lt div class  col-xs-6  gt       lt  div gt           lt div class  col-xs-6  gt       lt  div gt       lt  div gt   lt  div gt     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 property      Flex 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 nbsp Explorer nbsp 9  Flexbox is supported on Internet nbsp Explorer nbsp 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  gt   class   col-     vertical-align  gt   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

User · Answer

OK  accidentally I ve mixed a few solutions  and it finally works now for my layout where I tried to make a 3x3 table with Bootstrap columns on the smallest resolution    x000D   x000D     Required styles    x000D   x000D   grid a   x000D    display  table  x000D    x000D   x000D   grid a div   x000D    display  table-cell  x000D    vertical-align  middle  x000D    float  none  x000D    x000D   x000D   x000D     Additional styles for demo     x000D   x000D  body   x000D    padding  20px  x000D    x000D   x000D  a   x000D    height  40px  x000D    border  1px solid  444  x000D    x000D   x000D  a  gt  div   x000D    width  100   x000D    text-align  center  x000D    x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  rel  stylesheet    gt  x000D   x000D   lt div id  grid  class  clearfix row  gt  x000D     lt a class  col-xs-4 align-center  href     gt  x000D       lt div gt 1 lt  div gt  x000D     lt  a gt  x000D     lt a class  col-xs-4 align-center  href     gt  x000D       lt div gt 2 lt  div gt  x000D     lt  a gt  x000D     lt a class  col-xs-4 align-center  href     gt  x000D       lt div gt 3 lt  div gt  x000D     lt  a gt  x000D     lt a class  col-xs-4 align-center  href     gt  x000D       lt div gt 4 lt  div gt  x000D     lt  a gt  x000D     lt a class  col-xs-4 align-center  href     gt  x000D       lt div gt 5 lt  div gt  x000D     lt  a gt  x000D     lt a class  col-xs-4 align-center  href     gt  x000D       lt div gt 6 lt  div gt  x000D     lt  a gt  x000D     lt a class  col-xs-4 align-center  href     gt  x000D       lt div gt 7 lt  div gt  x000D     lt  a gt  x000D     lt a class  col-xs-4 align-center  href     gt  x000D       lt div gt 8 lt  div gt  x000D     lt  a gt  x000D     lt a class  col-xs-4 align-center  href     gt  x000D       lt div gt 9 lt  div gt  x000D     lt  a gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I ran into this same issue  In my case I did not know the height of the outer container  but this is how I fixed it   First set the height for your html and body elements so that they are 100   This is important  Without this  the html and body elements will simply inherit the height of their children   html  body      height  100       Then I had an outer container class with    container     display  table    width  100     height  100      For at least Firefox      min-height  100       And lastly the inner container with class    inner-container     display  table-cell    vertical-align  middle      HTML is as simple as    lt body gt      lt div class  container  gt        lt div class  inner-container  gt           lt p gt Vertically Aligned lt  p gt        lt  div gt      lt  div gt   lt  body gt    This is all you need to vertically align contents  Check it out in fiddle   Jsfiddle

User · Answer

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    lt div class  row row-sm-flex-center  gt       lt div class  col-xs-12 col-sm-6  gt  lt  div gt       lt div class  col-xs-12 col-sm-6  gt  lt  div gt   lt  div gt        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

User · Answer

Try this in the CSS of the div   display  table-cell  vertical-align  middle

User · Answer

I elaborated a bit on zessx s answer  in order to make it easier to use when mixing different column sizes on different screen sizes   If you use Sass  you can add this to your scss-file    mixin v-col  prefix   min-width         media  min-width   min-width             col-   prefix -v               display  inline-block              vertical-align  middle              float  none                      include v-col lg   screen-lg    include v-col md   screen-md    include v-col sm   screen-sm    include v-col xs   screen-xs     Which generates the following CSS  that you can use directly in your stylesheets  if you are not using Sass     media  min-width  1200px         col-lg-v           display  inline-block          vertical-align  middle          float  none            media  min-width  992px         col-md-v           display  inline-block          vertical-align  middle          float  none            media  min-width  768px         col-sm-v           display  inline-block          vertical-align  middle          float  none            media  min-width  480px         col-xs-v           display  inline-block          vertical-align  middle          float  none            Now you can use it on your responsive columns like this    lt div class  container  gt       lt div class  row  gt           lt div class  col-sm-7 col-sm-v col-xs-12  gt               lt p gt                  This content is vertically aligned on tablets and larger  On mobile it will expand to screen width               lt  p gt           lt  div gt  lt div class  col-sm-5 col-sm-v col-xs-12  gt               lt p gt                  This content is vertically aligned on tablets and larger  On mobile it will expand to screen width               lt  p gt           lt  div gt       lt  div gt       lt div class  row  gt           lt div class  col-md-7 col-md-v col-sm-12  gt               lt p gt                  This content is vertically aligned on desktops and larger  On tablets and smaller it will expand to screen width               lt  p gt           lt  div gt  lt div class  col-md-5 col-md-v col-sm-12  gt               lt p gt                  This content is vertically aligned on desktops and larger  On tablets and smaller it will expand to screen width               lt  p gt           lt  div gt       lt  div gt   lt  div gt

User · Answer

x000D   x000D      div  x000D          border  1px solid  x000D        x000D      span  x000D          display  flex  x000D          align-items  center  x000D        x000D       col-5  x000D          width  100px  x000D          height  50px  x000D          float  left  x000D          background  red  x000D        x000D       col-7  x000D          width  200px  x000D          height  24px  x000D   x000D          float  left  x000D          background  green  x000D        x000D       lt span gt  x000D           lt div class  col-5  gt  x000D           lt  div gt  x000D           lt div class  col-7  gt  lt  div gt  x000D       lt  span gt  x000D   x000D   x000D

User · Answer

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    x000D   x000D   valign   x000D    font-size  0  x000D    x000D   x000D   valign  gt   class   col     x000D    display  inline-block  x000D    float  none  x000D    font-size  14px  x000D    font-size  1rem  x000D    vertical-align  middle  x000D    x000D   lt link href    maxcdn bootstrapcdn com bootstrap 3 3 2 css bootstrap min css  rel  stylesheet   gt  x000D   lt div class  row valign  gt  x000D      lt div class  col-xs-5  gt  x000D         lt div style  height 5em border 1px solid  000  gt Big lt  div gt  x000D      lt  div gt  x000D      lt div class  col-xs-5  gt  x000D          lt div style  height 3em border 1px solid  F00  gt Small lt  div gt  x000D      lt  div gt  x000D    lt  div gt  x000D   x000D   x000D    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

User · Answer

With Bootstrap 4  which is in alpha currently  you can use the  align-items-center class  So you can keep the responsive character of Bootstrap  Workes straight away fine for me  See Bootstrap 4 Documentation

User · Answer

Flex behaviors are natively supported since Bootstrap 4  Add d-flex align-items-center in the row div  You no longer need to modify your CSS content   Simple example  http   jsfiddle net vgks6L74    lt  -- language  html -- gt   lt div class  row d-flex align-items-center  gt     lt div class  col-5 border border-dark  style  height 10em  gt   Big  lt  div gt     lt div class  col-2 border border-danger  style  height 3em  gt  Small  lt  div gt   lt  div gt    With your example  http   jsfiddle net 7zwtL702    lt  -- language  html -- gt   lt div class  row d-flex align-items-center  gt       lt div class  col-5  gt           lt div class  border border-dark  style  height 10em  gt Big lt  div gt       lt  div gt       lt div class  col-2  gt           lt div class  border border-danger  style  height 3em  gt Small lt  div gt      lt  div gt   lt  div gt    Source  Flex    Bootstrap

User · Answer

The below code worked for me    vertical-align       display  flex      align-items  center

User · Answer

There are several ways you can do it    Use nbsp   display  table-cell  vertical-align  middle    and the CSS of the container to  display  table   Use padding along with media-screen for changing the padding relative to the screen size  Google  media screen to know more  Use relative padding  I e   specify padding in terms of

User · Answer

I just did this and it does what I want it to do    align-middle     margin-top  25     margin-bottom  25       And now my page looks like   lt div class  container-fluid align-middle  gt      content    --------------------------------                                           --------------------------                                                                                                                                                                                              --------------------------                                           --------------------------------

User · Answer

There isn t any need for table and table-cells  It can be achieved easily using transform   Example  http   codepen io arvind pen QNbwyM  Code    x000D   x000D   child   x000D    height  10em  x000D    border  1px solid green  x000D    position  relative  x000D    x000D   child-content   x000D    position  absolute  x000D    top  50   x000D    left  50   x000D    -webkit-transform  translate -50   -50    x000D    transform  translate -50   -50    x000D    x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 5 css bootstrap min css  rel  stylesheet    gt  x000D   lt div class  row parent  gt  x000D     lt div class  col-xs-6 col-lg-6 child  gt  x000D       lt div class  child-content  gt  x000D         lt div style  height 4em border 1px solid  000  gt Big lt  div gt  x000D       lt  div gt  x000D     lt  div gt  x000D     lt div class  col-xs-6 col-lg-6 child  gt  x000D       lt div class  child-content  gt  x000D         lt div style  height 3em border 1px solid  F00  gt Small lt  div gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I ve spent a lot of time trying solutions from here and none of them helped me  After a few hours  I belive this will allow u to center vert any child element in BS3  CSS  vertical-center     display  flex    flex-direction  column    justify-content  center     HTML  lt div class  quot col-md-6 vertical-center quot  gt       lt div class  quot container quot  gt           lt div class  quot row quot  gt           lt  div gt        lt  div gt      lt  div gt

User · Answer

I ran into the same situation where I wanted to align a few div elements vertically in a row and found that Bootstrap classes col-xx-xx applies style to the div as float  left   I had to apply the style on the div elements like style  Float none  and all my div elements started vertically aligned  Here is the working example    lt div class  col-lg-4  style  float none   gt    JsFiddle Link  Just in case someone wants to read more about the float property   W3Schools - Float

User · 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    x000D   x000D   vcenter   x000D      display  inline-block  x000D      vertical-align  middle  x000D      float  none  x000D    x000D   lt div class  row  gt  x000D       lt div class  col-xs-5 col-md-3 col-lg-1 vcenter  gt  x000D           lt div style  height 10em border 1px solid  000  gt Big lt  div gt  x000D       lt  div gt  lt  -- x000D      -- gt  lt div class  col-xs-5 col-md-7 col-lg-9 vcenter  gt  x000D           lt div style  height 3em border 1px solid  F00  gt Small lt  div gt  x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Bootply  Using inline-block adds extra space between blocks if you let a real space in your code  like     lt  div gt   lt  div gt       This extra space breaks our grid if column sizes add up to 12    lt div class  row  gt       lt div class  col-xs-6 col-md-4 col-lg-2 vcenter  gt           lt div style  height 10em border 1px solid  000  gt Big lt  div gt       lt  div gt       lt div class  col-xs-6 col-md-8 col-lg-10 vcenter  gt           lt div style  height 3em border 1px solid  F00  gt Small lt  div gt       lt  div gt   lt  div gt    Here  we ve got extra spaces between  lt div class        col-lg-2  gt  and  lt div class        col-lg-10  gt   a carriage return and 2 tabs 8 spaces   And so       Let s kick this extra space     lt div class  row  gt       lt div class  col-xs-6 col-md-4 col-lg-2 vcenter  gt           lt div style  height 10em border 1px solid  000  gt Big lt  div gt       lt  div gt  lt  --     -- gt  lt div class  col-xs-6 col-md-8 col-lg-10 vcenter  gt           lt div style  height 3em border 1px solid  F00  gt Small lt  div gt       lt  div gt   lt  div gt      Notice the seemingly useless comments  lt  --     -- gt   They are important -- without them  the whitespace between the  lt div gt  elements will take up space in the layout  breaking the grid system   Note  the Bootply has been updated

User · Answer

Try this    x000D   x000D   exe   x000D    font-size  0  x000D    x000D   x000D   exe  gt   class   col     x000D    display  inline-block  x000D    float  none  x000D    font-size  14px  x000D    font-size  1rem  x000D    vertical-align  middle  x000D    x000D   lt link href    maxcdn bootstrapcdn com bootstrap 3 3 2 css bootstrap min css  rel  stylesheet   gt  x000D   lt div class  row  exe  gt  x000D      lt div class  col-xs-5  gt  x000D         lt div style  height 5em border 1px solid grey  gt Big lt  div gt  x000D      lt  div gt  x000D      lt div class  col-xs-5  gt  x000D          lt div style  height 3em border 1px solid red  gt Small lt  div gt  x000D      lt  div gt  x000D    lt  div gt  x000D   x000D   x000D

User · Answer

I genuinely find the following code works using Chrome and not other browsers than the currently selected answer    v-center       display table important  height 125px      v-center div class   col-        display  table-cell important     vertical-align middle     float none     v-center img      max-height 125px      Bootply Link  You may need to amend the heights  specifically on  v-center  and remove change div on div class   col-   for your needs

User · Answer

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  quot vertical align utils quot  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   lt div class  quot row h-100 quot  gt       lt div class  quot col-sm-12 my-auto quot  gt           lt div class  quot card card-block w-25 quot  gt Card lt  div gt       lt  div gt   lt  div gt   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            lt div class  quot row quot  gt              lt div class  quot col-6 align-self-center quot  gt                   lt div class  quot card card-block quot  gt                   Center                  lt  div gt              lt  div gt              lt div class  quot col-6 quot  gt                   lt div class  quot card card-inverse card-danger quot  gt                      Taller                  lt  div gt             lt  div gt       lt  div gt   or  use align-items-center on the entire  row to vertically center align all col-  in the row            lt div class  quot row align-items-center quot  gt              lt div class  quot col-6 quot  gt                   lt div class  quot card card-block quot  gt                   Center                  lt  div gt              lt  div gt              lt div class  quot col-6 quot  gt                   lt div class  quot card card-inverse card-danger quot  gt                      Taller                  lt  div gt             lt  div gt       lt  div gt   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   lt div class  quot row h-50 quot  gt       lt div class  quot col-sm-12 h-100 d-table quot  gt           lt div class  quot card card-block d-table-cell align-middle quot  gt              I am centered vertically          lt  div gt       lt  div gt   lt  div gt   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  gt  div       display  inline-block      float  none      vertical-align  middle     Demo of Bootstrap 3 centering methods

User · Answer

HTML   lt div class  row  gt       lt div class  col-xs-2 pull-bottom           style  height 100px background blue  gt       lt  div gt       lt div class  col-xs-8 pull-bottom           style  height 50px background yellow  gt       lt  div gt   lt  div gt    CSS   pull-bottom       display  inline-block      vertical-align  bottom      float  none

User · Answer

This is my solution  Just add this class to your CSS content    align-middle     display  flex    justify-content  center    align-items  center      Then your HTML would look like this    lt div class  col-xs-12 align-middle  gt     lt div class  col-xs-6  style  background-color blue   gt       lt h3 gt Item lt  h3 gt       lt h3 gt Item lt  h3 gt     lt  div gt     lt div class  col-xs-6  style  background-color red   gt       lt h3 gt Item lt  h3 gt     lt  div gt   lt  div gt     x000D   x000D   align-middle   x000D    display  flex  x000D    justify-content  center  x000D    align-items  center  x000D    x000D   lt html gt  x000D     lt head gt  x000D       lt meta charset  utf-8  gt  x000D       lt meta http-equiv  X-UA-Compatible  content  IE edge  gt  x000D       lt meta name  viewport  content  width device-width  initial-scale 1  gt  x000D       lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  rel  stylesheet   gt  x000D   lt  DOCTYPE html gt  x000D       lt title gt Title lt  title gt  x000D     lt  head gt  x000D     lt body gt  x000D       lt div class  container  gt  x000D         lt div class  row  gt  x000D           lt div class  col-xs-12 align-middle  gt  x000D             lt div class  col-xs-6  style  background-color blue   gt  x000D               lt h3 gt Item lt  h3 gt  x000D               lt h3 gt Item lt  h3 gt  x000D             lt  div gt  x000D             lt div class  col-xs-6  style  background-color red   gt  x000D               lt h3 gt Item lt  h3 gt  x000D             lt  div gt  x000D           lt  div gt  x000D         lt  div gt  x000D       lt  div gt  x000D       lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D       lt script src  https   maxcdn bootstrapcdn com bootstrap 3 2 0 js bootstrap min js  gt  lt  script gt  x000D     lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

I prefer this method as per David Walsh Vertical center CSS    children      position  relative      top  50       transform  translateY -50        The transform isn t essential  it just finds the center a little more accurately  Internet nbsp Explorer nbsp 8 may be slightly less centered as a result  but it is still not bad - Can I use - Transforms 2d

User · Answer

If you are using the Less version of Bootstrap  and compiling into CSS yourself  you can use some utility classes to use with Bootstrap classes   I ve found these to work fantastically well where I want to preserve the responsiveness and configurability of the Bootstrap grid system  like using -md or -sm   but I want all columns in a given row to all have the same vertical height  so that I can then vertically align their content and have all columns in the row share a common middle    CSS Less    display-table       display  table      width  100      col-md-table-cell        media  min-width   screen-md-min            display  table-cell          vertical-align  top          float  none           col-sm-table-cell        media  min-width   screen-sm-min            display  table-cell          vertical-align  top          float  none           vertical-align-middle       vertical-align  middle      HTML    lt div class  row display-table  gt       lt div class  col-sm-5 col-sm-table-cell vertical-align-middle  gt                   lt  div gt       lt div class  col-sm-5 col-sm-table-cell vertical-align-middle  gt                   lt  div gt   lt  div gt

[html] vertical-align with Bootstrap 3

Examples related to html

Examples related to css

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3