Estou usando o Twitter Bootstrap 3 e tenho problemas quando quero alinhar verticalmente dois div, por exemplo - link JSFiddle :

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

O sistema de grade no Bootstrap usa float: left, não display:inline-block, portanto a propriedade vertical-alignnão funciona. Tentei usar margin-toppara corrigi-lo, mas acho que essa não é uma boa solução para o design responsivo.

Esta resposta apresenta um hack, mas eu recomendo que você use o flexbox (como indicado na resposta @Haschem ), já que agora é suportado em todos os lugares.

Link para demonstrações:
- Bootstrap 3
- Bootstrap 4 alpha 6

Você ainda pode usar uma classe personalizada quando precisar:

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

Bootply

O uso inline-blockadiciona espaço extra entre os blocos se você deixar um espaço real no seu código (como ...</div> </div>...). Esse espaço extra quebra nossa grade se o tamanho da coluna atingir 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>

Aqui, temos espaços extras entre <div class="[...] col-lg-2">e <div class="[...] col-lg-10">(retorno de carro e 2 guias / 8 espaços). E entao...

Vamos chutar esse espaço extra !!

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

Observe os comentários aparentemente inúteis <!-- ... -->? Eles são importantes - sem eles, o espaço em branco entre os <div>elementos ocupará espaço no layout, interrompendo o sistema de grade.

Nota: o Bootply foi atualizado

Layout de caixa flexível

Com o advento da CSS Flexible Box , muitos dos pesadelos ¹ dos web designers foram resolvidos. Um dos mais hacky, o alinhamento vertical. Agora é possível mesmo em alturas desconhecidas .

"Duas décadas de hacks de layout estão chegando ao fim. Talvez não amanhã, mas em breve e pelo resto de nossas vidas."

- CSS Lendário Eric Meyer no W3Conf 2013

O Flexible Box (ou, em resumo, Flexbox), é um novo sistema de layout projetado especificamente para fins de layout. A especificação afirma :

O layout do Flex é superficialmente semelhante ao layout do bloco. Faltam muitas das propriedades mais complexas centradas em texto ou documento que podem ser usadas no layout de blocos, como flutuadores e colunas. Em troca, ele obtém ferramentas simples e poderosas para distribuir espaço e alinhar conteúdo das maneiras que os aplicativos da web e as páginas complexas geralmente precisam.

Como isso pode ajudar nesse caso? Bem vamos ver.

Colunas alinhadas verticais

Usando o Twitter Bootstrap, temos .rowalguns .col-*s. Tudo o que precisamos fazer é exibir os .row² desejados como uma caixa de contêiner flexível e, em seguida, alinhar todos os seus itens flexíveis (as colunas) verticalmente por align-itemspropriedade.

EXEMPLO AQUI (Por favor, leia os comentários com cuidado)

<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;
}

A saída

A área colorida exibe a caixa de preenchimento das colunas.

Esclarecendo sobre align-items: center

8.3 Alinhamento de eixo transversal: a align-itemspropriedade

Os itens flexíveis podem ser alinhados no eixo transversal da linha atual do contêiner flexível, semelhante, justify-contentmas na direção perpendicular. align-itemsdefine o alinhamento padrão para todos os itens do contêiner flexível, incluindo itens flexíveis anônimos .

align-items: center; Por valor central, a caixa de margem do item flexível é centralizada no eixo transversal dentro da linha.

Big Alert

Nota importante # 1: O Twitter Bootstrap não especifica as widthcolunas em dispositivos extras pequenos, a menos que você dê uma das .col-xs-#classes às colunas.

Portanto, nesta demonstração em particular, usei .col-xs-*classes para que as colunas sejam exibidas corretamente no modo móvel, porque especifica owidth explicitamente a coluna.

Mas como alternativa, você pode desativar o layout do Flexbox simplesmente mudando display: flex;para display: block;tamanhos de tela específicos. Por exemplo:

/* Extra small devices (767px and down) */
@media (max-width: 767px) {
    .row.vertical-align {
        display: block; /* Turn off the flexible box layout */
    }
}

Ou você pode especificar .vertical-align apenas em tamanhos de tela específicos como:

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .row.vertical-align {
        display: flex;
        align-items: center;
    }
}

Nesse caso, eu seguiria a abordagem de @KevinNelson .

Nota importante # 2: prefixos de fornecedores omitidos devido à brevidade. A sintaxe do Flexbox foi alterada ao longo do tempo. A nova sintaxe escrita não funcionará em versões mais antigas de navegadores da Web (mas não tão antigas quanto o Internet Explorer 9! Flexbox é suportada no Internet Explorer 10 e posterior).

Isso significa que você também deve usar propriedades prefixadas pelo fornecedor, como display: -webkit-box assim por diante, no modo de produção.

