English 中文 العربية 日本語 Português

Bootstrap: Grupo de Lista e Distintivo

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

1. Introdução à Lição

(1) Pré-requisitos

(2) 🎯 O que você vai aprender

(3) Ponto de Dor

O Charlie está construindo um sistema de gerenciamento de tickets e precisa exibir "Pendentes (5)", "Em Andamento (3)", "Concluídos (12)" em uma barra lateral — uma combinação clássica de grupos de lista e distintivos.

(4) Solução

Grupos de lista e distintivos são componentes de exibição leves, porém práticos, no Bootstrap. Grupos de lista apresentam um conjunto de itens relacionados, enquanto distintivos exibem contagens ou status nos cantos.

Entendendo: Grupo de Lista = um <ul> aprimorado (melhor estilizado, interativo), Distintivo = um pequeno rótulo (mostra números/status, anexado a outros elementos).

(5) Benefícios

Usar grupos de lista com distintivos exibe claramente e de forma intuitiva contagens de notificação categorizadas, melhorando muito a eficiência de obtenção de informações.

2. Fundamentos do Grupo de Lista

HTML 
<ul class="list-group">
  <li class="list-group-item">Um item</li>
  <li class="list-group-item">Um segundo item</li>
  <li class="list-group-item">Um terceiro item</li>
</ul>
▶ Experimente

