Botones

Mediante la clase .btn podemos aplicar estilo a los elementos tipo button. Esta clase la podemos combinar con .btn-default, .btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger, .btn-link para crear botones para diferentes estados o acciones en nuestros formularios:

Botones

El código HTML que tendríamos que escribir para conseguir estos botones es el siguiente:

<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>

Tamaño de los botones

Podemos variar el tamaño de los botones simplemente añadiendo las clases .btn-lg, .btn-sm, o .btn-xs:

<p>
  <button type="button" class="btn btn-primary btn-lg">Large button</button>
  <button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">Default button</button>
  <button type="button" class="btn btn-default">Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">Small button</button>
  <button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>

Los botones del código anterior se mostrarían de la forma:

Tamaño de los botones

Elementos tipo botón

El estilo tipo botón no solo lo podemos aplicar sobre las etiquetas button sino que funcionará de la misma forma con <a> y <input>:

<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

Todos estos elementos se renderizarán de la misma forma:

Elementos tipo botón