Bootstrap Directory Grid - html

Question

Good evening,
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.
Here is the CSS and markup (using the latest Bootstrap). Could anyone lend a hand?
<!-- Begin People Listing -->
<style type="text/css">
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;
}
</style>
<ul class="row people-list">
<li class="col-xs-12 col-sm-6 col-md-4">
<a class="clearfix" href="#">
<span class="portrait">
<img src="http://lorempixel.com/100/100/people" class="img-circle">
</span>
<span class="name">
<h4>Dr. Someone somebody with a really really long name?</h4>
<h5>Criminal Justice Administration</h5>
</span>
</a>
</li>
<li class="col-xs-12 col-sm-6 col-md-4">
<a class="clearfix" href="#">
<span class="portrait">
<img src="http://lorempixel.com/100/100/people" class="img-circle">
</span>
<span class="name">
<h4>Dr. Catherina Abbott</h4>
<h5>Assistant Professor of Mathematics</h5>
</span>
</a>
</li>
<li class="col-xs-12 col-sm-6 col-md-4">
<a class="clearfix" href="#">
<span class="portrait">
<img src="http://lorempixel.com/100/100/people" class="img-circle">
</span>
<span class="name">
<h4>Catherina Abbott</h4>
<h5>Mathematics</h5>
</span>
</a>
</li>
<li class="col-xs-12 col-sm-6 col-md-4">
<a class="clearfix" href="#">
<span class="portrait">
<img src="http://lorempixel.com/100/100/people" class="img-circle">
</span>
<span class="name">
<h4>Catherina Abbott</h4>
<h5>Mathematics</h5>
</span>
</a>
</li>
<li class="col-xs-12 col-sm-6 col-md-4">
<a class="clearfix" href="#">
<span class="portrait">
<img src="http://lorempixel.com/100/100/people" class="img-circle">
</span>
<span class="name">
<h4>Catherina Abbott</h4>
<h5>Mathematics</h5>
</span>
</a>
</li>
</ul>
<!-- End People Listing -->

Answer 1

