Bootstrap 4 Utilità

Bootstrap 4 Utilità

Bootstrap 4 ha molte classi di utilità/helper per definire rapidamente gli elementi senza utilizzare alcun codice CSS.

frontiere

Usa le borderclassi per aggiungere o rimuovere bordi da un elemento:

Colore del bordo

Aggiungi un colore al bordo con una qualsiasi delle classi contestuali di colore del bordo:

Raggio di confine

Aggiungi angoli arrotondati a un elemento con le roundedclassi:

Float e Clearfix

Porta un elemento a destra con la .float-rightclasse o a sinistra con .float-left, e cancella i float con la .clearfixclasse:

Galleggianti reattivi

Sposta un elemento a sinistra o a destra a seconda della larghezza dello schermo, con le classi float reattive ( .float-*-left|right- dove * è sm(>=576px), md(>=768px), lg(>=992px) o xl(>=1200px)):

Allinea al centro

Centrare un elemento con la .mx-autoclasse (aggiunge margine sinistro e margine destro: auto):

Larghezza

Imposta la larghezza di un elemento con le classi w-* ( .w-25, .w-50, .w-75, .w-100, .mw-100):

Altezza

Imposta l'altezza di un elemento con le classi h-* ( .h-25, .h-50, .h-75, .h-100, .mh-100):

Spaziatura

Bootstrap 4 ha un'ampia gamma di classi di utilità di riempimento e margini reattivi. Funzionano per tutti i punti di interruzione: xs(<=576px), sm(>=576px), md(>=768px), lg(>=992px) o xl(>=1200px)):

Le classi vengono utilizzate nel formato: {property}{sides}-{size}for xse {property}{sides}-{breakpoint}-{size}for sm, md, lge xl.

Dove la proprietà è una di:

• m - imposta margin
• p - imposta padding

Dove i lati è uno di:

• t- imposta margin-topopadding-top
• b- imposta margin-bottomopadding-bottom
• l- imposta margin-leftopadding-left
• r- imposta margin-rightopadding-right
• x- imposta entrambi padding-lefte padding-righto margin-leftemargin-right
• y- imposta entrambi padding-tope padding-bottomo margin-topemargin-bottom
• vuoto - imposta a margino paddingsu tutti e 4 i lati dell'elemento

Dove la dimensione è una di:

• 0- imposta margino paddinga0
• 1- imposta margino paddingsu .25rem(4px se la dimensione del carattere è 16px)
• 2- imposta margino paddingsu .5rem(8px se la dimensione del carattere è 16px)
• 3- imposta margino paddingsu 1rem(16px se la dimensione del carattere è 16px)
• 4- imposta margino paddingsu 1.5rem(24px se la dimensione del carattere è 16px)
• 5- imposta margino paddingsu 3rem(48px se la dimensione del carattere è 16px)
• auto- imposta marginsu automatico

Nota: i margini possono anche essere negativi, aggiungendo una "n" davanti alla dimensione :

• n1- imposta marginsu -.25rem(-4px se la dimensione del carattere è 16px)
• n2- imposta marginsu -.5rem(-8px se la dimensione del carattere è 16px)
• n3- imposta marginsu -1rem(-16px se la dimensione del carattere è 16px)
• n4- imposta marginsu -1.5rem(-24px se la dimensione del carattere è 16px)
• n5- imposta marginsu -3rem(-48px se la dimensione del carattere è 16px)

Altri esempi di spaziatura

Ombre

Usa le shadow-classi per aggiungere ombre a un elemento:

Allineamento verticale

Usa le align-classi per modificare l'allineamento degli elementi (funziona solo su elementi inline, inline-block, inline-table e table cell):

Incorporamenti reattivi

Crea incorporamenti di video reattivi o presentazioni in base alla larghezza del genitore.

Aggiungi .embed-responsive-itema qualsiasi elemento da incorporare (come <iframe> o <video>) in un elemento genitore con .embed-responsivee proporzioni a tua scelta:

Visibilità

Utilizzare le classi .visibleo per controllare la visibilità degli elementi. Nota: queste classi non modificano il valore di visualizzazione CSS. Aggiungono solo o :.invisiblevisibility:visiblevisibility:hidden

Posizione

Usa la .fixed-topclasse per rendere fisso/rimanere qualsiasi elemento nella parte superiore della pagina:

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.