Utilidades con Bootstrap 4

Bootstrap 4 tiene muchas clases de utilidad / ayuda para diseñar rápidamente elementos sin usar ningún código CSS.

Bordes

Usa las clases .border para agregar o quitar bordes de un elemento.

Border Bootstrap 4

Ejm

<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>

Color de borde

Agregue un color al borde con cualquiera de las clases de color de borde contextual.

Color de borde Boostrap 4

Ejm

<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>

Radio de borde (Border Radius)

Agrega esquinas redondeadas a un elemento con las clases redondeadas.

Border Radius Bootstrap 4

Ejm

<span class="rounded-sm"></span>
<span class="rounded"></span>
<span class="rounded-lg"></span>
<span class="rounded-top"></span>
<span class="rounded-right"></span>
<span class="rounded-bottom"></span>
<span class="rounded-left"></span>
<span class="rounded-circle"></span>
<span class="rounded-0"></span>

Float and Clearfix

Haz flotar un elemento hacia la derecha con la clase .float-right o hacia la izquierda con .float-left, y borra los floats con la clase .clearfix.

Ejm

Float y Clearfix Boostrap 4

El código es el siguiente:

<div class="clearfix">
  <span class="float-left">Float left</span>
  <span class="float-right">Float right</span>
</div>

Float Responsive

Haz un float a un elemento hacia la izquierda o hacia la derecha según el ancho de la pantalla, con las clases flotantes receptivas (.float – * – left | right – where * is sm (> = 576px), md (> = 768px), lg (> = 992 px) o xl (> = 1200 px)).

Ejm

Float Boostrap 4

<div class="float-sm-right">Float right on small screens or wider</div><br>
<div class="float-md-right">Float right on medium screens or wider</div><br>
<div class="float-lg-right">Float right on large screens or wider</div><br>
<div class="float-xl-right">Float right on extra large screens or wider</div><br>
<div class="float-none">Float none</div>

Alinear al centro

Centra un elemento con la clase .mx-auto (agrega margin-left y margin-right: auto):

Ejm

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

Width (Anchura)

Establece el ancho de un elemento con las clases w- * (.w-25, .w-50, .w-75, .w-100, .mw-100):

Ejm

Width Bootstrap 4

<div class="w-25 bg-warning">Width 25%</div>
<div class="w-50 bg-warning">Width 50%</div>
<div class="w-75 bg-warning">Width 75%</div>
<div class="w-100 bg-warning">Width 100%</div>
<div class="mw-100 bg-warning">Max Width 100%</div>

Height (Altura)

Establece la altura de un elemento con las clases h- * (.h-25, .h-50, .h-75, .h-100, .mh-100).

Ejm

Height Bootstrap 4

<div style="height:200px;background-color:#ddd">
  <div class="h-25 bg-warning">Height 25%</div>
  <div class="h-50 bg-warning">Height 50%</div>
  <div class="h-75 bg-warning">Height 75%</div>
  <div class="h-100 bg-warning">Height 100%</div>
  <div class="mh-100 bg-warning" style="height:500px">Max Height 100%</div>
</div>

Espaciado

Bootstrap 4 tiene una amplia gama de márgenes de respuesta y clases de utilidad de relleno. Funcionan para todos los puntos de interrupción: xs (<= 576px), sm (> = 576px), md (> = 768px), lg (> = 992px) o xl (> = 1200px)):

Las clases se usan en el formato: {propiedad} {lados} – {tamaño} para xs y {propiedad} {lados} – {punto de interrupción} – {tamaño} para sm, md, lg y xl.

Donde la propiedad es uno de:

  • m – sets margin
  • p – sets padding

Donde los lados es uno de:

  • t – sets margin-top or padding-top
  • b – sets margin-bottom or padding-bottom
  • l – sets margin-left or padding-left
  • r – sets margin-right or padding-right
  • x – sets both padding-left and padding-right or margin-left and margin-right
  • y – sets both padding-top and padding-bottom or margin-top and margin-bottom
  • blank – sets a margin or padding on all 4 sides of the element