Se você clicar em "Alternar exibição compilada" na demonstração , verá a versão prefixada das declarações CSS (graças ao Autoprefixer ).

Colunas de altura total com conteúdo alinhado vertical

Como você vê na demonstração anterior , as colunas (os itens flexíveis) não são mais tão altas quanto o contêiner (a caixa do contêiner flexível)..row elemento).

Isso ocorre devido ao uso de centervalor para align-itemspropriedade. O valor padrão é stretchpara que os itens possam preencher toda a altura do elemento pai.

Para corrigir isso, você também pode adicionar display: flex;às colunas:

EXEMPLO AQUI (Mais uma vez, observe os comentários)

.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  */
}

A saída

A área colorida exibe a caixa de preenchimento das colunas.

Por último, mas não menos importante , observe que as demos e os trechos de código aqui têm como objetivo fornecer uma idéia diferente, fornecer uma abordagem moderna para atingir a meta. Observe a seção " Big Alert " se você usar essa abordagem em sites ou aplicativos do mundo real.

Para leitura adicional, incluindo suporte ao navegador, esses recursos seriam úteis:

• Mozilla Developer Network - Caixas flexíveis
• Guia do Flexbox - Truques CSS
• HTML5Rocks - Flexbox rápido
• SmashingMagazine - Centralizando elementos com o Flexbox
• Philip Walton - resolvido por Flexbox
• Posso usar: Módulo de layout de caixa flexível

^{1. Alinhe verticalmente uma imagem dentro de uma div com a altura de resposta 2. É melhor usar uma classe adicional para não alterar o padrão do Twitter Bootstrap .row.}

O código abaixo funcionou para mim:

.vertical-align {
    display: flex;
    align-items: center;
}

Atualização 2020

Eu sei que a pergunta original era para o Bootstrap 3, mas agora que o Bootstrap 4 foi lançado, aqui estão algumas orientações atualizadas sobre o centro vertical.

Importante! O centro vertical é relativo à altura do pai

Se o pai do elemento que você está tentando centralizar não tiver altura definida , nenhuma das soluções de centralização vertical funcionará!

Bootstrap 4

Agora que o Bootstrap 4 é o flexbox por padrão, existem muitas abordagens diferentes para o alinhamento vertical usando: margens automáticas , utilitários do flexbox ou os utilitários de exibição junto com os utilitários de alinhamento vertical . A princípio, "utilitários de alinhamento vertical" parece óbvio, mas esses funcionam apenas com elementos de exibição em linha e tabela. Aqui estão algumas opções de centralização vertical do Bootstrap 4.

1 - Centro vertical usando margens automáticas:

Outra maneira de centralizar verticalmente é usar my-auto. Isso centralizará o elemento dentro de seu contêiner. Por exemplo, h-100aumenta a altura da linha e my-autocentraliza verticalmente a col-sm-12coluna.

<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 - Centro vertical usando margens automáticas demonstração de

my-auto representa margens no eixo y vertical e é equivalente a:

margin-top: auto;
margin-bottom: auto;

2 - Centro vertical com Flexbox:

Como o Bootstrap 4 .rowé agora, display:flexvocê pode simplesmente usaralign-self-center em qualquer coluna para centralizá-lo verticalmente ...

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

ou use align-items-centerno todo .rowpara alinhar verticalmente todo o alinhamento col-*na linha ...

       <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 - Centro Vertical diferentes colunas de altura Demonstração

3 - Centro vertical usando os utilitários de exibição:

Bootstrap 4 tem utils de visualização que podem ser utilizados para display:table, display:table-cell, display:inline, etc .. Estes podem ser usados com os utils alinhamento vertical para alinhar em linha, em linha ou bloco de elementos de célula de tabela.

<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 - Centro vertical usando os utilitários de exibição Demo

Veja também: Alinhamento vertical centralizado no Bootstrap 4

Bootstrap 3

Método Flexbox no contêiner dos itens a serem centralizados:

.display-flex-center {
    display: flex;
    align-items: center;
}

Transforme o método translateY:

.transform-center-parent {
    position: relative;
    transform-style: preserve-3d;
}

.transform-center {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

Exibir método embutido:

.display-inline-block {
    display: inline;
}
.display-inline-block > div {
    display: inline-block;
    float: none;
    vertical-align: middle;
}

Demonstração dos métodos de centralização do Bootstrap 3

Tente isso no CSS da div:

display: table-cell;
vertical-align: middle;

Eu pensei em compartilhar minha "solução", caso ajude alguém que não esteja familiarizado com as consultas do @media.

Graças à resposta de @ HashemQolami, criei algumas consultas de mídia que funcionariam para dispositivos móveis, como as classes col- *, para que eu pudesse empilhá-las para dispositivos móveis, mas exibi-las verticalmente alinhadas no centro para telas maiores, por exemplo

<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;
    }
}

