Herramientas útiles de Bootstrap 5

Clases de utilidad/ayudante

Bootstrap 5 tiene muchas clases de utilidad/ayudante que permiten configurar rápidamente el estilo de los elementos sin usar código CSS.

Borde

Añadir o eliminar bordes para elementos utilizando clases de borde:

Ejemplo

<span class="border"></span>
<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-right-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-left-0"></span>
<br>
<span class="border-top"></span>
<span class="border-end"></span>
<span class="border-bottom"></span>
<span class="border-start"></span>

Prueba por tu cuenta

Ancho de borde

Uso .border-1 a .border-5 Cambiar el ancho del borde usando:

Ejemplo

<span class="border border-1"></span>
<span class="border border-2"></span>
<span class="border border-3"></span>
<span class="border border-4"></span>
<span class="border border-5"></span>

Prueba por tu cuenta

Color de borde

Añadir color a los bordes usando cualquier clase de color de borde contextual:

Ejemplo

<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>

Prueba por tu cuenta

Bordes redondeados

Uso redondeado Añadir esquinas redondas a los elementos de clase:

Ejemplo

<span class="rounded"></span>
<span class="rounded-top"></span>
<span class="rounded-end"></span>
<span class="rounded-bottom"></span>
<span class="rounded-start"></span>
<span class="rounded-circle"></span>
<span class="rounded-pill" style="width:130px"></span>
<span class="rounded-0"></span>
<span class="rounded-1"></span>
<span class="rounded-2"></span>
<span class="rounded-3"></span>

Prueba por tu cuenta

Flotación y eliminación de flotación

Uso .float-end Clase para flotar elementos a la derecha, o usar .float-start Flotar a la izquierda, y usar .clearfix Clase para eliminar flotación:

Ejemplo

<div class="clearfix">
  <span class="float-start">Flotar a la izquierda</span>
  <span class="float-end">Flotar a la derecha</span>
</div>

Prueba por tu cuenta

Flotación responsiva

Alinear elementos a la izquierda o a la derecha según el ancho de la pantalla, utilizando clases flotantes responsivas (.float-*-left|right)，donde * es:

  • sm (> = 576px)
  • md (> = 768px)
  • lg (> = 992px)
  • xl (> = 1200px)
  • xxl (> = 1400px)

Ejemplo

<div class="float-sm-end">Flotar a la derecha en pantallas pequeñas o más anchas</div><br>
<div class="float-md-end">Flotar a la derecha en pantallas medianas o más anchas</div><br>
<div class="float-lg-end">Flotar a la derecha en pantallas grandes o más anchas</div><br>
<div class="float-xl-end">Flotar a la derecha en pantallas de gran tamaño o más anchas</div><br>
<div class="float-xxl-end">Flotar a la derecha en pantallas de gran tamaño o más anchas</div><br>
<div class="float-none">No realizar flotación</div>

Prueba por tu cuenta

Alineación central

Uso .mx-auto Elementos centrados (agregar margin-left y margin-right: auto):

Ejemplo

<div class="mx-auto bg-warning" style="width:150px">Centrado</div>

Prueba por tu cuenta

Anchura