Donde el tamaño es uno de:

  • 0 – sets margin or padding to 0
  • 1 – sets margin or padding to .25rem (4px if font-size is 16px)
  • 2 – sets margin or padding to .5rem (8px if font-size is 16px)
  • 3 – sets margin or padding to 1rem (16px if font-size is 16px)
  • 4 – sets margin or padding to 1.5rem (24px if font-size is 16px)
  • 5 – sets margin or padding to 3rem (48px if font-size is 16px)
  • auto – sets margin to auto

Nota: los márgenes también pueden ser negativos, agregando una “n” delante del tamaño:

  • n1 – sets margin to -.25rem (-4px if font-size is 16px)
  • n2 – sets margin to -.5rem (-8px if font-size is 16px)
  • n3 – sets margin to -1rem (-16px if font-size is 16px)
  • n4 – sets margin to -1.5rem (-24px if font-size is 16px)
  • n5 – sets margin to -3rem (-48px if font-size is 16px)

Sombras

Usa las clases .shadows para ensombrecer un elemento.

 

Sombras Bootstrap 4

Ejm

<div class="shadow-none p-4 mb-4 bg-light">No shadow</div>
<div class="shadow-sm p-4 mb-4 bg-white">Small shadow</div>
<div class="shadow p-4 mb-4 bg-white">Default shadow</div>
<div class="shadow-lg p-4 mb-4 bg-white">Large shadow</div>

Alineación vertical

Utiliza las clases de alineación para cambiar la alineación de los elementos (solo funciona en elementos en línea, bloque en línea, tabla en línea y celda de tabla).

Ejm

<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>

Embebidos Responsive

Cree incrustaciones de video o presentación de diapositivas Responsive en función del ancho del elemento primario.

Agrega el elemento .embed-responsive a cualquier elemento incrustado (como <iframe> o <video>) en un elemento padre con .embed-responsive y una relación de aspecto de tu elección.

Ejm

<!-- 21:9 aspect ratio -->
<div class="embed-responsive embed-responsive-21by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 1:1 aspect ratio -->
<div class="embed-responsive embed-responsive-1by1">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

Visibilidad

Use las clases .visible o .invisible para controlar la visibilidad de los elementos.

Nota: Estas clases no cambian el valor de visualización de CSS. Solo agregan visibilidad: visible o visibilidad: oculta:

Ejm

<div class="visible">I am visible</div>
<div class="invisible">I am invisible</div>

Posición

Usa la clase .fixed-top para hacer que cualquier elemento sea fijo / permanezca en la parte superior de la página.

Ejm

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
  ...
</nav>

Usa la clase .fixed-bottom para hacer que cualquier elemento sea fijo / permanezca en la parte inferior de la página.

Ejm

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
  ...
</nav>

Usa la clase .sticky-top para hacer que cualquier elemento sea fijo / permanezca en la parte superior de la página cuando se desplace. Nota: Esta clase no funciona en IE11 y versiones anteriores (la tratará como position: relative).

Ejm

<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
  ...
</nav>

Icono de cierre

Use la clase .close para diseñar un icono de cierre. Esto se usa a menudo para alertas y modales. Tenga en cuenta que usamos el símbolo &times; para crear el ícono real (una “x” más atractiva). También ten en cuenta que flota a la derecha por defecto.

Ejm

<button type="button" class="close">&times;</button>

Lectores de pantalla

Use la clase .sr-only para ocultar un elemento en todos los dispositivos, excepto los lectores de pantalla.

Ejm

<span class="sr-only">I will be hidden on all screens except for screen readers.</span>

Colores

Como se describe en el capítulo Colores, aquí hay una lista de todas las clases de texto y color de fondo:

Las clases para los colores de texto son: .text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secundario, .text-white, .text-dark, .text-body (color de cuerpo predeterminado / a menudo negro) y .text-light.

Colores Bootstrap 4

Las clases de texto contextual también se pueden usar en enlaces, lo que agregará un color de desplazamiento más oscuro.

También puedes agregar un 50% de opacidad para texto en blanco o negro con las clases .text-black-50 o .text-white-50.

