Bootstrap: Classes Utilitárias

Q: P: Qual a diferença entre invisible e d-none ?

R: invisible oculta o elemento mas ele ainda ocupa espaço na página (visibility: hidden). d-none remove completamente o elemento (display: none), então não ocupa espaço.

Q: P: Posso personalizar os valores das classes utilitárias?

R: Sim, via Sass. Sobrescreva os values no mapa $utilities para adicionar ou modificar valores de classes utilitárias. Por exemplo, adicione valores de largura como w-15, w-35, ou altere os tamanhos de sombra de shadow-*. Com o método CDN, você não pode personalizar e só pode usar os valores predefinidos.

Última atualização: 2026-08-26

1. Introdução a Esta Lição

(1) Pré-requisitos

Contêineres e Sistema de Grade do Bootstrap
Lição 17 Ícones do Bootstrap

(2) 🎯 O que você vai aprender

Usar classes utilitárias de borda e arredondamento
Controlar a profundidade de sombra
Usar float e clearfix
Controlar visibilidade (visible/invisible) e overflow
Usar classes utilitárias de dimensionamento (w/h)

(3) O Problema

Alice precisa escrever muito CSS personalizado para ajustar bordas, sombras e cantos arredondados em elementos da página—as classes utilitárias do Bootstrap podem fazer isso com um único nome de classe.

(4) A Solução

O Bootstrap fornece um conjunto abrangente de classes utilitárias CSS atômicas cobrindo estilos comuns como bordas, cantos arredondados, sombras, floats, visibilidade, overflow e dimensionamento.

(5) Os Benefícios

Não precisa escrever CSS personalizado; basta combinar classes diretamente no HTML para alcançar vários efeitos visuais, aumentando significativamente a velocidade de desenvolvimento e depuração.

2. Bordas

Classes de borda: border, border-top/end/bottom/start, border-0/1/2/3/4/5, border-{color}

(1) Classes Utilitárias de Borda

Classe	Efeito CSS
`border`	Borda de 1px sólida `#dee2e6` nos quatro lados
`border-top` / `border-end` / `border-bottom` / `border-start`	Borda de lado único
`border-0`	Remove todas as bordas
`border-{1-5}`	Largura da borda 1px ~ 5px
`border-{color}`	Cor da borda (`primary`/`success`/`danger`, etc.)

(2) Tabela de Referência de Largura de Borda

Classe	CSS	Efeito	Caso de Uso
`border-1`	`border-width: 1px`	Borda mais fina	Borda padrão, células de tabela
`border-2`	`border-width: 2px`	Borda fina	Borda de card, campos de input
`border-3`	`border-width: 3px`	Borda média	Borda de ênfase, botões
`border-4`	`border-width: 4px`	Borda espessa	Divisor de seção, sublinhado de título
`border-5`	`border-width: 5px`	Borda mais espessa	Linha de destaque à esquerda, borda de aviso

▶ Exemplo: Demonstração de Bordas e Arredondamento

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demonstração de Bordas e Arredondamento</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <h5>Direções de Borda</h5>
    <div class="d-flex flex-wrap gap-2 mb-4">
      <div class="border p-3">border</div>
      <div class="border-top p-3">border-top</div>
      <div class="border-end p-3">border-end</div>
      <div class="border-bottom p-3">border-bottom</div>
      <div class="border-start p-3">border-start</div>
    </div>

    <h5>Largura de Borda</h5>
    <div class="d-flex flex-wrap gap-2 mb-4">
      <div class="border border-1 p-3">border-1</div>
      <div class="border border-2 p-3">border-2</div>
      <div class="border border-3 p-3">border-3</div>
      <div class="border border-4 p-3">border-4</div>
      <div class="border border-5 p-3">border-5</div>
    </div>

    <h5>Cores de Borda</h5>
    <div class="d-flex flex-wrap gap-2 mb-4">
      <div class="border border-primary p-3">primário</div>
      <div class="border border-success p-3">sucesso</div>
      <div class="border border-danger p-3">perigo</div>
      <div class="border border-warning p-3">aviso</div>
      <div class="border border-info p-3">informação</div>
      <div class="border border-dark p-3">escuro</div>
    </div>

    <h5>Tamanhos Arredondados</h5>
    <div class="d-flex flex-wrap gap-2 align-items-center">
      <div class="border p-3 rounded-0">rounded-0</div>
      <div class="border p-3 rounded-1">rounded-1</div>
      <div class="border p-3 rounded-2">rounded-2</div>
      <div class="border p-3 rounded-3">rounded-3</div>
      <div class="border p-3 rounded-4">rounded-4</div>
      <div class="border p-3 rounded-5">rounded-5</div>
      <div class="border rounded-circle d-inline-flex align-items-center justify-content-center" style="width:60px;height:60px;">círculo</div>
      <div class="border rounded-pill px-4 py-2">rounded-pill</div>
    </div>
  </div>
