Aplicar estilos CSS a listas y tablas con Bootstrap 4

Hacer resaltar nuestras listas o personalizar tablas de información es más sencillo, bastará con seleccionar el grupo de datos y aplicar alguno de los estilos o formatos incorporados en las opciones del editor.

1 Dar formato a listas

Cuando generamos una lista tenemos contamos con 2 formatos estándar, en orden con numeración y sin orden con viñetas discos.

Lista ordenada

  1. Nullam id dolor id nibh ultricies vehicula ut id elit.
  2. Nullam id dolor id nibh ultricies vehicula ut id elit.
  3. Nullam id dolor id nibh ultricies vehicula ut id elit.
  4. Nullam id dolor id nibh ultricies vehicula ut id elit.

Lista sin orden

  • Nullam id dolor id nibh ultricies vehicula ut id elit.
  • Nullam id dolor id nibh ultricies vehicula ut id elit.
  • Nullam id dolor id nibh ultricies vehicula ut id elit.
  • Nullam id dolor id nibh ultricies vehicula ut id elit.

Y para modificar estas listas, existen 2 opciones:

Lista sin estilo.
Nos permite limpiar el formato de las listas con una clase css (class=“unstyled”), haciendo que la lista aparezca sin números o viñetas.

  • Item id dolor id nibh ultricies vehicula ut id elit.
  • Item id dolor id nibh ultricies vehicula ut id elit.
  • Item id dolor id nibh ultricies vehicula ut id elit.
  • Item id dolor id nibh ultricies vehicula ut id elit.

Lista en linea.
Aplica un formato horizontal con una clase css (class=“inline”), donde los elementos se alinean en el orden de lectura izquierda a derecha.

Para crear una lista en linea se deben seguir estos pasos:

  1. Crear una lista
  2. Seleccionar toda la lista y aplicar “Lista horizontal”
  3. Finalmente, seleccionar toda la lista nuevamente y aplicar “Objeto de lista horizontal”

Esto dará un formato parecido a este:

  • Item 1
  • Item 2
  • Item 3
  • Item 4

2 Dar formato a tablas

Similar a las listas, existen varias posibilidades para personalizar las tablas de información, dar color, cambiar el tamaño, y el comportamiento con el mouse respetando lo establecido por bootstrap.

Después de crear una tabla sigue estos pasos para aplicar estilos:

Crea una tabla con los datos necesarios

EncabezadoCaracteristica 1Caracteristica 2Caracteristica 3Caracteristica 4
Item 1dato itemdato itemdato itemdato item
Item 2dato itemdato itemdato itemdato item

 

Selecciona y aplica el estilo: “Tabla”

EncabezadoCaracteristica 1Caracteristica 2Caracteristica 3Caracteristica 4
Item 1dato itemdato itemdato itemdato item
Item 2dato itemdato itemdato itemdato item

 

Si deseas presentar una tabla en color negro, Aplica también el estilo “Tabla oscura”

EncabezadoCaracteristica 1Caracteristica 2Caracteristica 3Caracteristica 4
Item 1dato itemdato itemdato itemdato item
Item 2dato itemdato itemdato itemdato item

 

Si deseas diferenciar los renglones de información, selecciona la opción “Tabla rayada”

EncabezadoCaracteristica 1Caracteristica 2Caracteristica 3Caracteristica 4
Item 1dato itemdato itemdato itemdato item
Item 2dato itemdato itemdato itemdato item

 

También puedes añadir bordes con el estilo: Tabla Bordeada

EncabezadoCaracteristica 1Caracteristica 2Caracteristica 3Caracteristica 4
Item 1dato itemdato itemdato itemdato item
Item 2dato itemdato itemdato itemdato item

 

Y si deseas resaltar la información durante el movimiento del cursor, aplica la opción “Reacción al cursor”

EncabezadoCaracteristica 1Caracteristica 2Caracteristica 3Caracteristica 4
Item 1dato itemdato itemdato itemdato item
Item 2dato itemdato itemdato itemdato item

 

Avanzado:

Si deseas reducir el tamaño de tu tabla, selecciona toda la tabla y aplica el formato “Tabla pequeña”.

EncabezadoCaracteristica 1Caracteristica 2Caracteristica 3Caracteristica 4
Item 1dato itemdato itemdato itemdato item
Item 2dato itemdato itemdato itemdato item

 

Si deseas hacer tu tabla responsiva, selecciona toda la tabla y aplica el formato “Tabla Responsiva”.

EncabezadoCaracteristica 1Caracteristica 2Caracteristica 3Caracteristica 4
Item 1dato itemdato itemdato itemdato item
Item 2dato itemdato itemdato itemdato item