Questão de Programação — Frameworks em Programação — Quadrix 2024

Bootstrap: sistema de grid e a classe row

Gabarito: E — ERRADO. A classe row no Bootstrap não define uma coluna de largura média; ela é o contêiner de linhas que agrupa colunas (col-*) dentro do sistema de grid responsivo. A afirmação confunde a função da row com a das classes de coluna, como col-md-*, que são as que realmente definem larguras (inclusive as médias, com o breakpoint md).

O Bootstrap é um framework CSS que organiza o layout por meio de um sistema de grid de 12 colunas. Esse sistema é construído a partir de três elementos principais: o contêiner (container), a linha (row) e as colunas (col-*). A row atua como um wrapper (invólucro) que agrupa um conjunto de colunas, garantindo que elas fiquem alinhadas horizontalmente e que os espaçamentos (gutters) entre elas sejam aplicados corretamente. Ela não possui, por si só, qualquer definição de largura — quem define a largura são as classes de coluna, que podem ser fixas (col-1, col-2, ..., col-12) ou responsivas (col-sm-*, col-md-*, col-lg-*, col-xl-*).

Para entender a pegadinha, é preciso dominar os breakpoints do Bootstrap. O framework define pontos de quebra para telas de diferentes tamanhos: sm (≥576px), md (≥768px), lg (≥992px), xl (≥1200px) e xxl (≥1400px). Quando se fala em "largura média", a banca está se referindo ao breakpoint md — ou seja, a classe que define uma coluna de largura média seria algo como col-md-6, e não a row. A row é neutra em relação a largura; ela apenas organiza as colunas dentro dela.

Na prática, um layout responsivo típico seria:

<div class="container">
  <div class="row">
    <div class="col-md-6">Coluna esquerda (metade da largura em telas médias)</div>
    <div class="col-md-6">Coluna direita (metade da largura em telas médias)</div>
  </div>
</div>

Aqui, a row é apenas o contêiner que agrupa as duas colunas; são as classes col-md-6 que definem que cada coluna ocupará 6 das 12 unidades do grid em telas médias. Se a row fosse uma coluna, o sistema de grid não funcionaria — ela é o elemento estrutural que permite que as colunas existam lado a lado.

A banca explora exatamente essa confusão: o candidato que sabe que row está relacionada ao layout responsivo pode assumir que ela define largura, mas a função dela é agrupar colunas, não definir largura. A largura é sempre definida pelas classes col-*. Essa distinção é o critério decisivo para julgar o item.

Item — ❌ Errado

A afirmação diz que "a classe row é utilizada para definir uma coluna de largura média em um layout responsivo do Bootstrap". Isso está errado por dois motivos: (1) a row não define coluna alguma — ela é o contêiner de linhas que agrupa colunas; (2) a largura média, se fosse o caso, seria definida por uma classe col-md-*, não pela row. A row é um elemento estrutural do grid, sem qualquer atribuição de largura. Portanto, o item é falso.

Gabarito: E — ERRADO.