Colores de fondo

Las clases para los colores de fondo son: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark y .bg-light.

Ten en cuenta que los colores de fondo no establecen el color del texto, por lo que en algunos casos querrá usarlos junto con una clase .text– *.

Ejm

Colores de fondo Bootstrap 4

Clases para tipografías de texto

Class Description
.display-* Los encabezados de pantalla se utilizan para destacar más que los encabezados normales (tamaño de fuente más grande y peso de fuente más ligero), y hay cuatro clases para elegir: .display-1, .display-2, .display-3, .display- 4 4
.font-weight-bold Bold text
.font-weight-bolder Bolder bold text
.font-weight-normal Normal text
.font-weight-light Light weight text
.font-weight-lighter Lighter weight text
.font-italic Italic text
.lead Hace que un párrafo se destaque
.small indica texto más pequeño (establecido en el 85% del tamaño del padre)
.text-break Evita que el texto largo rompa el diseño
.text-center Indica texto alineado al centro
.text-decoration-none Remueve la linea de abajo de un link
.text-left Texto alineado a la derech
.text-justify Texto justificad
.text-monospace Texto monoespaciado
.text-nowrap Texto no ajustado
.text-lowercase Texto en minúsculas
.text-reset Restablece el color de un texto o un enlace (hereda el color de su elemento primario)
.text-right Texto alineado a la derecha
.text-uppercase Texto en mayúsculas
.text-capitalize Texto capitalizado
.initialism muestra el texto dentro de un elemento <abbr> en un tamaño de fuente ligeramente más pequeño
.list-unstyled Elimina el estilo de lista predeterminado y el margen izquierdo en los elementos de la lista (funciona tanto en <ul> como en <ol>). Esta clase solo se aplica a los elementos de la lista secundaria inmediata (para eliminar el estilo de lista predeterminado de cualquier lista anidada, aplique esta clase también a cualquier lista anidada)
.list-inline Coloca todos los elementos de la lista en una sola línea (utilizada junto con .list-inline-item en cada elemento <li>)
.pre-scrollable Hace que un elemento <pre> se pueda desplazar

Bloque de elementos

Para convertir un elemento en un elemento de bloque, agrega la clase .d-block. Utiliza cualquiera de las clases de bloque d – * – para controlar CUANDO el elemento debe ser un elemento de bloque en un ancho de pantalla específico.

Bloque de elementos

Ejm

<span class="d-block bg-success">d-block</span>
<span class="d-sm-block bg-success">d-sm-block</span>
<span class="d-md-block bg-success">d-md-block</span>
<span class="d-lg-block bg-success">d-lg-block</span>
<span class="d-xl-block bg-success">d-xl-block</span>

Otras clases de visualización

 

Class Description
.d-none Oculta un elemento
.d-*-none Oculta un elemento en un tamaño de pantalla específico
.d-inline Hace a un elemento inline
.d-*-inline Hace que un elemento esté en línea en un tamaño de pantalla específico
.d-inline-block Hace un elemento bloque en línea
.d-*-inline-block Crea un bloque en línea de elemento en un tamaño de pantalla específico
.d-table Hace que un elemento se muestre como una tabla
.d-*-table Hace que un elemento se muestre como una tabla en un tamaño de pantalla específico
.d-table-cell Hace que un elemento se muestre como una celda de tabla
.d-*-table-cell Hace que un elemento se muestre como una celda de tabla en un tamaño de pantalla específico
.d-table-row Hace que un elemento se muestre como una fila de tabla
.d-*-table-row Hace que un elemento se muestre como una fila de tabla en un tamaño de pantalla específico
.d-flex Crea un contenedor flexbox y transforma a los hijos directos en elementos flexibles
.d-*-flex Crea un contenedor de flexbox en un tamaño de pantalla específico
.d-inline-flex Crea un contenedor flexbox en línea
.d-*-inline-flex Crea un contenedor flexbox en línea en un tamaño de pantalla específico

 

Flex

Usa las clases .flex- * para controlar el diseño con flexbox.

Ejm

Flex Bootstrap 4