Output: Bootstrap 5.3 styled component effects (like buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.

▶ Exemplo: Fundamentos do Grupo de Lista

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 Grupo de Lista</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">
      <div class="col-md-4">
        <h5>Lista Básica</h5>
        <ul class="list-group">
          <li class="list-group-item">Painel</li>
          <li class="list-group-item">Pedidos</li>
          <li class="list-group-item">Produtos</li>
          <li class="list-group-item">Clientes</li>
        </ul>
      </div>

      <div class="col-md-4">
        <h5>Ativo e Desabilitado</h5>
        <div class="list-group">
          <a href="#" class="list-group-item list-group-item-action active">Início</a>
          <a href="#" class="list-group-item list-group-item-action">Perfil</a>
          <a href="#" class="list-group-item list-group-item-action disabled">Configurações (bloqueado)</a>
        </div>
      </div>

      <div class="col-md-4">
        <h5>Estilo Flush</h5>
        <ul class="list-group list-group-flush">
          <li class="list-group-item">Caixa de Entrada <span class="badge bg-primary rounded-pill">3</span></li>
          <li class="list-group-item">Enviados</li>
          <li class="list-group-item">Rascunhos <span class="badge bg-warning">2</span></li>
        </ul>
      </div>
    </div>
  </div>
</body>
</html>
▶ Experimente

Output: Bootstrap 5.3 styled component effects (like buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.

3. Variações do Grupo de Lista

(1) Grupo de Lista Interativo

HTML 
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active">Link ativo</a>
  <a href="#" class="list-group-item list-group-item-action">Link comum</a>
  <button class="list-group-item list-group-item-action">Botão como item</button>
</div>
▶ Experimente

Output: Bootstrap 5.3 styled component effects (like buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.

(2) Variações de Cor

HTML 
<ul class="list-group">
  <li class="list-group-item list-group-item-primary">Item primário</li>
  <li class="list-group-item list-group-item-success">Item de sucesso</li>
  <li class="list-group-item list-group-item-danger">Item de perigo</li>
</ul>
▶ Experimente

Output: Bootstrap 5.3 styled component effects (like buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.

classe Cor de Fundo Semântica
list-group-item-primary Azul claro Informação
list-group-item-success Verde claro Sucesso
list-group-item-danger Vermelho claro Erro
list-group-item-warning Amarelo claro Aviso

(3) Grupo de Lista com Distintivos

HTML 
<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Notificações
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Mensagens
    <span class="badge bg-danger rounded-pill">3</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Atualizações
    <span class="badge bg-success rounded-pill">7</span>
  </li>
</ul>
▶ Experimente

Output: Bootstrap 5.3 styled component effects (like buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.

4. Conteúdo Personalizado do Grupo de Lista

HTML 
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">Nova atualização lançada</h5>
      <small class="text-body-secondary">há 3 dias</small>
    </div>
    <p class="mb-1">A versão 2.4 inclui correções de bugs e melhorias de desempenho.</p>
    <small class="text-body-secondary">Por Alice Chen</small>
  </a>

  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">Manutenção do servidor</h5>
      <small class="text-body-secondary">há 1 semana</small>
    </div>
    <p class="mb-1">Tempo de inatividade agendado no sábado 2:00 - 4:00 UTC.</p>
    <small class="text-body-secondary">Por Bob Wang</small>
  </a>
</div>
▶ Experimente

Output: Bootstrap 5.3 styled component effects (like buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.

5. Distintivos

HTML 
<h1>Cabeçalho de exemplo <span class="badge bg-secondary">Novo</span></h1>

<button class="btn btn-primary position-relative">
  Caixa de Entrada
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
    99+
  </span>
</button>

<span class="badge rounded-pill bg-primary">Primário</span>
<span class="badge rounded-pill bg-warning">Aviso</span>

<span class="badge bg-primary">Primário</span>
<span class="badge bg-success">Sucesso</span>
<span class="badge bg-danger">Perigo</span>
<span class="badge bg-warning">Aviso</span>
<span class="badge bg-info">Informação</span>
<span class="badge bg-dark">Escuro</span>
▶ Experimente

Output: Bootstrap 5.3 styled component effects (like buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.

(1) Semântica de Cores do Distintivo

classe Uso
bg-primary Rótulo padrão
bg-success Concluído/Aprovado
bg-danger Erro/Contagem de falha
bg-warning Pendente/Precisa de atenção
bg-info Rótulo informativo
bg-secondary Rótulo neutro/secundário

6. Mais Exemplos de Grupo de Lista

▶ Exemplo: Navegação em Grupo de Lista Estilo Aba

HTML 
<div class="row">
  <div class="col-4">
    <div class="list-group" id="list-tab" role="tablist">
      <a class="list-group-item list-group-item-action active" id="list-home-list" data-bs-toggle="list" href="#list-home" role="tab">Início</a>
      <a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="list" href="#list-profile" role="tab">Perfil</a>
      <a class="list-group-item list-group-item-action" id="list-messages-list" data-bs-toggle="list" href="#list-messages" role="tab">Mensagens</a>
      <a class="list-group-item list-group-item-action" id="list-settings-list" data-bs-toggle="list" href="#list-settings" role="tab">Configurações</a>
    </div>
  </div>
  <div class="col-8">
    <div class="tab-content" id="nav-tabContent">
      <div class="tab-pane fade show active" id="list-home" role="tabpanel">Conteúdo Início: bem-vindo ao painel.</div>
      <div class="tab-pane fade" id="list-profile" role="tabpanel">Conteúdo Perfil: gerencie suas informações pessoais.</div>
      <div class="tab-pane fade" id="list-messages" role="tabpanel">Conteúdo Mensagens: veja sua caixa de entrada.</div>
      <div class="tab-pane fade" id="list-settings" role="tabpanel">Conteúdo Configurações: configure preferências.</div>
    </div>
  </div>
</div>
▶ Experimente

Output: Bootstrap 5.3 styled component effects (like buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.

▶ Exemplo: Lista Complexa (Distintivo + Ícone)

HTML 
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
    <div class="me-3 fs-5">📧</div>
    <div class="flex-grow-1">
      <div class="d-flex w-100 justify-content-between">
        <h6 class="mb-0">Nova mensagem de Alice</h6>
        <small class="text-body-secondary">há 2 min</small>
      </div>
      <small class="text-body-secondary">Reunião reagendada para 15h.</small>
    </div>
    <span class="badge bg-danger rounded-pill ms-2">3</span>
  </a>
  <a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
    <div class="me-3 fs-5">🔔</div>
    <div class="flex-grow-1">
      <div class="d-flex w-100 justify-content-between">
        <h6 class="mb-0">Alerta do servidor</h6>
        <small class="text-body-secondary">há 1 h</small>
      </div>
      <small class="text-body-secondary">Uso de CPU excedeu 90%.</small>
    </div>
    <span class="badge bg-warning rounded-pill ms-2">5</span>
  </a>
  <a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
    <div class="me-3 fs-5">✅</div>
    <div class="flex-grow-1">
      <div class="d-flex w-100 justify-content-between">
        <h6 class="mb-0">Implantação concluída</h6>
        <small class="text-body-secondary">há 3 h</small>
      </div>
      <small class="text-body-secondary">Versão 2.4 implantada em produção.</small>
    </div>
    <span class="badge bg-success rounded-pill ms-2">12</span>
  </a>
</div>
▶ Experimente

Output: Bootstrap 5.3 styled component effects (like buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.

▶ Exemplo: Grupo de Lista com Caixa de Seleção

HTML 
<div class="list-group">
  <label class="list-group-item d-flex align-items-center">
    <input class="form-check-input me-2" type="checkbox" value="" checked>
    Fundamentos de HTML & CSS
  </label>
  <label class="list-group-item d-flex align-items-center">
    <input class="form-check-input me-2" type="checkbox" value="">
    Fundamentos de JavaScript
  </label>
  <label class="list-group-item d-flex align-items-center">
    <input class="form-check-input me-2" type="checkbox" value="" checked>
    Bootstrap 5 Framework
  </label>
  <label class="list-group-item d-flex align-items-center">
    <input class="form-check-input me-2" type="checkbox" value="">
    React & Vue.js
  </label>
  <label class="list-group-item d-flex align-items-center disabled">
    <input class="form-check-input me-2" type="checkbox" value="" disabled>
    Node.js Avançado (bloqueado)
  </label>
</div>
▶ Experimente

Output: Bootstrap 5.3 styled component effects (like buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.

▶ Exemplo: Grupo de Lista de Cor Personalizada

HTML 
<div class="list-group">
  <button type="button" class="list-group-item list-group-item-action list-group-item-success d-flex justify-content-between align-items-center">
    <span>✅ Tarefa concluída</span>
    <span class="badge bg-success rounded-pill">12</span>
  </button>
  <button type="button" class="list-group-item list-group-item-action list-group-item-warning d-flex justify-content-between align-items-center">
    <span>⏳ Em andamento</span>
    <span class="badge bg-warning rounded-pill">5</span>
  </button>
  <button type="button" class="list-group-item list-group-item-action list-group-item-danger d-flex justify-content-between align-items-center">
    <span>❌ Atrasado</span>
    <span class="badge bg-danger rounded-pill">3</span>
  </button>
  <button type="button" class="list-group-item list-group-item-action list-group-item-info d-flex justify-content-between align-items-center">
    <span>ℹ️ Novas atualizações</span>
    <span class="badge bg-info rounded-pill">8</span>
  </button>
</div>
▶ Experimente

Output: Bootstrap 5.3 styled component effects (like buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.

(1) Árvore de Componentes do Grupo de Lista

100% 
flowchart TD
    A[contêiner list-group] --> B[list-group-item item de lista]
    B --> C[list-group-item-action<br/>interativo]
    B --> D[list-group-item-primary<br/>variante de cor]
    B --> E[badge]
    A --> F[list-group-flush<br/>sem borda]
    A --> G[Conteúdo personalizado<br/>Flex + Tipografia]

Output: Bootstrap 5.3 styled component effects (like buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.

Variante de Grupo de Lista classe Uso
Lista básica list-group + list-group-item Exibição simples de itens
Interativa list-group-item-action Navegação, menus
Sem borda list-group-flush Dentro de cartões, cenários compactos
Linhas coloridas list-group-item-{color} Classificação de status
Distintivo numérico badge rounded-pill Contagem, números de notificação
Caixa de Seleção/Rádio form-check-input + list-group-item Listas de tarefas, múltipla seleção
Cor do Distintivo Semântica Cenário Aplicável
bg-primary Padrão/Informação Contagens regulares
bg-success Sucesso/Concluído Tarefas concluídas, aprovadas
bg-danger Erro/Urgente Contagens de falha, contagens de alerta
bg-warning Pendente Em andamento, aguardando aprovação
bg-info Dica Novas notificações, novas mensagens
bg-secondary Secundário Contagens auxiliares
Método de Navegação Vantagens Desvantagens Melhor Cenário
Navegação por grupo de lista Estilização rica, suporta distintivos Sem suporte a aninhamento Menus de barra lateral, abas
Nav nav-tabs Estilo de aba nativo, suporta dropdowns Sem suporte a distintivo Troca de abas de página
Navbar nav Responsivo, integração de marca Estrutura complexa Navegação principal superior
Dropdown Compacto, economiza espaço Mostra apenas item atual Menu de usuário, configurações

❓ Perguntas Frequentes

P: Grupos de lista podem ser aninhados? R: Não, o aninhamento não é suportado. Grupos de lista são projetados para uma estrutura plana. Para hierarquia, considere usar o componente Accordion do Bootstrap ou um ul aninhado manualmente.

P: Como controlar o border-radius de um distintivo? R: rounded-pill cria uma forma de pílula (extremidades semi-circulares), rounded-1/2/3 são graus variados de border-radius, sem ele o padrão é uma forma quadrada.

P: Um grupo de lista pode ser usado para navegação clicável? R: Sim. Use elementos <a> ou <button>, adicione list-group-item-action, e use active para indicar o item atualmente selecionado. É ideal para navegação de barra lateral.

P: O estado active de um grupo de lista persiste após atualizar a página? R: Não, não persiste automaticamente. active é uma classe estática. Após atualizar, precisa ser adicionada dinamicamente pelo back-end ou JavaScript com base na rota atual, por exemplo, usando correspondência window.location.

P: Qual a diferença entre colocar um grupo de lista dentro de um cartão vs. usá-lo diretamente? R: Um grupo de lista dentro de um cartão normalmente usa o estilo list-group-flush, então se alinha às bordas do cartão sem bordas e cantos extras, integrando-se visualmente como um todo. Um grupo de lista fora de um cartão tem suas próprias bordas e cantos.

📖 Resumo

📝 Exercícios

  1. ⭐ Crie uma lista de navegação de barra lateral em grupo de lista: 5 itens de menu, a página atual destacada como active, um definido como disabled, cada item exibe um distintivo numérico correspondente à direita.
  2. ⭐⭐ Crie uma lista de notificações usando grupo de lista + conteúdo personalizado: cada notificação tem um título, carimbo de tempo (small), prévia do corpo e suporta eventos de clique.
  3. ⭐⭐⭐ Crie um grupo de botões, cada botão exibe uma contagem de distintivo no canto superior direito, simulando "Caixa de Entrada (12)", "Aprovação Pendente (5)", "Rascunhos (3)".

Lição Anterior: Cartões · Próxima Lição: Tabelas

Web-Tutorial.com

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.

100%