Nota : Não usar o ../BootstrapEngine/css/bootstrap.min.css. Usar o ../BootstrapEngine/css/bootstrap.css

Nota : Contextualização é a exibição de uma informação caracterizada pela circunstância que ela foi criada.
Então se o processo terminou com sucesso a mensagem deveria ter um tom claro, cor de fundo verde clara, etc..
Mas se o processo terminou com erro a mensagem deveria ser em tom escuro, cor de fundo vermelha, etc.
Portanto contextualizar é exibir o botão, a mensagem com o contexto de sucesso, falha, informação.

---

Botão básico

Como usar :
<button type="button" class="btn">Basic Button</button>

Como é exibido :
Basic Button

---

Botão em bloco

A classe .btn-block faz o bloco do botão esticar até ocupar a largura do elemento parente:

Como usar :
<button type="button" class="btn btn-info btn-block">Block-level Button</button>

Como é exibido :
Block-level Button

---

Estilos de botão com contexto

Como usar :
<button type="button" class="btn btn-primary">Primary</button>

Como é exibido :
Basic Primary Secondary Success Info Warning Danger Dark Light Link

---

Botões grandes - Podem ser contextualizados

A classe .btn-lg faz os botões ficarem grandes

Como usar :
<button type="button" class="btn btn-primary btn-lg">Botão grande Primary</button>

Como é exibido :
Botão grande Default Botão grande Primary Botão grande Secondary Botão grande Success Botão grande Info Botão grande Warning Botão grande Danger Botão grande Dark Botão grande Light Botão grande Link

---

Botão tipo link

A classe .btn-link faz um botão parecer como um link mas continua com todos os comportamentos de botão :

Como usar :
<button type="button" class="btn btn-link">Botao estilo Link</button>

Como é exibido :
Botao estilo Link

---

Botões estilo delineada ( Outlined )

A classe .btn-outline-* cria botões delineados e podem ser contextualizados :

Como usar :
<button type="button" class="btn btn-outline-primary">Primary</button>

Como é exibido :
Primary Secondary Success Info Warning Danger Dark Light

---

Botões pequenos

A classe .btn-sm faz os botões ficarem pequenos :

Como usar :
<button type="button" class="btn btn-sm">Botão Pequeno Default</button>

Como é exibido :
Botão Pequeno Default Botão Pequeno Basico Botão Pequeno Primary Botão Pequeno Secondary Botão Pequeno Success Botão Pequeno Info Botão Pequeno Warning Botão Pequeno Danger Botão Pequeno Dark Botão Pequeno Light Botão Pequeno Link

---

Toolbar de botões

As classes .btn-toolbar e btn-group combinam um conjunto de botões agrupados em uma barra de ferramentas.

Como usar :
        <div class="btn-toolbar">
            <div class="btn-group">
                <button type="button" class="btn">1</button>
                <button type="button" class="btn btn-primary">2</button>
                <button type="button" class="btn btn-secondary">3</button>
            </div>
            <div class="btn-group">
                <button type="button" class="btn btn-success">5</button>
                <button type="button" class="btn btn-info">6</button>
            </div>
            <div class="btn-group">
                <button type="button" class="btn btn-warning">8</button>
                <button type="button" class="btn btn-danger">9</button>
                <button type="button" class="btn btn-dark">10</button>
                <button type="button" class="btn btn-light">11</button>
                <button type="button" class="btn btn-link">12</button>
            </div>
        </div>

Como é exibido :

---

Status de botões - Ativo

A classe .active faz o botão parecer pressionado ou quando o mouse passa por ele:

Como usar :
<button type="button" class="btn btn-primary active">Botão Primary ativo</button>

Como é exibido :
Botão Primary comum Botão Primary ativo

Botão info comum Botão InfoActive ativo

Nota : No exemplo acima utilizei as classes Primary e Info mas podemos usar as outras classes de botões (Default, Secondary, Success, warning, danger, light e link)

---

Botão desabilitado

A atributo disabled desabilita o botão :

Como usar :
<button type="button" class="btn" disabled="disabled">Botão Default Desabilitado</button>

Como é exibido :
Botão Default Desabilitado Botão Default Habilitado

Nota : No exemplo acima utilizei as classe Default mas podemos usar as outras classes de botões (Primary, Secondary, Info, Success, warning, danger, light e link)