J'utilise Twitter Bootstrap 3, et j'ai des problèmes lorsque je veux aligner verticalement deux div, par exemple - Lien 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>

Le système de grille de Bootstrap utilise float: left, non display:inline-block, donc la propriété vertical-alignne fonctionne pas. J'ai essayé margin-topde le réparer, mais je pense que ce n'est pas une bonne solution pour la conception réactive.

Cette réponse présente un hack, mais je vous recommande fortement d'utiliser Flexbox (comme indiqué dans la réponse @Haschem ), car elle est désormais prise en charge partout.

Lien démos:
- Bootstrap 3
- Bootstrap 4 alpha 6

Vous pouvez toujours utiliser une classe personnalisée lorsque vous en avez besoin:

.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

L'utilisation inline-blockajoute de l'espace supplémentaire entre les blocs si vous laissez un espace réel dans votre code (comme ...</div> </div>...). Cet espace supplémentaire brise notre grille si la taille des colonnes s'élève à 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>

Ici, nous avons des espaces supplémentaires entre <div class="[...] col-lg-2">et <div class="[...] col-lg-10">(un retour chariot et 2 tabulations / 8 espaces). Et donc...

Lançons cet espace supplémentaire !!

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

Remarquez les commentaires apparemment inutiles <!-- ... -->? Ils sont importants - sans eux, les espaces entre les <div>éléments prendront de la place dans la disposition, brisant le système de grille.

Remarque: le Bootply a été mis à jour

Disposition flexible des boîtes

Avec l'avènement de la CSS Flexible Box , de nombreux cauchemars de concepteurs Web ¹ ont été résolus. L'un des plus hackeux, l'alignement vertical. Maintenant, c'est possible même dans des hauteurs inconnues .

"Deux décennies de hacks de mise en page touchent à leur fin. Peut-être pas demain, mais bientôt, et pour le reste de nos vies."

- Le légendaire CSS Eric Meyer au W3Conf 2013

Flexible Box (ou en bref, Flexbox), est un nouveau système de mise en page spécialement conçu à des fins de mise en page. La spécification stipule :

La disposition flexible est superficiellement similaire à la disposition de bloc. Il manque de nombreuses propriétés plus complexes, centrées sur le texte ou le document, qui peuvent être utilisées dans la disposition des blocs, telles que les flottants et les colonnes. En retour, il gagne des outils simples et puissants pour distribuer l'espace et aligner le contenu de la manière dont les applications Web et les pages Web complexes ont souvent besoin.

Comment cela peut-il aider dans ce cas? Voyons voir.

Colonnes alignées verticalement

En utilisant Twitter Bootstrap, nous avons .rowdes .col-*s. Tout ce que nous devons faire est d'afficher le .row² souhaité comme une boîte de conteneur flexible , puis d'aligner verticalement tous ses éléments flexibles (les colonnes) par align-itemspropriété.

EXEMPLE ICI (Veuillez lire attentivement les commentaires)

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

Le résultat

La zone colorée affiche la zone de remplissage des colonnes.

Clarification sur align-items: center

8.3 Alignement transversal: la align-itemspropriété

Les éléments flexibles peuvent être alignés dans l' axe transversal de la ligne actuelle du conteneur flexible, de manière similaire justify-contentmais perpendiculaire. align-itemsdéfinit l'alignement par défaut pour tous les éléments du conteneur flexible, y compris les éléments flexibles anonymes .

align-items: center; Par valeur centrale, la zone de marge de l' élément flexible est centrée dans l' axe transversal de la ligne.

Grande alerte

Remarque importante # 1: Twitter Bootstrap ne spécifie pas le nombre widthde colonnes dans les très petits appareils, sauf si vous donnez une des .col-xs-#classes aux colonnes.

Par conséquent, dans cette démo particulière, j'ai utilisé des .col-xs-*classes pour que les colonnes soient affichées correctement en mode mobile, car cela spécifie widthexplicitement la colonne.

Mais encore , vous pouvez désactiver l'Flexbox layout en changeant simplement display: flex;à display: block;des tailles d'écran spécifiques. Par exemple:

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

Ou vous pouvez spécifier .vertical-align uniquement sur des tailles d'écran spécifiques comme ceci:

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

Dans ce cas, je partirais avec @KevinNelson de l' approche .