</body>
</html>

▶ Experimente

3. Cantos Arredondados

Classes de arredondamento: rounded-0/1/2/3/4/5, rounded-circle, rounded-pill, rounded-top/end/bottom/start

(1) Referência de Tamanhos Arredondados

Classe	border-radius	Efeito
`rounded-0`	0 (sem arredondamento)	Cantos quadrados
`rounded-1`	0.125rem (2px)	Arredondamento leve
`rounded-2`	0.25rem (4px)	Arredondamento pequeno
`rounded-3`	0.375rem (6px)	Arredondamento padrão
`rounded-4`	0.5rem (8px)	Arredondamento médio
`rounded-5`	0.75rem (12px)	Arredondamento grande
`rounded-circle`	50% (círculo perfeito)	Círculo
`rounded-pill`	100rem (formato pílula)	Formato pílula

(2) Arredondamento de Lado Único

Classe	Descrição
`rounded-top`	Arredonda os dois cantos superiores
`rounded-end`	Arredonda os dois cantos direitos
`rounded-bottom`	Arredonda os dois cantos inferiores
`rounded-start`	Arredonda os dois cantos esquerdos

HTML

<img src="https://via.placeholder.com/100" class="rounded-circle" width="100" height="100" alt="Avatar">
<button class="btn btn-primary rounded-pill px-4">Botão Pílula</button>
<div class="rounded-4 p-3 bg-light border">Cantos extra arredondados</div>

▶ Experimente

▶ Exemplo: Galeria de Efeitos de Borda

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Galeria de Efeitos de Borda</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <div class="row g-4">
      <div class="col-md-4"><div class="border border-primary p-3 rounded">Borda Primária</div></div>
      <div class="col-md-4"><div class="border border-success border-3 p-3 rounded-3">Sucesso Espessa</div></div>
      <div class="col-md-4"><div class="border border-danger border-5 p-3 rounded-pill">Perigo Pílula</div></div>
      <div class="col-md-4"><div class="border-top border-warning border-4 p-3">Apenas Topo</div></div>
      <div class="col-md-4"><div class="border-start border-info border-5 ps-3">Destaque Início</div></div>
      <div class="col-md-4"><div class="border-0 bg-light p-3 rounded-circle text-center" style="width:80px;height:80px;">Sem Borda</div></div>
    </div>
  </div>
</body>
</html>

▶ Experimente

Classes de sombra: shadow-none, shadow-sm, shadow, shadow-lg

(1) Tabela de Comparação de Sombra

Classe	CSS box-shadow	Profundidade Visual	Caso de Uso
`shadow-none`	Sem sombra	Plano	Tabelas, listas, grupos de card
`shadow-sm`	`0 0.125rem 0.25rem`	Rasa	Cards padrão, pequenos widgets
`shadow`	`0 0.5rem 1rem`	Média	Dropdowns, popovers
`shadow-lg`	`0 1rem 3rem`	Profunda	Modais, Toasts, notificações

HTML

<div class="shadow-none p-3 mb-3 bg-light rounded">Sem sombra</div>
<div class="shadow-sm p-3 mb-3 bg-body rounded">Sombra pequena</div>
<div class="shadow p-3 mb-3 bg-body rounded">Sombra regular</div>
<div class="shadow-lg p-3 mb-3 bg-body rounded">Sombra grande</div>

▶ Experimente

▶ Exemplo: Comparação de Profundidade de Sombra

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Comparação de Profundidade de Sombra</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .shadow-card { transition: transform 0.2s, box-shadow 0.2s; cursor: default; }
    .shadow-card:hover { transform: translateY(-4px); }
  </style>