Layouts mais complicados que exigem um número diferente de colunas por resolução de tela (por exemplo, 2 linhas para -xs, 3 para -sm e 4 para -md, etc.) precisariam de uma finagling mais avançada, mas para uma página simples com -xs empilhados e -sm e maiores em linhas, isso funciona bem.

Após a resposta aceita, se você não deseja personalizar a marcação, para separar preocupações ou simplesmente porque usa um CMS, a solução a seguir funciona bem:

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

A limitação aqui é que você não pode herdar o tamanho da fonte do elemento pai porque a linha define o tamanho da fonte como 0 para remover o espaço em branco.

Prefiro esse método conforme o CSS vertical do centro David Walsh :

.children{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

O transformnão é essencial; apenas encontra o centro com um pouco mais de precisão. O Internet Explorer 8 pode estar um pouco menos centralizado como resultado, mas ainda assim não é ruim - Posso usar - Transforma 2d .

Esta é a minha solução. Basta adicionar esta classe ao seu conteúdo CSS.

.align-middle {
  display: flex;
  justify-content: center;
  align-items: center;
}

Então seu HTML ficaria assim:

<div class="col-xs-12 align-middle">
  <div class="col-xs-6" style="background-color:blue;">
    <h3>Item</h3>
    <h3>Item</h3>
  </div>
  <div class="col-xs-6" style="background-color:red;">
    <h3>Item</h3>
  </div>
</div>

.align-middle {
  display: flex;
  justify-content: center;
  align-items: center;
}

<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
    <title>Title</title>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-xs-12 align-middle">
          <div class="col-xs-6" style="background-color:blue;">
            <h3>Item</h3>
            <h3>Item</h3>
          </div>
          <div class="col-xs-6" style="background-color:red;">
            <h3>Item</h3>
          </div>
        </div>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  </body>
</html>

Acabei de fazer isso e faz o que quero que faça.

.align-middle {
  margin-top: 25%;
  margin-bottom: 25%;
}

E agora minha página parece

<div class='container-fluid align-middle'>
    content

 +--------------------------------+
 |                                |
 |  +--------------------------+  |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |  +--------------------------+  |
 |                                |
 +--------------------------------+

Eu realmente acho que o código a seguir funciona usando o Chrome e não outros navegadores além da resposta atualmente selecionada:

.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;
}

Link de inicialização

Pode ser necessário alterar as alturas (especificamente ativadas .v-center) e remover / alterar a divisão conforme div[class*='col-']suas necessidades.

Eu encontrei esse mesmo problema. No meu caso, eu não sabia a altura do contêiner externo, mas foi assim que o corrigi:

Primeiro, defina a altura dos seus elementos htmle bodypara que eles sejam 100%. Isso é importante! Sem isso, os elementos htmle bodysimplesmente herdarão a altura de seus filhos.

html, body {
   height: 100%;
}

Então eu tive uma classe de contêiner externo com:

.container {
  display: table;
  width: 100%;
  height: 100%; /* For at least Firefox */
  min-height: 100%;
}

E por último o contêiner interno com classe:

.inner-container {
  display: table-cell;
  vertical-align: middle;
}

HTML é tão simples quanto:

<body>
   <div class="container">
     <div class="inner-container">
        <p>Vertically Aligned</p>
     </div>
   </div>
</body>

É tudo o que você precisa para alinhar verticalmente o conteúdo. Confira em violino:

Jsfiddle

Não há necessidade de tabela e células de tabela. Isso pode ser alcançado facilmente usando a transformação.

Exemplo: http://codepen.io/arvind/pen/QNbwyM

Código:

.child {
  height: 10em;
  border: 1px solid green;
  position: relative;
}
.child-content {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="row parent">
  <div class="col-xs-6 col-lg-6 child">
    <div class="child-content">
      <div style="height:4em;border:1px solid #000">Big</div>
    </div>
  </div>
  <div class="col-xs-6 col-lg-6 child">
    <div class="child-content">
      <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
  </div>
</div>

Se você estiver usando o botão Menos versão do Bootstrap e estiver compilando no CSS, poderá usar algumas classes de utilitário para usar com as classes do Bootstrap.

Descobri que eles funcionam extraordinariamente bem onde quero preservar a capacidade de resposta e a configurabilidade do sistema de grade do Bootstrap (como usar -mdou-sm ), mas quero que todas as colunas em uma determinada linha tenham a mesma altura vertical (para que eu possa alinhe verticalmente o conteúdo e faça com que todas as colunas da linha compartilhem um meio comum).

CSS / Menos:

.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:

<div class="row display-table">
    <div class="col-sm-5 col-sm-table-cell vertical-align-middle">
        ...
    </div>
    <div class="col-sm-5 col-sm-table-cell vertical-align-middle">
        ...
    </div>
</div>

Eu elaborei um pouco a resposta do zessx , para facilitar o uso ao misturar diferentes tamanhos de coluna em diferentes tamanhos de tela.

Se você usa o Sass , pode adicioná-lo ao seu arquivo scss:

@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);

