Bootstrap 3: Botones, labels y alerts (2026)

Vamos a hablar sobre los Botones, labels y alerts de Bootstraps 3 que son elementos indispensables para nuestras aplicaciones y proyectos y tambien veamos los nuevos botones en bootstrap 5.

Botones en Bootstrap 3

Los botones en bootstrap 3 se crean simplemente creando un enlace con la clase “btn” y se agrega una clase extra para el color del boton la cual puede ser: blanco “btn-default”, azul “btn-primary”, amarillo “btn-warning”, verde “btn-success”, rojo “btn-danger”,celeste “btn-info”.

Los botones se pueden crear con las etiquetas a, button e input, segun sea el caso, el uso es el mismo solo basta incluir el atributo class y su valor correspondiente.

<a href="" class="btn btn-default">Your button</a>
<a href="" class="btn btn-primary">Your button</a>
<a href="" class="btn btn-success">Your button</a>
<a href="" class="btn btn-warning">Your button</a>
<a href="" class="btn btn-danger">Your button</a>
<a href="" class="btn btn-info">Your button</a>

Tamaños

A los botones también se les puede definir un tamaño, para ello se anexan las clases: normal “btn-md”, chica “btn-sm”, extrachica “btn-xs”, grande “btn-lg”.

La clase “btn-md” es el tamaño por default, aunque no se especifique el tamaño.

<a href="" class="btn btn-default btn-sm">Your button</a>
<a href="" class="btn btn-default btn-xs">Your button</a>
<a href="" class="btn btn-default btn-lg">Your button</a>

Labels en Bootstrap 3

Los labels o etiquetas se usan normalmente para especificar o resaltar textos de cierta importancia en nuestra aplicación web.

Para los labels se puede utilizar la etiqueta span o div y se usa la misma nomenclatura de colores que en los botones, solo que en lugar de “btn” se usa “label”.

<span class="label label-default">Your label</span>
<span class="label label-primary">Your label</span>
<span class="label label-success">Your label</span>
<span class="label label-warning">Your label</span>
<span class="label label-danger">Your label</span>
<span class="label label-info">Your label</span>

El resultado seria algo similar a lo que se ve en la imagen superior.

Alerts en Bootstrap 3

Las alertas se utilizan para expresar mensajes.

Se pueden crear usando la etiqueta div, span o p, la nomenclatura es similar, solo que no existe “primary” ni “default”, tambien se hace uso del atributo role=”alert”.

<div class="alert alert-warning" role="alert">Your alert</div>
<div class="alert alert-success" role="alert">Your alert</div>
<div class="alert alert-info" role="alert">Your alert</div>
<div class="alert alert-danger" role="alert">Your alert</div>

Botones en Bootstrap 5

Los botones en bootstrap 5 se cambio el boton default por secondary y se incluyeron los botones light y dark y nuevas clases.

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>

Conclusión

Estos componentes le dan un nuevo sabor a las aplicaciones web y a la experiencia del usuario, fácil mente se puede entender los colores azul primary y verde success como operaciones exitosas, amarillo warning como advertencias y rojo danger como peligro o error.

Para tu próxima aplicación web no olvides de usar bootstrap y sacar el máximo provecho utilizando estos y otros componentes.

Te puede interesar: Inventio Max – Sistema de Inventario y Ventas