</head>
<body>
  <div class="container py-4">
    <h2 class="mb-4">Escala de Profundidade de Sombra</h2>
    <div class="row g-4">
      <div class="col-md-3">
        <div class="card shadow-none p-4 text-center shadow-card h-100 border">
          <div class="display-6 text-body-tertiary mb-2">0</div>
          <h5>shadow-none</h5>
          <p class="text-body-secondary small mb-0">Sem sombra, design plano. Bom para tabelas e grupos de card.</p>
        </div>
      </div>
      <div class="col-md-3">
        <div class="card shadow-sm p-4 text-center shadow-card h-100">
          <div class="display-6 text-secondary mb-2">1</div>
          <h5>shadow-sm</h5>
          <p class="text-body-secondary small mb-0">Profundidade sutil. Padrão para cards, pequenos widgets de UI.</p>
        </div>
      </div>
      <div class="col-md-3">
        <div class="card shadow p-4 text-center shadow-card h-100">
          <div class="display-6 text-body mb-2">2</div>
          <h5>shadow</h5>
          <p class="text-body-secondary small mb-0">Profundidade moderada. Usado para dropdowns e popovers.</p>
        </div>
      </div>
      <div class="col-md-3">
        <div class="card shadow-lg p-4 text-center shadow-card h-100">
          <div class="display-6 text-dark mb-2">3</div>
          <h5>shadow-lg</h5>
          <p class="text-body-secondary small mb-0">Profundidade proeminente. Ideal para modais, toasts, notificações.</p>
        </div>
      </div>
    </div>

    <h2 class="mt-5 mb-4">Efeitos Combinados</h2>
    <div class="d-flex gap-3 flex-wrap">
      <div class="card shadow-sm rounded-3 p-4" style="width:200px;">shadow-sm + rounded-3</div>
      <div class="card shadow rounded-4 border-0 p-4" style="width:200px;">shadow + rounded-4</div>
      <div class="card shadow-lg rounded-pill px-4 py-3 text-center" style="width:220px;">shadow-lg + pill</div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

▶ Experimente

4. Floats e Clearfix

Classe	Efeito
`float-start`	`float: left`
`float-end`	`float: right`
`float-none`	`float: none`
`clearfix`	Limpa o float (usado no contêiner pai)

HTML

<div class="clearfix">
  <div class="float-start bg-primary text-white p-3 rounded">Flutuar à esquerda</div>
  <div class="float-end bg-success text-white p-3 rounded">Flutuar à direita</div>
</div>

▶ Experimente

(1) Escolha entre Float vs Flex vs Grid

Dimensão	Layout Float	Layout Flexbox	Layout CSS Grid
Classe Bootstrap	`float-start/end` + `clearfix`	`d-flex` + `flex-*`	`row` + `col-*`
Caso de Uso	Quebra de texto ao redor de imagens, arranjo simples esquerda-direita	Arranjo unidimensional (linha ou coluna), centralização, distribuição igual	Grade bidimensional, multi-linha/coluna, layouts complexos
Suporte Responsivo	Limitado (`float-md-start`)	Rico (`flex-md-row`, etc.)	Rico (`col-md-6`, etc.)
Capacidades de Alinhamento	Fraco (requer clearfix extra)	Forte (`align-items-` `justify-content-`)	Forte (`align-self-` `justify-items-`)
Recomendação Bootstrap	⚠ Não recomendado (apenas para quebra de texto)	✅ Recomendado (layout unidimensional)	✅ Recomendado (layout bidimensional)

5. Visibilidade e Overflow

(1) Visibilidade

Classe	CSS	Descrição
`visible`	`visibility: visible`	Exibe o elemento
`invisible`	`visibility: hidden`	Oculto mas ocupa espaço

(2) Overflow

Classe	CSS	Descrição
`overflow-auto`	`overflow: auto`	Rola quando transborda
`overflow-hidden`	`overflow: hidden`	Oculta o transbordamento
`overflow-visible`	`overflow: visible`	Transbordamento visível (padrão)
`overflow-scroll`	`overflow: scroll`	Sempre mostra a barra de rolagem

(3) Alinhamento Vertical

Classe	CSS
`align-baseline`	`vertical-align: baseline`
`align-top`	`vertical-align: top`
`align-middle`	`vertical-align: middle`
`align-bottom`	`vertical-align: bottom`
`align-text-top`	`vertical-align: text-top`
`align-text-bottom`	`vertical-align: text-bottom`

HTML

<!-- Visibilidade -->
<div class="visible p-2 bg-light border">Elemento visível</div>
<div class="invisible p-2 bg-light border">Invisível (ainda ocupa espaço)</div>