This can be simplified a great deal (I think) by placing your people-list class inside of a column, then add your styling from there.
*If this needs built using a list format that can be swapped out depending on how you ultimately need it structured.
Grid Example
.people-list {
display: block;
vertical-align: middle;
padding: 10px;
margin: 10px auto;
border: 2px solid #eee;
}
a.people-list:hover {
background-color: #eee;
text-decoration: none;
}
.portrait,
.name {
display: table-cell;
vertical-align: middle;
padding: 10px;
}
.name h4 {
color: #00654e;
}
.name h5 {
color: #000;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4">
<a class="people-list" href="#">
<span class="portrait">
<img src="http://lorempixel.com/100/100/people" class="img-circle">
</span>
<span class="name">
<h4>Dr. Someone somebody with a really really long name?</h4>
<h5>Criminal Justice Administration</h5>
</span>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<a class="people-list" href="#">
<span class="portrait">
<img src="http://lorempixel.com/100/100/people" class="img-circle">
</span>
<span class="name">
<h4>Dr. Someone somebody with a really really long name?</h4>
<h5>Criminal Justice Administration</h5>
</span>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<a class="people-list" href="#">
<span class="portrait">
<img src="http://lorempixel.com/100/100/people" class="img-circle">
</span>
<span class="name">
<h4>Dr. Someone somebody with a really really long name?</h4>
<h5>Criminal Justice Administration</h5>
</span>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<a class="people-list" href="#">
<span class="portrait">
<img src="http://lorempixel.com/100/100/people" class="img-circle">
</span>
<span class="name">
<h4>Dr. Someone somebody with a really really long name?</h4>
<h5>Criminal Justice Administration</h5>
</span>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<a class="people-list" href="#">
<span class="portrait">
<img src="http://lorempixel.com/100/100/people" class="img-circle">
</span>
<span class="name">
<h4>Dr. Someone somebody with a really really long name?</h4>
<h5>Criminal Justice Administration</h5>
</span>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<a class="people-list" href="#">
<span class="portrait">
<img src="http://lorempixel.com/100/100/people" class="img-circle">
</span>
<span class="name">
<h4>Dr. Someone somebody with a really really long name?</h4>
<h5>Criminal Justice Administration</h5>
</span>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<a class="people-list" href="#">
<span class="portrait">
<img src="http://lorempixel.com/100/100/people" class="img-circle">
</span>
<span class="name">
<h4>Dr. Someone somebody with a really really long name?</h4>
<h5>Criminal Justice Administration</h5>
</span>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<a class="people-list" href="#">
<span class="portrait">
<img src="http://lorempixel.com/100/100/people" class="img-circle">
</span>
<span class="name">
<h4>Dr. Someone somebody with a really really long name?</h4>
<h5>Criminal Justice Administration</h5>
</span>
</a>
</div>
</div>
</div>
List Example
.people-list {
display: block;
vertical-align: middle;
padding: 10px;
margin: 10px auto;
border: 2px solid #eee;
}
a.people-list:hover {
background-color: #eee;
text-decoration: none;
}
.portrait,
.name {
display: table-cell;
vertical-align: middle;
padding: 10px;
}
.name h4 {
color: #00654e;
}
.name h5 {
color: #000;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<ul class="row list-unstyled">
<li class="col-xs-12 col-sm-6 col-md-4">
<a class="people-list" href="#">
<span class="portrait">
<img src="http://lorempixel.com/100/100/people" class="img-circle">
</span>
<span class="name">
<h4>Dr. Someone somebody with a really really long name?</h4>
<h5>Criminal Justice Administration</h5>
</span>
</a>
</li>
<li class="col-xs-12 col-sm-6 col-md-4">
<a class="people-list" href="#">
<span class="portrait">
<img src="http://lorempixel.com/100/100/people" class="img-circle">
</span>
<span class="name">
<h4>Dr. Someone somebody with a really really long name?</h4>
<h5>Criminal Justice Administration</h5>
</span>
</a>
</li>
<li class="col-xs-12 col-sm-6 col-md-4">
<a class="people-list" href="#">
<span class="portrait">
<img src="http://lorempixel.com/100/100/people" class="img-circle">
</span>
<span class="name">
<h4>Dr. Someone somebody with a really really long name?</h4>
<h5>Criminal Justice Administration</h5>
</span>
</a>
</li>
<li class="col-xs-12 col-sm-6 col-md-4">
<a class="people-list" href="#">
<span class="portrait">
<img src="http://lorempixel.com/100/100/people" class="img-circle">
</span>
<span class="name">
<h4>Dr. Someone somebody with a really really long name?</h4>
<h5>Criminal Justice Administration</h5>
</span>
</a>
</li>
<li class="col-xs-12 col-sm-6 col-md-4">
<a class="people-list" href="#">
<span class="portrait">
<img src="http://lorempixel.com/100/100/people" class="img-circle">
</span>
<span class="name">
<h4>Dr. Someone somebody with a really really long name?</h4>
<h5>Criminal Justice Administration</h5>
</span>
</a>
</li>
<li class="col-xs-12 col-sm-6 col-md-4">
<a class="people-list" href="#">
<span class="portrait">
<img src="http://lorempixel.com/100/100/people" class="img-circle">
</span>
<span class="name">
<h4>Dr. Someone somebody with a really really long name?</h4>
<h5>Criminal Justice Administration</h5>
</span>
</a>
</li>
<li class="col-xs-12 col-sm-6 col-md-4">
<a class="people-list" href="#">
<span class="portrait">
<img src="http://lorempixel.com/100/100/people" class="img-circle">
</span>
<span class="name">
<h4>Dr. Someone somebody with a really really long name?</h4>
<h5>Criminal Justice Administration</h5>
</span>
</a>
</li>
<li class="col-xs-12 col-sm-6 col-md-4">
<a class="people-list" href="#">
<span class="portrait">
<img src="http://lorempixel.com/100/100/people" class="img-circle">
</span>
<span class="name">
<h4>Dr. Someone somebody with a really really long name?</h4>
<h5>Criminal Justice Administration</h5>
</span>
</a>
</li>
</ul>
</div>

Answer 2

I did some modifications to your code, deleting some heights and unnecessary classes to achieve your goal.
Take a look at the plunkr. Hope it helps!
/* Styles go here */
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;
}
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;
}
ul.people-list span.portrait img{
width:100%;
}
ul.people-list span.name {
border: 0px solid blue;
}
ul.people-list span.name h4 {
margin: 0 0 10px 0;
color: #00654e;
}
ul.people-list span.name h5 {
color: #000;
margin: 10px 0 0 0;
}
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap#*" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link data-require="bootstrap#*" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.5/cosmo/bootstrap.min.css" />
<link data-require="bootstrap#*" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
<script data-require="bootstrap#*" data-semver="3.3.5" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<ul class="row people-list">
<li class="col-xs-12 col-sm-6 col-md-4">
<a href="#">
<div class="row">
<div class="col-xs-3 col-sm-4 col-md-4">
<span class="portrait">
<img src="http://lorempixel.com/500/500/people" class="img-circle" />
</span>
</div>
<div class="col-xs-9 col-sm-8 col-md-8">
<span class="name">
<h4>Dr. Someone somebody with a really really long name?</h4>
<h5>Criminal Justice Administration</h5>
</span>
</div>
</div>
</a>
</li>
</ul>
</body>
</html>