Ferramentas Úteis Bootstrap 5

Utilities / Helper Classes

Bootstrap 5 has many utility/helper classes that can quickly set element styles without using any CSS code.

Border

Use border classes to add or remove borders for elements:

Exemplos

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

Experimente pessoalmente

Largura da borda

Uso .border-1 até .border-5 Para alterar a largura da borda:

Exemplos

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

Experimente pessoalmente

Cor da borda

Adicionar cor à borda usando qualquer classe de cor de borda de contexto:

Exemplos

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

Experimente pessoalmente

Borda arredondada

Uso rounded Adicionar arredondamento aos elementos da classe:

Exemplos

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

Experimente pessoalmente

Flutuação e remoção de flutuação

Uso .float-end Classe para flutuar para a direita, ou usar .float-start Flutuar para a esquerda, e usar .clearfix Classe de remoção de flutuação:

Exemplos

<div class="clearfix">
  <span class="float-start">Flutuar para a esquerda</span>
  <span class="float-end">Flutuar para a direita</span>
</div>

Experimente pessoalmente

Flutuação responsiva

Flutuar à esquerda ou à direita conforme a largura da tela, usando classes de flutuação responsivas (.float-*-left|right)，onde * é:

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

Exemplos

<div class="float-sm-end">Flutuar para a direita em telas pequenas ou maior largura</div><br>
<div class="float-md-end">Flutuar para a direita em telas médias ou maior largura</div><br>
<div class="float-lg-end">Flutuar para a direita em telas grandes ou maior largura</div><br>
<div class="float-xl-end">Flutuar para a direita em telas de grande ou maior largura</div><br>
<div class="float-xxl-end">Flutuar para a direita em telas de grande ou maior largura</div><br>
<div class="float-none">Não flutuar</div>

Experimente pessoalmente

Centralizado

Uso .mx-auto Elementos centralizados (adicionar margin-left e margin-right: auto):

Exemplos

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

Experimente pessoalmente

Largura

