Criar emblemas no Bootstrap 5 é simples e conveniente. Veja como você pode fazer isso:
1. Incluir CSS Bootstrap: Certifique-se de ter incluído o arquivo Bootstrap CSS em seu documento HTML.
2. Use classes de selos: Bootstrap 5 fornece várias classes de emblemas que você pode aplicar a elementos para criar emblemas. As classes de crachás mais comumente usadas são:
- `.badge`:Esta é a classe básica do emblema. Ele cria um emblema pequeno e quadrado.
- `.badge-pill`:Esta classe cria um emblema arredondado.
- `.badge-primary`, `.badge-secondary`, `.badge-success`, `.badge-danger`, `.badge-warning`, `.badge-info`, `.badge-light`, e `.badge-dark`:Essas classes aplicam diferentes estilos de cores ao emblema.
3. Aplique a classe Badge: Para criar um emblema, adicione a classe de emblema apropriada ao elemento HTML que você deseja converter em um emblema. Aqui está um exemplo:
```html
Novo ```
Isso criará um emblema com estilo primário com o texto "Novo".
4. Adicionar conteúdo de texto: Coloque o texto ou conteúdo que deseja exibir no emblema entre as tags de abertura e fechamento do elemento.
5. Personalize as cores do emblema: Bootstrap 5 permite personalizar a cor de fundo do emblema usando classes adicionais. Por exemplo:
```html
Sucesso ```
Isso criará um emblema com estilo de sucesso com o texto "Sucesso". Da mesma forma, você pode usar outras classes de cores para personalizar a aparência do emblema.
6. Selos de posição: Você pode posicionar crachás usando as classes de utilitário de crachá `.badge-top`, `.badge-bottom`, `.badge-start` e `.badge-end`. Essas classes permitem colocar emblemas em posições específicas em relação ao elemento ao qual estão anexados.
7. Vários selos: Você pode adicionar vários emblemas a um elemento aplicando várias classes de emblemas. Os emblemas serão exibidos lado a lado.
8. Tamanhos de emblemas personalizados: Por padrão, os emblemas são pequenos. No entanto, você pode personalizar o tamanho dos emblemas usando as classes `.badge-lg` e `.badge-sm` para emblemas maiores e menores, respectivamente.
Lembre-se de que os crachás devem ser usados com moderação e para fins informativos ou de indicação de status, para evitar confusão visual.
Com essas etapas, você pode criar e personalizar facilmente emblemas usando Bootstrap 5.