CSS

Propiedades

display

Especifica el comportamiento de un elemento cuando se muestra. Puede ser <inline> si continúa el flujo normal, <block> si lo muestra como un bloque (se coloca en una línea inferior). Para más valores, consultar la página de w3schools Display en W3Schools

margin-left

Establece el margen izquierdo

margin-right

Establece el margen derecho

width

Establece el ancho de un elemento

height

Establece la altura de un elemento

color

Establece el color de texto

Clases

La pantalla se divide en 12 columnas. Con la clase determinamos cuantas columnas ocupa cada elemento

.col-1
El elemento ocupa una sola columna de 12 (8.33% de la pantalla)
.col-2
El elemento ocupa dos columnas de 12 (16.66% de la pantalla)
.col-3
El elemento ocupa tres columnas de 12 (25% del ancho de la pantalla)
.col-4
El elemento ocupa cuatro columnas de 12 (33.33% del ancho de la pantalla)
.col-5
El elemento ocupa cinco columnas de 12 (41.66% del ancho de la pantalla)
.col-6
El elemento ocupa seis columnas de 12 (50% del ancho de la pantalla)
.col-7
El elemento ocupa siete columnas de 12 (58.33% del ancho de la pantalla)
.col-8
El elemento ocupa ocho columnas de 12 (66.66% del ancho de la pantalla)
.col-9
El elemento ocupa nueve columnas de 12 (75% del ancho de la pantalla)
.col-10
El elemento ocupa 10 columnas de 12 (83.33% del ancho de la pantalla)
.col-11
El elemento ocupa 11 columnas de 12 (91.66% del ancho de la pantalla)
.col-12
El elemento ocupa 12 columnas de 12 (100% del ancho de la pantalla)
.small
El elemento ocupa cuatros columnas de 12 pero necesito reducir un poco su tamaño, por lo que cambio ligeramente el ancho