Usar classes w-* (.w-25、.w-50、.w-75、.w-100、.mw-auto、.mw-100）Definir a largura do elemento：

Exemplos

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

Experimente pessoalmente

Altura

Usar classes h-* (.h-25、.h-50、.h-75、.h-100、.mh-auto、.mh-100）Definir a altura do elemento：

Exemplos

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

Experimente pessoalmente

Espaçamento

Bootstrap 5 possui uma ampla gama de classes úteis de margem e padding responsivos. Elas são aplicáveis a todos os breakpoints:

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

O formato de uso dessas classes é:{propriedade}{sides}-{size} usado para xs，e {propriedade}{sides}-{breakpoint}-{size} usado para sm、md、lg、xl e xxl。

propriedade É uma das seguintes:

  • m - Definir margin
  • p - Definir padding

sides É uma das seguintes:

  • t - Definir margin-top ou padding-top
  • b - Definir margin-bottom ou padding-bottom
  • s - Definir margin-left ou padding-left
  • e - Definir margin-right ou padding-right
  • x - Definir simultaneamente padding-left e padding-right ou margin-left e margin-right
  • y - Definir simultaneamente padding-top e padding-bottom ou margin-top e margin-bottom
  • blank - Definir margem em todos os quatro lados do elemento margin ou padding

size É uma das seguintes:

  • 0 - Definir margin ou padding Definir 0
  • 1 - Definir margin ou padding Definir .25rem
  • 2 - Definir margin ou padding Definir .5rem
  • 3 - Definir margin ou padding Definir 1rem
  • 4 - Definir margin ou padding Definir 1.5rem
  • 5 - Definir margin ou padding Definir 3rem
  • auto - Definir margin Definido como auto

Exemplos

<div class="pt-4 bg-warning">Tenho apenas margem interna superior (1.5rem)</div>
<div class="p-5 bg-success">Tenho margem interna (3rem) em todos os lados</div>
<div class="m-5 pb-5 bg-info">Tenho margem externa (3rem) e margem interna inferior (3rem) em todos os lados</div>

Experimente pessoalmente

Mais exemplos de espaçamento

.m-# / m-*-# Margem externa de todos os lados Experimente
.mt-# / mt-*-# Margem externa superior Experimente
.mb-# / mb-*-# Margem externa inferior Experimente
.ms-# / ms-*-# Margem externa esquerda Experimente
.me-# / me-*-# Margem externa direita Experimente
.mx-# / mx-*-# Margem interna esquerda e direita Experimente
.my-# / my-*-# Margem externa superior e inferior Experimente
.p-# / p-*-# Margem interna (preenchimento) de todos os lados Experimente
.pt-# / pt-*-# Margem interna superior Experimente
.pb-# / pb-*-# Margem interna inferior Experimente
.ps-# / ps-*-# Margem interna esquerda Experimente
.pe-# / pe-*-# Margem interna direita Experimente
.py-# / py-*-# Margem interna superior e inferior Experimente
.px-# / px-*-# Margem interna esquerda e direita Experimente

Você pode encontrar em nosso Manual de Unidades CSS Leia mais sobre rem e diferentes unidades de tamanho.

Sombra

Use shadow- Classe para adicionar sombra ao elemento:

Exemplos

<div class="shadow-none p-4 mb-4 bg-light">Sem sombra</div>
<div class="shadow-sm p-4 mb-4 bg-white">Sombra pequena</div>
<div class="shadow p-4 mb-4 bg-white">Sombra padrão</div>
<div class="shadow-lg p-4 mb-4 bg-white">Sombra grande</div>

Experimente pessoalmente

Alinhamento vertical

Use align- As classes alteram o alinhamento dos elementos (apenas para elementos inline, inline-block, inline-table e células de tabela):

Exemplos

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

Experimente pessoalmente

Proporção

Crie vídeos ou slides responsivos com base na largura do pai.

Insira .ratio As classes correspondem à proporção de largura e altura que você escolheu .aspect-ratio-* Adicione ao elemento pai e insira nele um elemento embutido (vídeo ou iframe):

Exemplos

<!-- Ração 1:1 -->
<div class="ratio ratio-1x1">
  <iframe src="shanghai.mp4"></iframe>
</div>
<!-- Ração 4:3 -->
<div class="ratio ratio-4x3">
  <iframe src="shanghai.mp4"></iframe>
</div>
<!-- Ração 16:9 -->
<div class="ratio ratio-16x9">
  <iframe src="shanghai.mp4"></iframe>
</div>
<!-- Ração 21:9 -->
<div class="ratio ratio-21x9">
  <iframe src="shanghai.mp4"></iframe>
</div>

Experimente pessoalmente

Visibilidade

Uso .visible ou .invisible As classes podem controlar a visibilidade dos elementos:

Notas:Essas classes não alteram o valor do CSS display. Elas apenas adicionam visibility:visible ou visibility: hidden。

Exemplos

<div class="visible">Eu sou visível.</div>
<div class="invisible">Eu sou invisível.</div>

Experimente pessoalmente

Ícone de fechamento

Uso .btn-close As classes podem definir o estilo do ícone de fechamento. Geralmente usado em caixas de diálogo e modais.

Exemplos

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

Experimente pessoalmente

Leitor de tela

Uso .visually-hidden As classes podem ocultar elementos em todos os dispositivos, exceto para leitores de tela:

Exemplos

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

Experimente pessoalmente

Cores

Como descrito no capítulo "Cor", a seguir está listada a lista completa de classes de texto e de fundo de cor:

As classes específicas para cores de texto são:

  • .text-muted
  • .text-primary
  • .text-success
  • .text-info
  • .text-warning
  • .text-danger
  • .text-secondary
  • .text-white
  • .text-dark
  • .text-body(Cor padrão do body/geralmente preto)
  • .text-light

Exemplos

Experimente pessoalmente

As classes de texto de contexto também podem ser usadas em links:

Exemplos

Experimente pessoalmente

Você também pode usar as classes .text-black-50 ou .text-white-50 para adicionar 50% de opacidade a texto preto ou branco:

Exemplos

Experimente pessoalmente

Cor de fundo

As classes específicas para cores de fundo são:

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

Atenção, a cor de fundo não define a cor do texto, portanto, em alguns casos, você pode precisar usá-las com .text-* Classe juntos.

Exemplos

Experimente pessoalmente