Bootstrap 3 – Botones de enlace que llenan columnas de cuadrícula

Intento usar Bootstrap para acelerar rápidamente un pequeño sitio interno y tengo algunos problemas con un diseño específico en su página de inicio.

Tengo dos filas y la primera fila está llena de anclas de enlace disfrazadas de botones. Quiero que todos tengan el mismo ancho y alto, que envuelvan sus contenidos y que tengan un texto strong ‘título’ con texto de resumen, todo el texto alineado verticalmente en el medio del botón.

He logrado botones de ancho fijo y ajuste de palabras, pero no sé dónde ir desde aquí para que tengan la misma altura y luego, por supuesto, alinear verticalmente ese texto en el medio. Estoy seguro de que el elemento de salto de línea tampoco está ayudando.

HTML

  

CSS

 .btn-fill { width: 100%; white-space: normal; } 

Tengo un ejemplo de Bootply aquí

Puede usar .btn-toolbar con .btn-group-justified para hacerlo fácilmente (la representación difiere un poco):

enter image description here

  
 .btn-group-fill-height .btn { white-space: normal; } 

Bootply

¿Por qué no agregar “text-center” a la clase de anclaje y hacer algo como esto?

 .btn { height: 170px; } 

Por el problema de altura que te encuentras. Ese es un número arbitrario que escogí, pero funcionó cuando lo marqué en tu ejemplo.

Espero que ayude.