Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
6
respostas

Badge do Bootstrap não funcionando

Referente ao curso Laravel parte 2: trabalhando com Autenticação, Relacionamentos e Testes, no capítulo Assistindo episódios e atividade Exibindo o número de episódios

por João Victor Passareli Galvão
| 160.8k xp | 51 posts
Desenvolvedor Back-End PHP Junior

Olá pessoal, Estou com um problema estranho em meu código, o site está funcionando normalmente, apresentando a quantidade correta de temporadas e episódios, porém, o badge do bootstrap não está "aparecendo", conforme demonstro nas imagens abaixo:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Porém, ao selecionar com o mouse os textos, verifiquei com aparecem os episódios, porém, com a cor em branco. Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Tentei mudar o estilo do badge, para verificar se trocava a cor, mas não aconteceu, olhei na documentação e fiz testes com o badge-dark, badge-warning, badge-success e nada... O que poderia ser? Segue meu código:

@section('conteudo')
    <ul class="list-group ">
        @foreach($temporadas as $temporada)
            <li class="list-group-item d-flex justify-content-between align-items-center">
                <a href="#">{{ $temporada->numero; }}ª Temporada</a>
                <span class="badge badge-secondary">
                    0 / {{ $temporada->episodios->count() }}
                </span>
            </li>
        @endforeach
    </ul>
@endsection
6 respostas
por Vinicius Dias
| 2870.9k xp | 4249 posts
Instrutor Zend Certified PHP Engineer

Qual versão do bootstrap você está utilizando? Qual o CSS que você importou?

por João Victor Passareli Galvão
| 160.8k xp | 51 posts
Desenvolvedor Back-End PHP Junior

Acredito que seja a versão 5.1.3. Segue abaixo a importação no arquivo layout.blade

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Controle de Séries</title>
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <script src="https://kit.fontawesome.com/d440843c99.js" crossorigin="anonymous"></script>
</head>
<body>
    <div class="container">
        <div>
            <h1 align="center">@yield('cabecalho')</h1>
        </div>

        @yield('conteudo')
    </div>
</body>
</html>
por Vinicius Dias
| 2870.9k xp | 4249 posts
Instrutor Zend Certified PHP Engineer

João, parece tudo certinho. Pode me enviar o HTML gerado pra garantir que não tem aspas faltando ou coisa do tipo?

por João Victor Passareli Galvão
| 160.8k xp | 51 posts
Desenvolvedor Back-End PHP Junior

Felipe, seria este HTML que você diz?


<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Controle de Séries</title>
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <script src="https://kit.fontawesome.com/d440843c99.js" crossorigin="anonymous"></script>
</head>
<body>
    <div class="container">
        <div>
            <h1 align="center">Brooklyn 99 <br><br>
Temporadas
</h1>
        </div>

            <ul class="list-group ">
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                <a href="/temporadas/118/episodios">1ª Temporada</a>
                <span class="badge badge-secondary">
                    0 / 25
                </span>
            </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                <a href="/temporadas/119/episodios">2ª Temporada</a>
                <span class="badge badge-secondary">
                    0 / 25
                </span>
            </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                <a href="/temporadas/120/episodios">3ª Temporada</a>
                <span class="badge badge-secondary">
                    0 / 25
                </span>
            </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                <a href="/temporadas/121/episodios">4ª Temporada</a>
                <span class="badge badge-secondary">
                    0 / 25
                </span>
            </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                <a href="/temporadas/122/episodios">5ª Temporada</a>
                <span class="badge badge-secondary">
                    0 / 25
                </span>
            </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                <a href="/temporadas/123/episodios">6ª Temporada</a>
                <span class="badge badge-secondary">
                    0 / 25
                </span>
            </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                <a href="/temporadas/124/episodios">7ª Temporada</a>
                <span class="badge badge-secondary">
                    0 / 25
                </span>
            </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                <a href="/temporadas/125/episodios">8ª Temporada</a>
                <span class="badge badge-secondary">
                    0 / 25
                </span>
            </li>
            </ul>
    </div>
</body>
</html>
solução!
por Vinicius Dias
| 2870.9k xp | 4249 posts
Instrutor Zend Certified PHP Engineer

Ah, você está usando a versão 5, mas as classes da versão 4.

Aqui está a documentação da versão 5: https://getbootstrap.com/docs/5.1/components/badge/

Ao invés de badge-secondary, é bg-secondary

por João Victor Passareli Galvão
| 160.8k xp | 51 posts
Desenvolvedor Back-End PHP Junior

Perfeito Vinicius, era este mesmo o problema. Fiz a alteração agora e funcionou corretamente. Muito obrigado, nem havia percebido que cometi este erro bobo.