title: Bootstrap Directory Grid
body: <p>Good evening,</p>
  
  <p>I'm trying to write a grid that would serve as a directory of employees. It would feature a thumbnail on the left, and name and title on the right. I'd like the name and title to be vertically aligned in the middle. Aside from the vertical alignment issue, I'm also having a problem that when the name or title get too long, it wraps the entire span underneath the image. </p>
  
  <p>Here is the CSS and markup (using the latest Bootstrap). Could anyone lend a hand?</p>
  
  <pre><code>&lt;!-- Begin People Listing --&gt;
  &lt;style type="text/css"&gt;
  ul.people-list {
      margin: 0;
      padding: 0;
  }
  
  ul.people-list li {
      list-style: none;
      padding: 0;
  }
  
  ul.people-list li a {
      display: block;
      border: 2px solid #eee;
      margin: 5px;
      padding: 30px;
      min-height: 125px;
  }
  
  ul.people-list li a:hover {
      background: #eee;
  }
  
  ul.people-list span { 
      display: block;
      float: left;
  }
  
  ul.people-list span.portrait {
      border: 0px solid red;
      margin-right: 20px;
  }
  
  ul.people-list span.name {
      border: 0px solid blue;
  }
  
  ul.people-list span.name h4 {
      margin: 0;
      color: #00654e;
  }
  
  ul.people-list span.name h5 {
      color: #000;
      margin: 0;
  }
  
  
  &lt;/style&gt;
  
  &lt;ul class="row people-list"&gt;
      &lt;li class="col-xs-12 col-sm-6 col-md-4"&gt;
          &lt;a class="clearfix" href="#"&gt;
              &lt;span class="portrait"&gt;
                  &lt;img src="http://lorempixel.com/100/100/people" class="img-circle"&gt;
              &lt;/span&gt;
              &lt;span class="name"&gt;
                  &lt;h4&gt;Dr. Someone somebody with a really really long name?&lt;/h4&gt;
                  &lt;h5&gt;Criminal Justice Administration&lt;/h5&gt;
              &lt;/span&gt;
          &lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="col-xs-12 col-sm-6 col-md-4"&gt;
          &lt;a class="clearfix" href="#"&gt;
              &lt;span class="portrait"&gt;
                  &lt;img src="http://lorempixel.com/100/100/people" class="img-circle"&gt;
              &lt;/span&gt;
              &lt;span class="name"&gt;
                  &lt;h4&gt;Dr. Catherina Abbott&lt;/h4&gt;
                  &lt;h5&gt;Assistant Professor of Mathematics&lt;/h5&gt;
              &lt;/span&gt;
          &lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="col-xs-12 col-sm-6 col-md-4"&gt;
          &lt;a class="clearfix" href="#"&gt;
              &lt;span class="portrait"&gt;
                  &lt;img src="http://lorempixel.com/100/100/people" class="img-circle"&gt;
              &lt;/span&gt;
              &lt;span class="name"&gt;
                  &lt;h4&gt;Catherina Abbott&lt;/h4&gt;
                  &lt;h5&gt;Mathematics&lt;/h5&gt;
              &lt;/span&gt;
          &lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="col-xs-12 col-sm-6 col-md-4"&gt;
          &lt;a class="clearfix" href="#"&gt;
              &lt;span class="portrait"&gt;
                  &lt;img src="http://lorempixel.com/100/100/people" class="img-circle"&gt;
              &lt;/span&gt;
              &lt;span class="name"&gt;
                  &lt;h4&gt;Catherina Abbott&lt;/h4&gt;
                  &lt;h5&gt;Mathematics&lt;/h5&gt;
              &lt;/span&gt;
          &lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="col-xs-12 col-sm-6 col-md-4"&gt;
          &lt;a class="clearfix" href="#"&gt;
              &lt;span class="portrait"&gt;
                  &lt;img src="http://lorempixel.com/100/100/people" class="img-circle"&gt;
              &lt;/span&gt;
              &lt;span class="name"&gt;
                  &lt;h4&gt;Catherina Abbott&lt;/h4&gt;
                  &lt;h5&gt;Mathematics&lt;/h5&gt;
              &lt;/span&gt;
          &lt;/a&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  &lt;!-- End People Listing --&gt;
  </code></pre>