Bordes, padding y margin en Bootstrap 5
En el mundo del diseño web, los detalles marcan la diferencia y son clave para crear una experiencia de usuario excepcional. Uno de los aspectos fundamentales para lograr un diseño estético y funcional es el manejo de los bordes, el padding y el margin de los elementos. En Bootstrap 5 disponemos de numerosas clases que permiten controlar estos elementos de manera sencilla y eficiente.
En esta sección, veremos cómo utilizar las clases de Bootstrap 5 para dar estilo a los bordes, padding y margin de los elementos HTML. Aprenderás a aplicar bordes con diferentes estilos, y a ajustar el padding y margin de manera precisa.
12. Bordes, padding y margin en Bootstrap 5
Los bordes son elementos que rodean y delimitan el contenido de un elemento, proporcionando una estructura visual y ayudando a definir su forma. Con Bootstrap 5, puedes aplicar diferentes estilos de bordes, como bordes redondeados, bordes con diferentes grosores y bordes de colores personalizados, para crear un diseño más atractivo y moderno.
El padding determina el espacio entre el contenido y el borde del elemento, mientras que el margin controla el espacio entre el elemento y los demás elementos que lo rodean. Con las clases de Bootstrap 5, puedes ajustar fácilmente el padding y margin para lograr una distribución armoniosa del contenido en tu sitio web.
12. 1. Bordes en Bootstrap 5
En Bootstrap 5, puedes agregar bordes a los elementos utilizando diferentes clases. Puedes aplicar estas clases directamente en las etiquetas HTML o combinarlas con otras clases de Bootstrap para obtener diseños más complejos y atractivos.
En primer lugar, para agregar un borde, debemos incluir la clase .border. Después podemos combinarla con el resto de clases para redondear sus esquinas, cambiar su grosor o su color, entre otras características. Veamos las clases más importantes.
| Clase | Descripción |
|---|---|
.rounded | Agrega bordes redondeados a todos los lados del elemento. |
.rounded-top | Agrega bordes redondeados solo a la parte superior del elemento. |
.rounded-end | Agrega bordes redondeados solo al extremo derecho del elemento (depende de la dirección del texto). |
.rounded-bottom | Agrega bordes redondeados solo a la parte inferior del elemento. |
.rounded-start | Agrega bordes redondeados solo al extremo izquierdo del elemento (depende de la dirección del texto). |
.rounded-circle | Crea un borde redondeado para hacer que el elemento tenga forma de círculo. |
.rounded-0 | Elimina los bordes redondeados para que el elemento tenga esquinas cuadradas. |
.rounded-* | Agrega esquina redondeada. El tamaño va de .rounded-1 (menor redondeo) a rounded 3. |
.border | Agrega un borde al elemento. |
.border-0 | Elimina el borde del elemento. |
.border-* | Agrega un borde de grosor 1, 2, 3, 4 o 5. Siendo .border-1 el grosor menor. |
.border-top | Agrega un borde solo en la parte superior del elemento. |
.border-end | Agrega un borde solo en el extremo derecho del elemento (depende de la dirección del texto). |
.border-bottom | Agrega un borde solo en la parte inferior del elemento. |
.border-start | Agrega un borde solo en el extremo izquierdo del elemento (depende de la dirección del texto). |
.border-primary | Agrega un borde de color primario al elemento. |
.border-secondary | Agrega un borde de color secundario al elemento. |
.border-success | Agrega un borde de color de éxito al elemento. |
.border-danger | Agrega un borde de color de peligro o error al elemento. |
.border-warning | Agrega un borde de color de advertencia al elemento. |
.border-info | Agrega un borde de color de información al elemento. |
.border-light | Agrega un borde de color claro al elemento. |
.border-dark | Agrega un borde de color oscuro al elemento. |
.border-white | Agrega un borde de color blanco al elemento. |
12.2. Padding y margin en Bootstrap 5
A continuación, se muestra una tabla con las clases más importantes de Bootstrap 5 para el padding y el margin:
| Clase | Descripción |
|---|---|
.p-0 .py-0 .px-0 | Aplica un padding de 0 (sin padding) a todos los lados (.p-0), solo verticalmente (.py-0) o solo horizontalmente (.px-0). |
.p-1 .py-1 .px-1 | Aplica un padding pequeño a todos los lados (.p-1), solo verticalmente (.py-1) o solo horizontalmente (.px-1). |
.p-2 .py-2 .px-2 | Aplica un padding mediano a todos los lados (.p-2), solo verticalmente (.py-2) o solo horizontalmente (.px-2). |
.p-3 .py-3 .px-3 | Aplica un padding grande a todos los lados (.p-3), solo verticalmente (.py-3) o solo horizontalmente (.px-3). |
.p-4 .py-4 .px-4 | Aplica un padding extra grande a todos los lados (.p-4), solo verticalmente (.py-4) o solo horizontalmente (.px-4). |
.p-5 .py-5 .px-5 | Aplica un padding gigante a todos los lados (.p-5), solo verticalmente (.py-5) o solo horizontalmente (.px-5). |
.m-0 .my-0 .mx-0 | Aplica un margin de 0 (sin margen) a todos los lados (.m-0), solo verticalmente (.my-0) o solo horizontalmente (.mx-0). |
.m-1 .my-1 .mx-1 | Aplica un margin pequeño a todos los lados (.m-1), solo verticalmente (.my-1) o solo horizontalmente (.mx-1). |
.m-2 .my-2 .mx-2 | Aplica un margin mediano a todos los lados (.m-2), solo verticalmente (.my-2) o solo horizontalmente (.mx-2). |
.m-3 .my-3 .mx-3 | Aplica un margin grande a todos los lados (.m-3), solo verticalmente (.my-3) o solo horizontalmente (.mx-3). |
.m-4 .my-4 .mx-4 | Aplica un margin extra grande a todos los lados (.m-4), solo verticalmente (.my-4) o solo horizontalmente (.mx-4). |
.m-5 .my-5 .mx-5 | Aplica un margin gigante a todos los lados (.m-5), solo verticalmente (.my-5) o solo horizontalmente (.mx-5). |
.m-t .p-t | Aplica margin-top o padding-top, dependiendo de la propiedad que utilices (.m para margin y .p para padding). |
.m-b .p-b | Aplica margin-bottom o padding-bottom, dependiendo de la propiedad que utilices (.m-b para margin y .p-b para padding). |
.m-s .p-s | Aplica margin-left o un padding-left. |
.m-e .p-e | Aplica margin-right o un padding-right. |
.m-x .p-x | Aplica tanto margin-left como margin-right o padding-right y padding-left. |
.m-y .p-y | Aplica tanto margin-top y margin-bottom como padding-top y padding-bottom. |
.m-auto, .p-auto | Aplica margin o padding en los cuatro lados del elemento y establece el valor «auto» para la propiedad, lo que permite centrar horizontalmente el elemento en el contenedor. |
En la siguiente sección del tutorial veremos los componentes de Bootstrap.