Classes para Botões no Bootstrap

As classes para botões no Bootstrap servem para estilizar e dar funcionalidades aos botões em um site ou aplicativo, como tamanho, cor, estilo de borda, entre outros.

Dica: veja outros artigos sobre bootstrap clicando aqui.

Lista com classes para botões e Spinners

Abaixo listo classes do bootstrap para botões:

• btn: classe base para botões.
• btn-primary: botão com cor de fundo primária.
• btn-secondary: botão com cor de fundo secundária.
• btn-success: botão com cor de fundo de sucesso.
• btn-danger: botão com cor de fundo de perigo.
• btn-warning: botão com cor de fundo de aviso.
• btn-info: botão com cor de fundo informativa.
• btn-light: botão com cor de fundo clara.
• btn-dark: botão com cor de fundo escura.
• btn-link: botão com aparência de link.

Essas classes de botões podem ser usados dentro de tags <button>, <a> e <input> do HTML.

Também demos botões sem cores de fundo e apenas com contorno. Criamos esses botões usando classes do tipo btn-outline,

• btn-outline-primary: botão com contorno primário.
• btn-outline-secondary: botão com contorno secundário.
• btn-outline-success: botão com contorno de sucesso.
• btn-outline-danger: botão com contorno de perigo.
• btn-outline-warning: botão com contorno de aviso.
• btn-outline-info: botão com contorno informativo.
• btn-outline-light: botão com contorno claro.
• btn-outline-dark: botão com contorno escuro.

Podemos ainda usar classes de tamanho de botões e de controle de espaço

• .btn-lg
• .btn-sm
• .d-grid
• .gap-*

Podemos estilizar os botões para aparentar ativado e desativado

• .active
• .disabled

e o melhor de todos que, particularmente, eu achei e gostei, são os botões de carregamento ou que indicam “processando”. São conhecidos como os “spinners” ou giratórios.

Devemos fazer como fizemos acima, mas criar um <span> contendo o tipo de giro

• spinner-border e spinner-border-sm para tamanho
• spinner-grow para brilho e spinner-grow-sm para tamanho

Veja exemplos

posto linhas e após imagem ilustrada

        <div class="container m-4" >

                <h1>Botões do Bootstrap</h1></br>

<button type="button" class="btn">Básico</button>
<button type="button" class="btn btn-primary">Primário</button>
<button type="button" class="btn btn-secondary">Secundário</button>
<button type="button" class="btn btn-success">Sucesso</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Alerta</button>
<button type="button" class="btn btn-danger">Crítico</button>
<button type="button" class="btn btn-dark">Escuro</button>
<button type="button" class="btn btn-light">Suave</button>
<button type="button" class="btn btn-link">Link</button>


</br></br></br> <h1>Botões do Bootstrap com apenas contorno</h1> </br>


<button type="button" class="btn btn-outline-primary">Primiário</button>
<button type="button" class="btn btn-outline-secondary">Secundário</button>
<button type="button" class="btn btn-outline-success">Suceso</button>
<button type="button" class="btn btn-outline-info">Informativo</button>
<button type="button" class="btn btn-outline-warning">Alerta</button>
<button type="button" class="btn btn-outline-danger">Crítico</button>
<button type="button" class="btn btn-outline-dark">Escuro</button>
<button type="button" class="btn btn-outline-light text-dark">Suave</button>


</br></br></br> <h1>Botões do Bootstrap ativado e desativado</h1> </br>

<button type="button" class="btn btn-primary active">Ativado</button>
<button type="button" class="btn btn-primary" disabled>Desativado</button>
<a href="#" class="btn btn-primary disabled">Linki desativado</a>


</br></br></br> <h1>Botões do Bootstrap ativado e desativado</h1> </br>

<button class="btn btn-primary">
  <span class="spinner-border spinner-border-sm"></span>
</button>

<button class="btn btn-primary">
  <span class="spinner-border spinner-border-sm"></span>
  Carregando..
</button>

<button class="btn btn-primary" disabled>
  <span class="spinner-border spinner-border-sm"></span>
  Processando..
</button>

<button class="btn btn-primary" disabled>
  <span class="spinner-grow spinner-grow-sm"></span>
  Loading..
</button>



        </div>

Esses botões de processamento “não terminado” são chamados de spinners, conforme mencionei acima. Vamos falar um pouco mais sobre eles.

Spinners giratórios no Bootstrap e suas cores

A classe, como já sabemos, para os spinners (giratórios) é a .spinner-border que pode ter cores diferentes através dos .text-*

• text-primary: Define a cor primária do tema.
• text-secondary: Define uma cor secundária.
• text-success: Define uma cor indicando sucesso.
• text-danger: Define uma cor indicando perigo ou erro.
• text-warning: Define uma cor indicando um aviso ou alerta.
• text-info: Define uma cor para informações adicionais.
• text-light: Define uma cor clara, geralmente usada em fundos escuros.
• text-dark: Define uma cor escura, geralmente usada em fundos claros.

Exemplo,

Spinners de crescimento (growing)

Podemos usar a classe .spinner-grow para que o spinner/loader cresça em vez de “girar”:

<div class="spinner-grow text-muted"></div>

Podemos criar um spinner menor com .spinner-border-sm ou .spinner-grow-sm

Vejamos alguns exemplos com imagens

<div class="container m-4" >

</br></br></br> <h1>Spinners do Bootstrap com Cores Variadas</h1> </br>

<div class="spinner-grow text-muted"></div>
<div class="spinner-border text-primary"></div>
<div class="spinner-border text-success"></div>
<div class="spinner-border text-info"></div>
<div class="spinner-border text-warning"></div>
<div class="spinner-border text-danger"></div>
<div class="spinner-border text-secondary"></div>
<div class="spinner-border text-dark"></div>
<div class="spinner-border text-light"></div>


</br></br></br> <h1>Spinners de Crescimento do Bootstrap com Cores Variadas</h1> </br>

<div class="spinner-grow text-muted"></div>
<div class="spinner-grow text-primary"></div>
<div class="spinner-grow text-success"></div>
<div class="spinner-grow text-info"></div>
<div class="spinner-grow text-warning"></div>
<div class="spinner-grow text-danger"></div>
<div class="spinner-grow text-secondary"></div>
<div class="spinner-grow text-dark"></div>
<div class="spinner-grow text-light"></div>