Remarque importante n ° 2: les préfixes du fournisseur ont été omis en raison de la brièveté. La syntaxe de Flexbox a été modifiée au cours du temps. La nouvelle syntaxe écrite ne fonctionnera pas sur les anciennes versions des navigateurs Web (mais pas aussi anciennes qu'Internet Explorer 9! Flexbox est pris en charge sur Internet Explorer 10 et versions ultérieures).

Cela signifie que vous devez également utiliser des propriétés préfixées par le fournisseur comme display: -webkit-boxet ainsi de suite en mode production.

Si vous cliquez sur "Basculer la vue compilée" dans la démo , vous verrez la version préfixée des déclarations CSS (grâce à Autoprefixer ).

Colonnes pleine hauteur avec contenu aligné verticalement

Comme vous le voyez dans la démo précédente , les colonnes (les éléments flexibles) ne sont plus aussi hautes que leur conteneur (la boîte du conteneur flexible, c'est-à-dire l' .rowélément).

Cela est dû à l'utilisation de la centervaleur pour la align-itemspropriété. La valeur par défaut est de stretchsorte que les éléments puissent remplir toute la hauteur de l'élément parent.

Pour résoudre ce problème, vous pouvez également ajouter display: flex;aux colonnes:

EXEMPLE ICI (Encore une fois, faites attention aux commentaires)

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

Le résultat

La zone colorée affiche la zone de remplissage des colonnes.

Enfin, notez que les démos et les extraits de code ici sont destinés à vous donner une idée différente, à fournir une approche moderne pour atteindre l'objectif. Veuillez noter la section " Big Alert " si vous comptez utiliser cette approche dans des sites Web ou des applications du monde réel.

Pour une lecture plus approfondie, y compris la prise en charge du navigateur, ces ressources seraient utiles:

• Réseau de développeurs Mozilla - Boîtes flexibles
• Guide de Flexbox - Astuces CSS
• HTML5Rocks - Flexbox rapide
• SmashingMagazine - Éléments de centrage avec Flexbox
• Philip Walton - Résolu par Flexbox
• Puis-je utiliser: Module de disposition de boîte flexible

^{1. Alignez verticalement une image à l'intérieur d'un div avec une hauteur réactive 2. Il est préférable d'utiliser une classe supplémentaire afin de ne pas modifier la valeur par défaut de Twitter Bootstrap .row.}

Le code ci-dessous a fonctionné pour moi:

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

Mise à jour 2020

Je sais que la question d'origine était pour Bootstrap 3, mais maintenant que Bootstrap 4 est sorti, voici quelques conseils mis à jour sur le centre vertical.

Important! Le centre vertical est relatif à la hauteur du parent

Si le parent de l'élément que vous essayez de centrer n'a pas de hauteur définie , aucune des solutions de centrage vertical ne fonctionnera!

Bootstrap 4

Maintenant que Bootstrap 4 est flexbox par défaut, il existe de nombreuses approches différentes de l'alignement vertical utilisant: les marges automatiques , les utilitaires flexbox ou les utilitaires d' affichage avec les utilitaires d'alignement vertical . Au premier abord, les «utilitaires d'alignement vertical» semblent évidents, mais ils ne fonctionnent qu'avec des éléments d'affichage en ligne et de table. Voici quelques options de centrage vertical Bootstrap 4.

1 - Centre vertical à l'aide des marges automatiques:

Une autre façon de centrer verticalement est d'utiliser my-auto. Cela centrera l'élément dans son conteneur. Par exemple, h-100rend la ligne pleine hauteur et my-autocentre verticalement la col-sm-12colonne.

<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 - Centre vertical utilisant la démonstration des marges automatiques

my-auto représente les marges sur l'axe vertical des y et équivaut à:

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

2 - Centre vertical avec Flexbox:

Puisque Bootstrap 4 .rowest maintenant, display:flexvous pouvez simplement l'utiliser align-self-centersur n'importe quelle colonne pour le centrer verticalement ...

       <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, utilisez align-items-centersur l'ensemble .rowpour aligner verticalement au centre tout col-*dans la rangée ...

       <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 - Demo colonnes verticales de différentes hauteurs

3 - Centre vertical utilisant des outils d'affichage:

Bootstrap 4 a utils d'affichage qui peuvent être utilisés pour display:table, display:table-cell, display:inline, etc .. Ils peuvent être utilisés avec les utils d'alignement vertical à roues alignées align, inline-block ou des éléments de cellules de tableau.

<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 - Centre vertical à l'aide des utilitaires d'affichage Démo

Voir aussi: Vertical Align Center dans Bootstrap 4

Bootstrap 3

Méthode Flexbox sur le conteneur des articles à centrer:

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

Transformez la méthode translateY:

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

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

Afficher la méthode en ligne:

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

Démonstration des méthodes de centrage Bootstrap 3

Essayez ceci dans le CSS de la div:

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

J'ai pensé partager ma "solution" au cas où cela aiderait quelqu'un d'autre qui ne connaît pas les requêtes @media elles-mêmes.

Grâce à la réponse de @ HashemQolami, j'ai construit des requêtes multimédias qui fonctionneraient mobile-up comme les classes col- * afin que je puisse empiler le col- * pour mobile mais les afficher verticalement au centre pour des écrans plus grands, par exemple

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

Des mises en page plus compliquées qui nécessitent un nombre différent de colonnes par résolution d'écran (par exemple 2 lignes pour -xs, 3 pour -sm et 4 pour -md, etc.) nécessiteraient un finagling plus avancé, mais pour une page simple avec -xs empilés et -sm et plus en rangées, cela fonctionne bien.

Suite à la réponse acceptée, si vous ne souhaitez pas personnaliser le balisage, pour la séparation des préoccupations ou simplement parce que vous utilisez un CMS, la solution suivante fonctionne très bien:

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

La limitation ici est que vous ne pouvez pas hériter de la taille de police de l'élément parent car la ligne définit la taille de police à 0 afin de supprimer les espaces blancs.

Je préfère cette méthode selon le centre vertical CSS de David Walsh :

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

Le transformn'est pas essentiel; il trouve juste le centre un peu plus précisément. Internet Explorer 8 peut être légèrement moins centré en conséquence, mais ce n'est toujours pas mauvais - Puis-je utiliser - Transforme 2d .

C'est ma solution. Ajoutez simplement cette classe à votre contenu CSS.

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

Ensuite, votre code HTML ressemblerait à ceci:

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

Je viens de le faire et il fait ce que je veux qu'il fasse.

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

Et maintenant ma page ressemble

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

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

Je trouve vraiment que le code suivant fonctionne avec Chrome et non avec d'autres navigateurs que la réponse actuellement sélectionnée:

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

Lien Bootply

Vous devrez peut-être modifier les hauteurs (en particulier sur .v-center) et supprimer / changer la division selon div[class*='col-']vos besoins.

J'ai rencontré ce même problème. Dans mon cas, je ne connaissais pas la hauteur du conteneur extérieur, mais voici comment je l'ai fixé:

Réglez d'abord la hauteur de vos éléments htmlet bodyafin qu'ils soient à 100%. C'est important! Sans cela, les éléments htmlet bodyhériteront simplement de la taille de leurs enfants.

html, body {
   height: 100%;
}

Ensuite, j'ai eu une classe de conteneur externe avec:

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

Et enfin le conteneur intérieur avec classe:

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

Le HTML est aussi simple que:

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

C'est tout ce dont vous avez besoin pour aligner verticalement le contenu. Découvrez-le au violon:

Jsfiddle

Il n'y a aucun besoin de tableau et de cellules de tableau. Cela peut être réalisé facilement en utilisant transform.

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

Code:

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

Si vous utilisez la version Less de Bootstrap et compilez vous-même en CSS, vous pouvez utiliser certaines classes d'utilitaires à utiliser avec les classes Bootstrap.

J'ai trouvé que cela fonctionnait parfaitement bien là où je voulais préserver la réactivité et la configurabilité du système de grille Bootstrap (comme avec -mdou -sm), mais je veux que toutes les colonnes d'une ligne donnée aient toutes la même hauteur verticale (afin que je puisse puis aligner verticalement leur contenu et faire en sorte que toutes les colonnes de la ligne partagent un milieu commun).

CSS / Moins:

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

J'ai développé un peu la réponse de zessx , afin de la rendre plus facile à utiliser lors du mélange de différentes tailles de colonnes sur différentes tailles d'écran.

Si vous utilisez Sass , vous pouvez l'ajouter à votre fichier 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);

Ce qui génère le CSS suivant (que vous pouvez utiliser directement dans vos feuilles de style, si vous n'utilisez pas 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;
    }
}

Vous pouvez maintenant l'utiliser sur vos colonnes réactives comme ceci:

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

Les comportements Flex sont pris en charge nativement depuis Bootstrap 4. Ajoutez d-flex align-items-centerle rowdiv. Vous n'avez plus besoin de modifier votre contenu CSS.

Exemple simple: 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>

Avec votre exemple: 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>

Source: Flex · Bootstrap

OK, accidentellement, j'ai mélangé quelques solutions, et cela fonctionne finalement maintenant pour ma mise en page où j'ai essayé de créer un tableau 3x3 avec des colonnes Bootstrap sur la plus petite résolution.

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

Essaye ça,

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

Vous pouvez le faire de plusieurs manières:

1. Utilisation 

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

   et le CSS du conteneur à

   display: table;

2. Utilisez le remplissage avec media-screen pour modifier le remplissage par rapport à la taille de l'écran. Écran Google @media pour en savoir plus.

3. Utiliser un rembourrage relatif

   C'est-à-dire, spécifiez le rembourrage en termes de%

Avec Bootstrap 4 (qui est actuellement en alpha), vous pouvez utiliser la .align-items-centerclasse. Vous pouvez donc conserver le caractère réactif de Bootstrap. Fonctionne tout de suite très bien pour moi. Voir la documentation de 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;
}

Je suis tombé sur la même situation où je voulais aligner quelques éléments div verticalement dans une rangée et j'ai trouvé que les classes Bootstrap col-xx-xx appliquent le style à la div comme float: left.

J'ai dû appliquer le style sur les éléments div comme style = "Float: none" et tous mes éléments div ont commencé alignés verticalement. Voici l'exemple de travail:

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

Lien JsFiddle

Juste au cas où quelqu'un voudrait en savoir plus sur la propriété float:

W3Schools - Float