O que gera o seguinte CSS (que você pode usar diretamente em suas folhas de estilo, se não estiver usando o 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;
    }
}

Agora você pode usá-lo em suas colunas responsivas como esta:

<div class="container">
    <div class="row">
        <div class="col-sm-7 col-sm-v col-xs-12">
            <p>
                This content is vertically aligned on tablets and larger. On mobile it will expand to screen width.
            </p>
        </div><div class="col-sm-5 col-sm-v col-xs-12">
            <p>
                This content is vertically aligned on tablets and larger. On mobile it will expand to screen width.
            </p>
        </div>
    </div>
    <div class="row">
        <div class="col-md-7 col-md-v col-sm-12">
            <p>
                This content is vertically aligned on desktops and larger. On tablets and smaller it will expand to screen width.
            </p>
        </div><div class="col-md-5 col-md-v col-sm-12">
            <p>
                This content is vertically aligned on desktops and larger. On tablets and smaller it will expand to screen width.
            </p>
        </div>
    </div>
</div>

Os comportamentos do Flex são suportados nativamente desde o Bootstrap 4. Adicione d-flex align-items-centerorow div. Você não precisa mais modificar seu conteúdo CSS.

Exemplo simples: http://jsfiddle.net/vgks6L74/

<!-- language: html -->
<div class="row d-flex align-items-center">
  <div class="col-5 border border-dark" style="height:10em">  Big </div>
  <div class="col-2 border border-danger" style="height:3em"> Small </div>
</div>

Com o seu exemplo: http://jsfiddle.net/7zwtL702/

<!-- language: html -->
<div class="row d-flex align-items-center">
    <div class="col-5">
        <div class="border border-dark" style="height:10em">Big</div>
    </div>
    <div class="col-2">
        <div class="border border-danger" style="height:3em">Small</div>
   </div>
</div>

Fonte: Flex · Bootstrap

OK, acidentalmente misturei algumas soluções, e finalmente funciona agora para o meu layout, onde tentei criar uma tabela 3x3 com colunas Bootstrap na menor resolução.

/* Required styles */

#grid a {
  display: table;
}

#grid a div {
  display: table-cell;
  vertical-align: middle;
  float: none;
}


/* Additional styles for demo: */

body {
  padding: 20px;
}

a {
  height: 40px;
  border: 1px solid #444;
}

a > div {
  width: 100%;
  text-align: center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div id="grid" class="clearfix row">
  <a class="col-xs-4 align-center" href="#">
    <div>1</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>2</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>3</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>4</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>5</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>6</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>7</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>8</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>9</div>
  </a>
</div>

Tente isso,

.exe {
  font-size: 0;
}

.exe > [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  exe">
   <div class="col-xs-5">
      <div style="height:5em;border:1px solid grey">Big</div>
   </div>
   <div class="col-xs-5">
       <div style="height:3em;border:1px solid red">Small</div>
   </div>
 </div>

Existem várias maneiras de fazer isso:

1. Usar 

   display: table-cell;
   vertical-align: middle;

   e o CSS do contêiner para

   display: table;

2. Use o preenchimento junto com a tela de mídia para alterar o preenchimento em relação ao tamanho da tela. Tela do Google @media para saber mais.

3. Use preenchimento relativo

   Ou seja, especifique o preenchimento em termos de%

Com o Bootstrap 4 (atualmente em alfa), você pode usar a .align-items-centerclasse. Assim, você pode manter o caráter responsivo do Bootstrap. Funciona imediatamente bem para mim. Consulte a documentação do Bootstrap 4 .

HTML

<div class="row">
    <div class="col-xs-2 pull-bottom"
         style="height:100px;background:blue">
    </div>
    <div class="col-xs-8 pull-bottom"
         style="height:50px;background:yellow">
    </div>
</div>

CSS

.pull-bottom {
    display: inline-block;
    vertical-align: bottom;
    float: none;
}

Corri para a mesma situação em que queria alinhar alguns elementos div verticalmente em uma linha e descobri que as classes do Bootstrap col-xx-xx aplicam estilo à div como float: left.

Eu tive que aplicar o estilo nos elementos div como style = "Float: none" e todos os meus elementos div começaram alinhados verticalmente. Aqui está o exemplo de trabalho:

<div class="col-lg-4" style="float:none;">

JsFiddle Link

Apenas no caso de alguém querer ler mais sobre a propriedade float:

W3Schools - Flutuador