Bootstrap 4 Utilidades

Bootstrap 4 Utilidades

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

Fronteras

Use las borderclases para agregar o eliminar bordes de un elemento:

Color del borde

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

Radio del borde

Agregue esquinas redondeadas a un elemento con las roundedclases:

Flotador y Clearfix

Haga flotar un elemento a la derecha con la .float-rightclase o a la izquierda con .float-left, y borre los elementos flotantes con la .clearfixclase:

Flotadores receptivos

Haga flotar un elemento a la izquierda o a la derecha según el ancho de la pantalla, con las clases flotantes receptivas ( .float-*-left|right- donde * es sm(>=576px), md(>=768px), lg(>=992px) o xl(>=1200px)):

Alinear al centro

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

Ancho

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

Altura

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

Espaciado

Bootstrap 4 tiene una amplia gama de margen 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 utilizan en el formato: {property}{sides}-{size}para xsy {property}{sides}-{breakpoint}-{size}para sm, md, lgy xl.

Donde la propiedad es una de:

• m- conjuntosmargin
• p- conjuntospadding

Donde lados es uno de:

• t- conjuntos margin-topopadding-top
• b- conjuntos margin-bottomopadding-bottom
• l- conjuntos margin-leftopadding-left
• r- conjuntos margin-rightopadding-right
• x- establece ambos padding-lefty padding-righto margin-leftymargin-right
• y- establece ambos padding-topy padding-bottomo margin-topymargin-bottom
• en blanco: establece un margino paddingen los 4 lados del elemento

Donde el tamaño es uno de:

• 0- conjuntos margino paddingpara0
• 1- conjuntos margino paddinghasta .25rem(4px si el tamaño de fuente es 16px)
• 2- conjuntos margino paddinga .5rem(8px si el tamaño de fuente es 16px)
• 3- conjuntos margino paddinga 1rem(16px si el tamaño de fuente es 16px)
• 4- conjuntos margino paddinga 1.5rem(24px si el tamaño de fuente es 16px)
• 5- conjuntos margino paddinghasta 3rem(48 px si el tamaño de fuente es 16 px)
• auto- establece marginen automático

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

• n1- se establece marginen -.25rem(-4px si el tamaño de fuente es 16px)
• n2- se establece marginen -.5rem(-8px si el tamaño de fuente es 16px)
• n3- se establece marginen -1rem(-16px si el tamaño de fuente es 16px)
• n4- se establece marginen -1.5rem(-24 px si el tamaño de fuente es 16 px)
• n5- se establece marginen -3rem(-48 px si el tamaño de fuente es 16 px)

Más ejemplos de espaciado

Oscuridad

Use las shadow-clases para agregar sombras a un elemento:

alineación vertical

Use las align-clases 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):

Incrustaciones receptivas

Cree incrustaciones de diapositivas o videos receptivos en función del ancho del padre.

Agregue .embed-responsive-itema cualquier elemento incrustado (como <iframe> o <video>) en un elemento principal con .embed-responsiveuna relación de aspecto de su elección:

Visibilidad

Utilice las clases .visibleo para controlar la visibilidad de los elementos. Nota: estas clases no cambian el valor de visualización de CSS. Solo agregan o :.invisiblevisibility:visiblevisibility:hidden

Posición

Use la .fixed-topclase para hacer que cualquier elemento sea fijo/quede en la parte superior de la página:

Use the .fixed-bottom class to make any element fixed/stay at the bottom of the page:

Use the .sticky-top class to make any element fixed/stay at the top of the page when you scroll past it. Note: This class does not work in IE11 and earlier (will treat it as position:relative).

Close icon

Use the .close class to style a close icon. This is often used for alerts and modals. Note that we use the × symbol to create the actual icon (a better looking "x"). Also note that it floats right by default:

Screenreaders

Use the .sr-only class to hide an element on all devices, except screen readers:

Colors

As described in the Colors chapter, here is a list of all text and background color classes:

The classes for text colors are: .text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body (default body color/often black) and .text-light:

Contextual text classes can also be used on links, which will add a darker hover color:

You can also add 50% opacity for black or white text with the .text-black-50 or .text-white-50 classes:

Background Colors

The classes for background colors are: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light.

Note that background colors do not set the text color, so in some cases you'll want to use them together with a .text-* class.

Typography/Text Classes

As described in the Typography chapter, here is a list of all typography/text classes:

Block Elements

To make an element into a block element, add the .d-block class. Use any of the d-*-block classes to control WHEN the element should be a block element on a specific screen width:

Other Display Classes

Other display classes are also available:

Flex

Use .flex-* classes to control the layout with flexbox.

Read more about Bootstrap 4 Flex, in our next chapter.