Usar clases w-* (.w-25、.w-50、.w-75、.w-100、.mw-auto、.mw-100）Establecer la anchura del elemento：

Ejemplo

<div class="w-25 bg-warning">Anchura 25%</div>
<div class="w-50 bg-warning">Anchura 50%</div>
<div class="w-75 bg-warning">Anchura 75%</div>
<div class="w-100 bg-warning">Anchura 100%</div>
<div class="w-auto bg-warning">Anchura automática</div>
<div class="mw-100 bg-warning">Anchura máxima 100%</div>

Prueba por tu cuenta

Altura

Usar clases h-* (.h-25、.h-50、.h-75、.h-100、.mh-auto、.mh-100）Establecer la altura del elemento：

Ejemplo

<div style="height:200px;background-color:#ddd">
  <div class="h-25 bg-warning">Altura 25%</div>
  <div class="h-50 bg-warning">Altura 50%</div>
  <div class="h-75 bg-warning">Altura 75%</div>
  <div class="h-100 bg-warning">Altura 100%</div>
  <div class="h-auto bg-warning">Altura automática</div>
  <div class="mh-100 bg-warning" style="height:500px">Altura máxima 100%</div>
</div>

Prueba por tu cuenta

Espaciado

Bootstrap 5 tiene una amplia gama de clases útiles de margen y relleno responsive. Son aplicables a todos los puntos de ruptura:

  • xs (<= 576px)
  • sm (> = 576px)
  • md (> = 768px)
  • lg (> = 992px)
  • xl (> = 1200px)
  • xxl (> = 1400px)

El formato de uso de estas clases es:{propiedad}{lados}-{tamaño} usado para xs，así como {propiedad}{lados}-{punto de ruptura}-{tamaño} usado para sm、md、lg、xl y xxl。

propiedad es uno de los siguientes:

  • m - Establecer margen
  • p - Establecer relleno

lados es uno de los siguientes:

  • t - Establecer margen superior o relleno superior
  • b - Establecer margen inferior o relleno inferior
  • s - Establecer margen izquierdo o relleno izquierdo
  • e - Establecer margen derecho o relleno derecho
  • x - Establecer simultáneamente relleno izquierdo y relleno derecho o margen izquierdo y margen derecho
  • y - Establecer simultáneamente relleno superior y relleno inferior o margen superior y margen inferior
  • vacío - Establecer en todos los cuatro lados del elemento margen o relleno

tamaño es uno de los siguientes:

  • 0 - Establecer margen o relleno Establecer 0
  • 1 - Establecer margen o relleno Establecer .25rem
  • 2 - Establecer margen o relleno Establecer .5rem
  • 3 - Establecer margen o relleno Establecer 1rem
  • 4 - Establecer margen o relleno Establecer 1.5rem
  • 5 - Establecer margen o relleno Establecer 3rem
  • auto - Establecer margen Establecer a auto

Ejemplo

<div class="pt-4 bg-warning">Sólo tengo margen interno superior (1.5rem)</div>
<div class="p-5 bg-success">Tengo margen interno (3rem) en todos los lados</div>
<div class="m-5 pb-5 bg-info">Tengo margen externo (3rem) y margen interno inferior (3rem) en todos los lados</div>

Prueba por tu cuenta

Más ejemplos de espaciado

.m-# / m-*-# Margen externo de todos los lados Probar
.mt-# / mt-*-# Margen externo superior Probar
.mb-# / mb-*-# Margen externo inferior Probar
.ms-# / ms-*-# Margen externo izquierdo Probar
.me-# / me-*-# Margen externo derecho Probar
.mx-# / mx-*-# Margen interno izquierdo y derecho Probar
.my-# / my-*-# Margen externo superior e inferior Probar
.p-# / p-*-# Margen interno (relleno) de todos los lados Probar
.pt-# / pt-*-# Margen interno superior Probar
.pb-# / pb-*-# Margen interno inferior Probar
.ps-# / ps-*-# Margen interno izquierdo Probar
.pe-# / pe-*-# Margen interno derecho Probar
.py-# / py-*-# Margen interno superior e inferior Probar
.px-# / px-*-# Margen interno izquierdo y derecho Probar

Puede probar en nuestra Manual de unidades CSS Lea más sobre rem y diferentes unidades de tamaño.

Sombra

Utilice shadow- Agregar sombra a un elemento de clase:

Ejemplo

<div class="shadow-none p-4 mb-4 bg-light">Sin sombra</div>
<div class="shadow-sm p-4 mb-4 bg-white">Sombra pequeña</div>
<div class="shadow p-4 mb-4 bg-white">Sombra predeterminada</div>
<div class="shadow-lg p-4 mb-4 bg-white">Sombra grande</div>

Prueba por tu cuenta

Alineación vertical

Utilice align- Las clases cambian la alineación de los elementos (sólo se aplica a elementos inline, inline-block, inline-table y celdas de tabla):

Ejemplo

<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>

Prueba por tu cuenta

Relación de aspecto

Crear videos o diapositivas responsivos según el ancho del padre.

Añadir .ratio Las clases corresponden a la relación de aspecto que ha elegido .aspect-ratio-* Añadir al elemento padre y agregar contenido incrustado (video o iframe):

Ejemplo

<!-- Relación de aspecto 1:1 -->
<div class="ratio ratio-1x1">
  <iframe src="shanghai.mp4"></iframe>
</div>
<!-- Relación de aspecto 4:3 -->
<div class="ratio ratio-4x3">
  <iframe src="shanghai.mp4"></iframe>
</div>
<!-- Relación de aspecto 16:9 -->
<div class="ratio ratio-16x9">
  <iframe src="shanghai.mp4"></iframe>
</div>
<!-- Relación de aspecto 21:9 -->
<div class="ratio ratio-21x9">
  <iframe src="shanghai.mp4"></iframe>
</div>

Prueba por tu cuenta

Visibilidad

Uso .visible o .invisible Las clases pueden controlar la visibilidad de los elementos:

Notas:Estas clases no modifican el valor de CSS display. Sólo añaden visibility:visible o visibility:hidden。

Ejemplo

<div class="visible">Soy visible.</div>
<div class="invisible">Soy invisible.</div>

Prueba por tu cuenta

Ícono de cerrar

Uso .btn-close Las clases pueden establecer el estilo del ícono de cerrar. Generalmente se usa en cuadros de alerta y modales.

Ejemplo

<button type="button" class="btn-close"></button>

Prueba por tu cuenta

Lector de pantalla

Uso .visually-hidden Las clases pueden ocultar elementos en todos los dispositivos, excepto en los lectores de pantalla:

Ejemplo

<span class="visually-hidden">Será oculto en todas las pantallas excepto en los lectores de pantalla.</span>

Prueba por tu cuenta

Color

Como se describe en el capítulo "Color", a continuación se muestra una lista de todas las clases de texto y fondo de color:

Las clases para colores de texto son:

  • .text-muted
  • .text-primary
  • .text-success
  • .text-info
  • .text-warning
  • .text-danger
  • .text-secondary
  • .text-white
  • .text-dark
  • .text-body（color predeterminado del body / generalmente negro)
  • .text-light

Ejemplo

Prueba por tu cuenta

Las clases de texto contextual también se pueden usar para enlaces:

Ejemplo

Prueba por tu cuenta

También puede usar las clases .text-black-50 o .text-white-50 para agregar 50% de opacidad a texto negro o blanco:

Ejemplo

Prueba por tu cuenta

Color de fondo

Las clases para colores de fondo son:

  • .bg-primary
  • .bg-success
  • .bg-info
  • .bg-warning
  • .bg-danger
  • .bg-secondary
  • .bg-dark
  • .bg-light

Tenga en cuenta que el color de fondo no establecerá el color del texto, por lo que en algunos casos, necesitará combinarlos con .text-* Clases utilizadas juntas.

Ejemplo

Prueba por tu cuenta