Utilities de Bootstrap 4: Bordes

Este tiempo estuvimos usando colores y espacios sin embargo bootstrap ya incluye una forma
de agregar colores y espacios gracias a clase borramos todo el código del main de la siguiente
manera:

Solo nos quedamos con este estilo, previsualizamos y todo iria quedando asi:

Queda en html básico, ahora aprenderemos a crear bordes con bootstrap vamos a tomar de
ejemplo la columna que esta en el medio, primero vamos a quitarle el orden que tienen para
que se queden con orden normal quedando asi

Ahora recargo:
Voy a tomar la columna 2 y a la columna 2 voy agregarle una clase entendiendo que esta clase
no es solo para columna si no para cualquier clase html le agrego la clase border de la
siguiente manera:

Guardo y cargo: y se visualizaría de la siguiente manera:

Automaticamente le añade un borde al elemento, podemos añadir un borde solo a un lado,

izquierda, arriba, abajo o derecha.

Si queremos asignar bordes solo por lados realizamos la siguiente configuración:

Le estamos asignando a la primera columna border en el lado superior, borde total a la
segunda columna y borde inferior en la tercera columna quedando así cuando pre
visualicemos:

Asi mismo podemos darle borde a elementos que no sean columnas. Por ejemplo a nombre
del sitio voy asignarle que tenga clase border es decir a h1 le voy asignar que tenga la clase
border de la siguiente manera:

Y cuando pre visualicemos se mostraría de la siguiente manera:

Tambien existen clases para quitar bordes: para el ejemplo si queremos quitar bordes
escribimos el código border-top-0 de esta manera estamos quitando por ejemplo solamente el
borde superior.

Si previsualizamos quedaría de la siguiente manera: sin borde en la parte superior

Podemos agregar colores a los bordes: trabajamos con border-primary

Si previsualizo verifico que me asigna el color de borde azul a la etiqueta que es el color por
defecto de bootstrap
Ahora vamos a eliminar todo el contenido del cuerpo html quedando de la siguiente manera:

Primero configuramos el main: Separamos las filas y columnas a razón de 20 px en margen

inferior.

Ahora agregamos una fila, una columna y 9 parrafos con su respectivo contenido como se
visualiza en la siguiente pantalla:
Si previsualizamos se veria de la siguiente manera:
Verificar como lo coloque sin container sale demasiado pegado a la izquierda para ello le
agrego el container:

Se visualizaría de la siguiente manera:

Primero vamos a agregarle a todos los párrafos la clase borde de la siguiente manera:
Previsualizo y todo quedaría de la siguiente manera:
Todos los párrafos tienen borde pero voy a cambiar el color de todos los bordes de la siguiente
manera:

Recargamos y todos los párrafos ahora tienen color de borde:

Ahora podemos también agregar bordes redondeados

Previsualizamos y verificamos que el borde del primer párrafo en sus esquinas esta
redondeado

Podemos redondear la parte solamente de arriba por ejemplo:

Si previsualizamos verificamos como esta redondeado en las esquinas superiores el tercer

párrafo y las esquinas inferiores están normal
Tambien hay redondeo circulo, pero en este caso hay que entender que deberá existir un
ancho y alto consistente:

No es la mejor practica pero podemos añadir ancho y alto como estilo en la misma línea solo
para la prueba:

Quedando todo de la siguiente manera:

ELEMENTOS FLOTANTES Y CLEARFIX

Usar la porpiedad float left y float right para poner los elementos a flotar a la izquierda a lka
derecha y como usar la clase clearflix para arreglar un error cuando usamos float.

Primero eliminamos todos los párrafos creados:

Dentro de la col agregamos la clase padre y dos clases hijo con su texto correspondiente tal y
como se muestra a continuación:

Ahora me voy al main.css agregamos las propiedades para la clase padre y la clase hijo
A padre le damos color azul en fondo y 20 pixeles en padding y a hijo le damos padding de 50
px, 200 px de ancho y fondo negro, si previsualizamos se veria de la siguiente manera:

Verifico los dos cuadros:

Modificamos la clase hijo en el main.css

Le añadimos color al texto y separamos a los hijos entre si en 20px. Si previsualizamos
quedaría asi:

Tenemos dos divs contenidos en un elemento padre de fondo azul, podemos hacer que este
div flote a la izquierda y el otro a la derecha eso lo hacemos con bostrap de la siguiente
manera: izquierda start y end derecha
Con esto podemos hacer que los elementos floten de una manera muy fácil, el problema ahora
es que el padre no ocupa el ancho completo esto debido a que al poner a los hijos a flotar los
elementos dejan de ser parte del flujo natural de la pagina web y por ende el elemento padre
no sabe cuales son sus elementos hijos por esta razón existe una clase clearfix para reparar
este error:

Si previsualizamos ya vemos el error corregido

Podemos usar las clases de float de manera repsonsiva puedo hacer que las dos floten al
mismo lado es decir a la derecha con end.

Si previsualizamos

Vamos a darle los ajustes responsivos de la siguiente manera:

En tamaño medio el hijo izquierdo se ubica a la derecha y a partir de tamaño largo se ubica a la
izquierda.
COLORES EN BOOSTRAP

Nos permite agregar colores de manera sencilla de la siguiente manera:

Nos vamos a main.css y borramos el formato asignado a la clase padre e hijo de tal forma que
quede asi:

En el index modificamos nuestro código:

Ahora agrego un párrafo y la clase text-primary y verificamos que dicha clase al texto estatico
le asigna color
Como se puede verificar al momento de recargar:

Agregamos para todos los colores primarios

Recargamos
Tambien podemos añadir color a los enlaces, para ello vamos añadir otra row y otra col

Añado los textos pero ahora como vínculos

Recargo y veo como los textos ahora tienen el formato de vinculo con sus colores
correspondientes:
Automaticamente bootstrap añade el estado over que es cuando pasamos el puntero del
mouse sobre el texto este cambia de color.

Tambien podemos añadir estilos pero no de color si no de fondo para ello copiamos toda la
row recientemente creada:

Si previsualizamos
Por ejemplo al texto que no se visualizaba en la parte superior podemos cambiarle el color de
fondo:

Si previsualizamos
DISPLAY

Podemos usar display de css podemos aplicarlos con clse de bootstrap

Si recargamos vemos que y no aparece el contenido de display none debido a que el display
fue configurado

Podemos hacer los tipos de display de manera responsiva