Lista de definicion vertical
.columna-datos{
border-left: 1px solid #aaa;
border-right: 1px solid #aaa;
font-family:'PT Sans Narrow';
}
.columna-datos dt,
.columna-datos dd{
margin-left:12.5%;
margin-right:12.5%;
}
.columna-datos dt{
font-size:2rem;
font-weight:normal;
}
.columna-datos dd{
color:tomato;
border-bottom:1px solid #aaa;
margin-bottom:0.5rem;
letter-spacing:0.12rem;
}
.columna-datos dd:last-child{
border-bottom:none;
}
.columna-datos .entero{
font-size:3rem;
}
.columna-datos .decimal{
font-size:2.25rem;
}
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>Dolorem dignissimos iste</h1>
</div>
<div class="col-xs-10">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt officia suscipit vitae error deleniti iure dolores placeat tempora cum rem in, eaque sed modi magnam aliquam odio distinctio eligendi est. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum non et, ullam atque possimus fugit suscipit dolorem beatae porro reprehenderit. Magni nostrum repellendus, mollitia? Dolorem dignissimos iste in aperiam numquam.</p>
<p class="lead">Dí NO a los item vacíos con clase divider!!! Utiliza bordes.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur ipsa accusamus ut in laboriosam placeat, iste exercitationem dolores sequi modi adipisci labore ea ipsum harum dignissimos. Facere consequuntur ratione officiis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque libero sit atque molestiae minus placeat vero, possimus sed voluptatum numquam hic sequi soluta dolorum quis aspernatur voluptas nihil mollitia maiores.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur ipsa accusamus ut in laboriosam placeat, iste exercitationem dolores sequi modi adipisci labore ea ipsum harum dignissimos. Facere consequuntur ratione officiis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque libero sit atque molestiae minus placeat vero, possimus sed voluptatum numquam hic sequi soluta dolorum quis aspernatur voluptas nihil mollitia maiores.</p>
</div>
<div class="col-xs-2">
<dl class="columna-datos">
<dt>China</dt>
<dd><span class="entero">50,</span><span class="decimal">1</span></dd>
<dt>India</dt>
<dd><span class="entero">17,</span><span class="decimal">5</span></dd>
<dt>EEUU</dt>
<dd><span class="entero">13,</span><span class="decimal">2</span></dd>
<dt>Turquía</dt>
<dd><span class="entero">11,</span><span class="decimal">3</span></dd>
<dt>Egipto</dt>
<dd><span class="entero">8,</span><span class="decimal">6</span></dd>
</dl>
</div>
</div>
</div>
Lista de definicion vertical
Estilo en columna para lista de definición vertical a una columna. De inspiracion de National Geographic. Dependencia: Bootstrap 3 + Google Fonts para 'PT Sans Narrow'
A Pen by Aitor Alejandro on CodePen.