← Voltar

Montador de Componentes

Ligue e desligue classes e veja o HTML sendo escrito junto com o resultado.

O conceito

Componente do Bootstrap não é uma tag mágica: é HTML comum + uma combinação de classes. E essas classes seguem sempre o mesmo padrão — uma classe base que define o que a coisa é, mais modificadores que mudam cor, tamanho e formato.

btn btn-primary btn-lg

classe base

Sem ela nada funciona. btn é o que transforma um <button> ou um <a> em botão do Bootstrap.

modificadores

Opcionais e combináveis. Quase sempre repetem o nome da base: btn-primary, btn-lg, btn-outline-danger.

As cores não são livres: são os papéis do tema (primary, secondary, success, danger, warning, info, light, dark). Trocar o valor de $primary no Sass muda todos os componentes que usam esse papel de uma vez.

Componente


Modificadores

Resultado

O HTML correspondente