Clases de borde en Bootstrap 5 | Explicado
En este artículo obtienes un conocimiento detallado sobre las clases de Bootstrap 5 para
- Agregar borde
- Eliminación del borde
- Colores de borde
- Ancho del borde
- Tamaños de borde
- Tamaños de radio
Clases de borde en Bootstrap 5
En Bootstrap 5, los bordes se crean agregando .borde Clase a cualquier etiqueta de div o imagen o cualquier forma o textea.
Clases para aplicar el borde
Bootstrap 5 proporciona un par de clases para especificar el borde a cualquier elemento HTML que se explique a continuación:
Borde
.borde La clase se usa para aplicar bordes en los cuatro lados de la caja.
Código
Clases fronterizas
Lorem ipsum dolor sit amet consectetur adipiscing elit. Excepturi ipsum culpa neque comodi modi eaque?
Así es como creas fronteras para los cuatro lados.
Top de borde
.fronterizo La clase se usa para aplicar el borde en el lado superior de la caja.
Código
Clases fronterizas
Lorem ipsum dolor sit amet consectetur adipiscing elit. Excepturi ipsum culpa neque comodi modi eaque?
Así es como creas un borde para el lado superior.
Fondo del borde
.borde La clase se usa para aplicar el borde en la parte inferior de la caja.
Código
Clases fronterizas
Lorem ipsum dolor sit amet consectetur adipiscing elit. Excepturi ipsum culpa neque comodi modi eaque?
Así es como creas un borde para el lado inferior.
Inicio fronterizo
.border La clase se usa para aplicar el borde en el lado izquierdo de la caja.
Código
Clases fronterizas
Lorem ipsum dolor sit amet consectetur adipiscing elit. Excepturi ipsum culpa neque comodi modi eaque?
Así es como creas un borde para el lado izquierdo.
Extremo fronterizo
.final de la frontera La clase se usa para aplicar el borde en el lado derecho de la caja.
Código
Clases fronterizas
Lorem ipsum dolor sit amet consectetur adipiscing elit. Excepturi ipsum culpa neque comodi modi eaque?
Así es como creas un borde para el lado derecho.
Clases para eliminar el borde
Para quitar el borde de cualquier lado, solo agregue -0 a cualquier clase de agregar fronteras
Desde arriba
Para quitar el borde de la parte superior agregar .fronterizo-0 con .borde clase.
Código
Clases fronterizas
Lorem ipsum dolor sit amet consectetur adipiscing elit. Excepturi ipsum culpa neque comodi modi eaque?
Así es como eliminas el borde de la parte superior.
Desde la parte inferior
Para quitar el borde de la parte inferior agregar .Border-Bottom-0 con .borde clase.
Código
Clases fronterizas
Lorem ipsum dolor sit amet consectetur adipiscing elit. Excepturi ipsum culpa neque comodi modi eaque?
Así es como eliminas el borde de la parte inferior.
Desde la izquierda
Para quitar el borde de la izquierda agregar .border-start-0 con .borde clase.
Código
Clases fronterizas
Lorem ipsum dolor sit amet consectetur adipiscing elit. Excepturi ipsum culpa neque comodi modi eaque?
Así es como eliminas el borde del lado izquierdo.
De la derecha
Para eliminar el borde de la derecha .fin de borde-0 con .borde clase.
Código
Clases fronterizas
Lorem ipsum dolor sit amet consectetur adipiscing elit. Excepturi ipsum culpa neque comodi modi eaque?
Así es como eliminas el borde del lado derecho.
Clases de color de borde
Para agregar colores de borde solo agregar .border-primary/info/éxito/peligro/advertencia/oscuro con .borde clase.
Código
Clases fronterizas
Así es como le das color a tus bordes.
Clases de ancho fronterizo
Para dar espesor a su frontera .borde-1/2/3/4/5 clase con .borde clase.
Código
Clases fronterizas
Así es como das grosor a tu borde.
Radio fronterizo
Para especificar el radio de la frontera, use .redondeado, .Top/extremo/fondo/inicio/círculo/píldora clases.
Código
Clases fronterizas
Producción
Para crear círculo redondeado y píldora redondeada:
Código
Clases fronterizas
Así es como especifica el radio fronterizo.
Tamaños de radio
Para especificar el tamaño de radio del borde, simplemente agregue .redondeado-0/1/2/3 clases.
Código
Clases fronterizas
Producción
Así es como especifica el tamaño del radio fronterizo.
Conclusión
Para dar un borde a cualquier div o elemento agregue un .borde clase. Para agregar un borde de un lado, agregue .Topa de borde/fondo/final/inicio clase junto con .borde clase y eliminar el borde de un lado solo agregue -0. Para especificar el color del borde, agregar .border-primario/éxito/peligro/info/advertencia/oscuro/luz clase.
Para dar grosor al borde, agregue .borde-1/2/3/4/5, Para especificar el radio de borde, agregar .redondeado, .Top/fondo/final/inicio/círculo/píldora clase. Para especificar el tamaño del radio de borde, agregar .redondeado-0/1/2/3 clase.