Simulador de Formulário Responsivo

O conceito

Formulário é onde tudo que você viu nos outros simuladores aparece de uma vez. Não existe um "sistema de formulário" separado no Bootstrap: é o mesmo grid de 12 colunas embrulhando campos comuns.

.row .g-3

A linha do grid, com gutter — é ele que separa os campos, não margem em cada um.

.col-12 .col-md-6

Um campo por linha no celular, dois a partir do tablet. A regra de sempre.

.form-control

Só isso transforma um <input> comum em campo do Bootstrap, já com 100% de largura.

Três detalhes que costumam passar batido

Toda label precisa de for apontando para o id do campo. Sem isso, clicar no rótulo não foca o campo e o leitor de tela não sabe o que é o quê.
form-floating põe o rótulo dentro do campo, e ele sobe quando você digita. Exige a ordem input e depois label no HTML — ao contrário do normal.
Validação é classe, não mágica: is-valid e is-invalid pintam a borda e revelam a invalid-feedback. Quem decide quando aplicá-las é o seu JavaScript.

Largura da tela

1200 px

xl

Quantos campos por linha

Estilo do rótulo

Estado de validação

O conceito

Três detalhes que costumam passar batido

O HTML de um campo