Artículos
Bootstrap

Listas de definición horizontales en Bootstrap

08/Ago/2015

Cuando manejamos una lista de definición en HTML esta se muestra en pantalla con el término en una línea y la definición en la siguiente línea. Mediante Bootstrap tenemos la posibilidad de crear listas de definición horizontales.

De esta manera las listas de definición hotizontales en Bootstrap nos mostrarán el término seguido de la descripción en una misma línea. Y todo centrado dentro de la página. Algo parecido a:

Término 1. Definición 1.
Término 2. Definición 2.
Término 3. Definición 3.
…
Término N. Definición N.

Lo primero que tenemos que hacer para poder crear listas de definición horizontales en Bootstrap es crear la lista de definiciones mediante un elemento dl.

...

Luego cada uno de los términos y descripciones utilizaremos los elementos dt y dd respectivamente.

Termino
Descripción

Con esta información podremos crear nuestra primera lista de definiciones:

Pizpireta
Dicho de una mujer: Viva, pronta y aguda.
Pulular
Dicho de las personas, animales o cosas: Abundar y bullir en un lugar.
Concupiscencia
En la moral católica, deseo de bienes terrenos y, en especial, apetito desordenado de placeres deshonestos.

Ahora para poder obtener listas de definición horizontales en Bootstrap vamos a utilizar la clase "dl-horizontal" sobre el elemento dl.

Pizpireta
Dicho de una mujer: Viva, pronta y aguda.
Pulular
Dicho de las personas, animales o cosas: Abundar y bullir en un lugar.
Concupiscencia
En la moral católica, deseo de bienes terrenos y, en especial, apetito desordenado de placeres deshonestos.

De esta forma ya habremos conseguido tener listas de definición horizontales en Bootstrap.

Código Fuente

Descárgate el código fuente de Listas de definición horizontales en Bootstrap
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Vídeos sobre Bootstrap

Disfruta también de nuestros artículos sobre Bootstrap en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test Bootstrap

¿Te atreves a probar tus habilidades y conocimiento en Bootstrap con nuestro test?

Test Bootstrap
Suscribir
Notificar de
guest
1 Comentario
Recientes
Anteriores Más votados
Opiniones integradas
Ver todos los comentarios