Utilitários do Bootstrap 4

Utilitários do Bootstrap 4

O Bootstrap 4 tem muitas classes utilitárias/auxiliares para estilizar rapidamente os elementos sem usar nenhum código CSS.

Fronteiras

Use as borderclasses para adicionar ou remover bordas de um elemento:

Cor da borda

Adicione uma cor à borda com qualquer uma das classes de cores de borda contextuais:

Raio da borda

Adicione cantos arredondados a um elemento com as roundedclasses:

Float e Clearfix

Flutue um elemento para a direita com a .float-rightclasse ou para a esquerda com .float-left, e limpe os floats com a .clearfixclasse:

Flutuadores responsivos

Flutue um elemento para a esquerda ou para a direita dependendo da largura da tela, com as classes flutuantes responsivas ( .float-*-left|right- onde * é sm(>=576px), md(>=768px), lg(>=992px) ou xl(>=1200px)):

Centralizar

Centralize um elemento com a .mx-autoclasse (adiciona margin-left e margin-right: auto):

Largura

Defina a largura de um elemento com as classes w-* ( .w-25, .w-50, .w-75, .w-100, .mw-100):

Altura

Defina a altura de um elemento com as classes h-* ( .h-25, .h-50, .h-75, .h-100, .mh-100):

Espaçamento

O Bootstrap 4 possui uma ampla variedade de classes de utilitários de margem e preenchimento responsivos. Eles funcionam para todos os pontos de interrupção: xs(<=576px), sm(>=576px), md(>=768px), lg(>=992px) ou xl(>=1200px)):

As classes são usadas no formato: {property}{sides}-{size}for xse {property}{sides}-{breakpoint}-{size}for sm, md, lg, e xl.

Quando a propriedade é uma das seguintes:

• m- conjuntosmargin
• p- conjuntospadding

Onde lados é um dos seguintes:

• t- conjuntos margin-topoupadding-top
• b- conjuntos margin-bottomoupadding-bottom
• l- conjuntos margin-leftoupadding-left
• r- conjuntos margin-rightoupadding-right
• x- define ambos padding-lefte padding-rightou margin-leftemargin-right
• y- define ambos padding-tope padding-bottomou margin-topemargin-bottom
• blank - define um marginou paddingem todos os 4 lados do elemento

Onde o tamanho é um dos seguintes:

• 0- conjuntos marginou paddingpara0
• 1- define marginou paddingpara .25rem(4px se o tamanho da fonte for 16px)
• 2- define marginou paddingpara .5rem(8px se o tamanho da fonte for 16px)
• 3- define marginou paddingpara 1rem(16px se o tamanho da fonte for 16px)
• 4- define marginou paddingpara 1.5rem(24px se o tamanho da fonte for 16px)
• 5- define marginou paddingpara 3rem(48px se o tamanho da fonte for 16px)
• auto- define marginpara automático

Nota: as margens também podem ser negativas, adicionando um "n" na frente do tamanho :

• n1- define marginpara -.25rem(-4px se o tamanho da fonte for 16px)
• n2- define marginpara -.5rem(-8px se o tamanho da fonte for 16px)
• n3- define marginpara -1rem(-16px se o tamanho da fonte for 16px)
• n4- define marginpara -1.5rem(-24px se o tamanho da fonte for 16px)
• n5- define marginpara -3rem(-48px se o tamanho da fonte for 16px)

Mais exemplos de espaçamento

Sombras

Use as shadow-classes para adicionar sombras a um elemento:

Alinhamento Vertical

Use as align-classes para alterar o alinhamento dos elementos (funciona apenas em elementos inline, inline-block, inline-table e table cell):

Incorporações responsivas

Crie vídeos responsivos ou apresentações de slides com base na largura do pai.

Adicione o .embed-responsive-itema qualquer elemento incorporado (como <iframe> ou <video>) em um elemento pai com .embed-responsiveuma proporção de sua escolha:

Visibilidade

Use as classes .visibleou para controlar a visibilidade dos elementos. Observação: essas classes não alteram o valor de exibição do CSS. Eles apenas adicionam ou :.invisiblevisibility:visiblevisibility:hidden

Posição

Use a .fixed-topclasse para tornar qualquer elemento fixo/permanecer no topo da 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.