Comentário gerado por IA. É um apoio ao estudo, ancorado em fontes, mas pode conter imprecisões — confira sempre na fonte oficial (lei, súmula, edital e gabarito da banca). Encontrou um erro? Use “Reportar”.
Bootstrap 4: Barra de Progresso
Gabarito: letra A. No Bootstrap 4, a barra de progresso é construída com um contêiner .progress e, dentro dele, uma barra .progress-bar cuja largura é controlada pelo estilo inline width:50%. O texto "50%" é inserido como conteúdo da própria .progress-bar. As demais alternativas invertem a hierarquia das classes ou usam propriedades inexistentes (progress-level, progress-label), o que as torna incorretas.
O Bootstrap é um framework CSS que fornece componentes prontos para acelerar o desenvolvimento front-end. Entre eles, o componente de barra de progresso (progress) é usado para indicar visualmente o andamento de uma tarefa, como um upload ou um formulário. A estrutura básica exige dois elementos aninhados: um contêiner com a classe progress (que define o fundo da barra) e um elemento filho com a classe progress-bar (que preenche a largura correspondente ao progresso). A largura é definida via CSS inline, geralmente com style="width: X%", onde X é o percentual desejado. O texto, como "50%", pode ser colocado dentro da progress-bar para exibir o valor numérico.
A razão de ser dessa estrutura é a separação entre o "trilho" (o contêiner) e o "preenchimento" (a barra). O contêiner .progress tem um fundo cinza e bordas arredondadas; a .progress-bar é colorida (azul por padrão) e sua largura é proporcional ao progresso. Essa separação permite que o mesmo componente sirva para diferentes percentuais, bastando alterar o valor do width.
Na prática, se você quisesse mostrar 75% de progresso, usaria style="width:75%" dentro da .progress-bar. O Bootstrap também oferece variações de cor (.bg-success, .bg-info, etc.) e barras listradas (.progress-bar-striped), mas a estrutura básica permanece a mesma.
A pegadinha desta questão está na inversão da hierarquia: algumas alternativas colocam a classe progress-bar como contêiner e progress como filho, o que está errado. Além disso, propriedades como progress-level e progress-label não existem no Bootstrap 4 — são invenções para confundir o candidato. O correto é sempre: .progress (pai) > .progress-bar (filho) com width inline.
Guarde essa estrutura: contêiner .progress → filho .progress-bar com width inline. É exatamente esse critério que separa a alternativa correta das demais.
Alternativa A — ✅ Correta ⟵ GABARITO
A alternativa A apresenta a estrutura correta: <div class="progress border"> como contêiner e <div class="progress-bar" style="width:50%">50%</div> como filho. A classe border adiciona uma borda ao contêiner, o que é compatível com a imagem (que mostra uma barra com borda). O width:50% define o preenchimento na metade, e o texto "50%" aparece dentro da barra. Tudo conforme o componente do Bootstrap 4.
Alternativa B — ❌ Incorreta
A alternativa B usa width:100%, o que preencheria a barra completamente, mas a imagem mostra a barra na metade (50%). O texto "50%" não condiz com a largura de 100%. O erro está no valor do width, que deve ser 50% para corresponder à imagem.
Alternativa C — ❌ Incorreta
A alternativa C inverte a hierarquia: coloca progress-bar como contêiner e progress como filho. No Bootstrap 4, a ordem correta é .progress (pai) e .progress-bar (filho). Além disso, usa progress-level:50, uma propriedade CSS que não existe no Bootstrap 4 — o correto seria width:50%. A estrutura está completamente equivocada.
Alternativa D — ❌ Incorreta
A alternativa D também inverte a hierarquia (progress-bar como contêiner e progress como filho) e usa width:100%, o que preencheria a barra inteira, contrariando a imagem que mostra 50%. O texto "50%" não corresponde à largura de 100%. Dois erros: hierarquia invertida e largura incorreta.
Alternativa E — ❌ Incorreta
A alternativa E inverte a hierarquia (progress-bar como contêiner e progress como filho) e usa progress-label:50, uma propriedade CSS inexistente no Bootstrap 4. O correto seria width:50% dentro da .progress-bar. A estrutura está errada e a propriedade é fictícia.
NÃO CAIA NESSA!
A banca explora a inversão da hierarquia das classes .progress e .progress-bar, além de inventar propriedades CSS como progress-level e progress-label. Lembre-se: o contêiner é sempre .progress, e a barra é .progress-bar com width inline. Com esse macete, você elimina as alternativas C, D e E na hora.
PEGA ESSA DICA!
Para questões de Bootstrap, decore a estrutura básica dos componentes mais cobrados: barra de progresso (.progress > .progress-bar), botões (.btn), cards (.card), etc. E desconfie de propriedades CSS que não são padrão — o Bootstrap usa width, height, background-color, etc., nunca progress-level ou progress-label.
