Grupo de Lista Bootstrap 5

lista de grupos básica

A lista de grupos mais básica é uma lista não ordenada que contém itens de lista:

Para criar uma lista de grupos básica, use a classe .list-group do <ul> elemento e classe para .list-group-item do <li> elemento:

Exemplo

<ul class="list-group">
  <li class="list-group-item">Primeiro item</li>
  <li class="list-group-item">Segundo item</li>
  <li class="list-group-item">Terceiro item</li>
</ul>

Experimente pessoalmente

estado ativo

Use .active Classe para destacar o item atual:

Exemplo

<ul class="list-group">
  <li class="list-group-item active">item ativo</li>
  <li class="list-group-item">Segundo item</li>
  <li class="list-group-item">Terceiro item</li>
</ul>

Experimente pessoalmente

lista de grupos com itens de link

Para criar uma lista de grupos com itens de link, use <div> em vez de <ul>usando <a> em vez de <li>Opcionalmente, se você quiser um fundo cinza ao passar o mouse, adicione .list-group-item-action Classe:

Exemplo

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">primeiro item</a>
  <a href="#" class="list-group-item list-group-item-action">segundo item</a>
  <a href="#" class="list-group-item list-group-item-action">Terceiro item</a>
</div>

Experimente pessoalmente

Itens desativados

.disabled A classe adiciona uma cor de texto mais clara aos itens desativados. Quando usada em links, o efeito de passar o mouse sobre eles será removido:

Exemplo

<div class="list-group">
  <a href="#" class="list-group-item disabled">Item desativado</a>
  <a href="#" class="list-group-item disabled">Item desativado</a>
  <a href="#" class="list-group-item">Terceiro item</a>
</div>

Experimente pessoalmente

Remover bordas

Usando .list-group-flush Classe remove bordas e arredondamentos:

Exemplo

<ul class="list-group list-group-flush">
  <li class="list-group-item">Primeiro item</li>
  <li class="list-group-item">Segundo item</li>
  <li class="list-group-item">Terceiro item</li>
  <li class="list-group-item">Quarto item</li>
</ul>

Experimente pessoalmente

Lista numerada

Usando .list-group-numbered Classe cria itens de lista com números à frente:

Exemplo

<ol class="list-group list-group-numbered">
  <li class="list-group-item">Primeiro item</li>
  <li class="list-group-item">Segundo item</li>
  <li class="list-group-item">Terceiro item</li>
</ol>

Experimente pessoalmente

Lista horizontal

Se você deseja que os itens da lista sejam exibidos horizontalmente em vez de verticalmente (ao lado um do outro em vez de empilhados), adicione .list-group-horizontal Classe adicionada a .list-group:

Exemplo

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">Primeiro item</li>
  <li class="list-group-item">Segundo item</li>
  <li class="list-group-item">Terceiro item</li>
  <li class="list-group-item">Quarto item</li>
</ul>

Experimente pessoalmente

Classes de contexto

Classes de contexto podem ser usadas para adicionar cores aos itens de lista:

As classes para colorir itens de lista são:

  • .list-group-item-success
  • .list-group-item-secondary
  • .list-group-item-info
  • .list-group-item-warning
  • .list-group-item-danger
  • .list-group-item-primary
  • .list-group-item-dark
  • .list-group-item-light

Exemplo

<ul class="list-group">
  <li class="list-group-item list-group-item-success">Item de sucesso</li>
  <li class="list-group-item list-group-item-secondary">Item secundário</li>
  <li class="list-group-item list-group-item-info">Item de informação</li>
  <li class="list-group-item list-group-item-warning">Aviso item</li>
  <li class="list-group-item list-group-item-danger">Item perigoso</li>
  <li class="list-group-item list-group-item-primary">Item primário</li>
  <li class="list-group-item list-group-item-dark">Item escuro</li>
  <li class="list-group-item list-group-item-light">Item claro</li>
</ul>

Experimente pessoalmente

Item de link com classe de contexto

Exemplo

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">Item de ação</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">Item de sucesso</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">Item secundário</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">Item de informação</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">Aviso item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">Item perigoso</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">Item primário</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">Item escuro</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">Item claro</a>
</div>

Experimente pessoalmente

Lista de grupo com distintivo

Colocar .badge As classes e os tipos de utilidade/ajudante podem ser combinados para adicionar distintivos a grupos de lista:

Exemplo

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Caixa de entrada
    <span class="badge bg-primary rounded-pill">12</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    E-mails de publicidade
    <span class="badge bg-primary rounded-pill">50</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Lixeira
    <span class="badge bg-primary rounded-pill">99</span>
  </li>
</ul>

Experimente pessoalmente