<!-- Overflow -->
<div class="overflow-auto border p-2" style="height: 80px;">Conteúdo que pode transbordar...</div>
<div class="overflow-hidden border p-2" style="height: 80px;">Conteúdo transbordante oculto...</div>

<!-- Alinhamento vertical -->
<span class="align-baseline">baseline</span>
<span class="align-top">topo</span>
<span class="align-middle">meio</span>
<span class="align-bottom">baixo</span>

▶ Experimente

▶ Exemplo: Exemplo de Rolagem por Overflow

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exemplos de Overflow</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .overflow-box { border: 2px solid #dee2e6; border-radius: 0.5rem; padding: 0.5rem; }
  </style>
</head>
<body>
  <div class="container py-4">
    <h2 class="mb-4">Comportamentos de Overflow</h2>
    <div class="row g-3">
      <div class="col-md-3">
        <div class="overflow-box overflow-auto" style="height:120px;">
          <p class="fw-bold text-success">overflow-auto</p>
          <p>Rola quando o conteúdo transborda. O Bootstrap fornece classes utilitárias para controlar como o conteúdo se comporta quando excede seu contêiner. A classe overflow-auto adiciona barras de rolagem apenas quando necessário, mantendo o layout limpo e garantindo que o conteúdo permaneça acessível aos usuários.</p>
        </div>
      </div>
      <div class="col-md-3">
        <div class="overflow-box overflow-hidden" style="height:120px;">
          <p class="fw-bold text-danger">overflow-hidden</p>
          <p>Conteúdo recortado. A classe overflow-hidden recorta o conteúdo que excede os limites do contêiner, ocultando qualquer transbordamento sem barras de rolagem.</p>
        </div>
      </div>
      <div class="col-md-3">
        <div class="overflow-box overflow-visible" style="height:120px;">
          <p class="fw-bold text-warning">overflow-visible</p>
          <p>Conteúdo transborda os limites. A classe overflow-visible permite que o conteúdo transborde além do contêiner.</p>
        </div>
      </div>
      <div class="col-md-3">
        <div class="overflow-box overflow-scroll" style="height:120px;">
          <p class="fw-bold text-primary">overflow-scroll</p>
          <p>Sempre mostra barras de rolagem. A classe overflow-scroll força as barras de rolagem a sempre serem exibidas, mesmo quando o conteúdo cabe.</p>
        </div>
      </div>
    </div>

    <h2 class="mt-4">Overflow Horizontal</h2>
    <div class="overflow-auto bg-light p-2 rounded border" style="white-space: nowrap; max-width: 100%;">
      <span class="badge bg-primary me-2">Tag 1</span>
      <span class="badge bg-success me-2">Tag 2</span>
      <span class="badge bg-warning me-2">Tag 3</span>
      <span class="badge bg-danger me-2">Tag 4</span>
      <span class="badge bg-info me-2">Tag 5</span>
      <span class="badge bg-dark me-2">Tag 6</span>
      <span class="badge bg-secondary me-2">Tag 7</span>
      <span class="badge bg-primary me-2">Tag 8</span>
      <span class="badge bg-success me-2">Tag 9</span>
      <span class="badge bg-warning me-2">Tag 10</span>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

▶ Experimente

6. Dimensionamento

(1) Largura

Classe	CSS
`w-25` / `w-50` / `w-75` / `w-100`	`width: 25%/50%/75%/100%`
`mw-100`	`max-width: 100%`
`vw-100`	`width: 100vw`
`min-vw-100`	`min-width: 100vw`

(2) Altura

Classe	CSS
`h-25` / `h-50` / `h-75` / `h-100`	`height: 25%/50%/75%/100%`
`mh-100`	`max-height: 100%`
`vh-100`	`height: 100vh`
`min-vh-100`	`min-height: 100vh`

HTML

<div class="w-25 bg-primary text-white p-2 rounded-1 mb-1">w-25 (25%)</div>
<div class="w-50 bg-success text-white p-2 rounded-1 mb-1">w-50 (50%)</div>
<div class="w-75 bg-info text-white p-2 rounded-1 mb-1">w-75 (75%)</div>
<div class="w-100 bg-danger text-white p-2 rounded-1 mb-1">w-100 (100%)</div>
<div class="mw-100 bg-warning p-2 rounded-1" style="width: 200%;">mw-100 (máx 100%)</div>

▶ Experimente

▶ Exemplo: Playground de Largura e Altura

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Playground de Largura e Altura</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <h2 class="mb-3">Classes de Largura</h2>
    <div class="mb-4">
      <div class="w-25 p-3 mb-2 bg-primary text-white rounded-1">w-25</div>
      <div class="w-50 p-3 mb-2 bg-success text-white rounded-1">w-50</div>
      <div class="w-75 p-3 mb-2 bg-info text-white rounded-1">w-75</div>
      <div class="w-100 p-3 mb-2 bg-danger text-white rounded-1">w-100</div>
    </div>

    <h2 class="mb-3">Classes de Altura</h2>
    <div class="d-flex gap-2 border rounded-3 p-3 mb-4" style="height:160px;">
      <div class="h-25 bg-primary text-white p-2 rounded-1 d-flex align-items-center">h-25</div>
      <div class="h-50 bg-success text-white p-2 rounded-1 d-flex align-items-center">h-50</div>
      <div class="h-75 bg-info text-white p-2 rounded-1 d-flex align-items-center">h-75</div>
      <div class="h-100 bg-danger text-white p-2 rounded-1 d-flex align-items-center">h-100</div>
    </div>

    <h2 class="mb-3">Unidades de Viewport</h2>
    <div class="vw-100 bg-warning text-dark p-2 rounded-1 mb-2">vw-100 (100% da largura do viewport)</div>
    <div class="min-vw-100 bg-light border p-2 rounded-1">min-vw-100 (mínimo 100% do viewport)</div>

    <h2 class="mt-4 mb-3">Caso de Uso: Barra Lateral + Conteúdo</h2>
    <div class="d-flex border rounded-3 overflow-hidden">
      <div class="w-25 bg-dark text-white p-3">
        <p class="fw-bold mb-1">Barra Lateral</p>
        <small>w-25</small>
      </div>
      <div class="w-75 bg-light p-3">
        <p class="fw-bold mb-1">Conteúdo Principal</p>
        <small>w-75</small>
      </div>
    </div>

    <h2 class="mt-4 mb-3">Restrições Máximas</h2>
    <div class="mw-100 border p-2 rounded-1 mb-2" style="width:200%; background:#f8f9fa;">mw-100 limita a largura a 100%</div>
    <div class="mh-100 border p-2 rounded-1" style="height:50px; background:#f8f9fa;">mh-100 permite até 100% de altura</div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

▶ Experimente

(1) Diagrama de Estrutura das Classes Utilitárias

graph TD
    A[Utilitários Bootstrap] --> B[Espaçamento]
    A --> C[Tipografia]
    A --> D[Layout]
    A --> E[Visual]
    A --> F[Interativo]
    B --> B1[m/p + {lado} + {tamanho}]
    C --> C1[text-* / fw-* / fs-*]
    D --> D1[Display d-*]
    D --> D2[Flex flex-*]
    D --> D3[Float float-*]
    D --> D4[Largura/Altura w-*/h-*]
    E --> E1[Borda border-*]
    E --> E2[Arredondado rounded-*]
    E --> E3[Sombra shadow-*]
    E --> E4[Cor text-*/bg-*]
    F --> F1[Overflow overflow-*]
    F --> F2[Visibilidade visible/invisible]
    F --> F3[Alinhamento vertical align-*]

❓ Perguntas Frequentes

📖 Resumo

Bordas: border, border-{direção}, border-{largura}, border-{cor}
Cantos Arredondados: rounded-{0-5}, rounded-circle, rounded-pill, arredondamento de lado único
Sombras: shadow-sm, shadow, shadow-lg, shadow-none
Floats: float-start/end + clearfix; Visibilidade: visible/invisible
Dimensionamento: w-{25/50/75/100}, h-{25/50/75/100}, unidades de viewport
Overflow: overflow-auto/hidden/visible/scroll

📝 Exercícios

⭐ Crie três cards com arredondamento diferente: rounded-0 para um estilo de cartão de visita quadrado, rounded-3 para um card padrão, e rounded-pill para um estilo de botão pílula.
⭐⭐ Crie uma comparação de sombra pequena vs. grande: dois cards usando shadow-sm e shadow-lg respectivamente, lado a lado.
⭐⭐⭐ Use w-50 e mx-auto para criar um bloco centralizado com 50% de largura, adicionando border + rounded-4 + shadow.

Lição Anterior: Ícones do Bootstrap · Próxima Lição: Projeto Prático: Página Inicial de Site Corporativo

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós