La clase de tamaño del botón Bulma se usa para establecer el tamaño del botón. El botón de Bulma viene en cuatro tamaños diferentes: pequeño , mediano, normal y grande . Puedes establecer el tamaño del botón usando una de las 4 clases de CSS proporcionadas por Bulma. El tamaño predeterminado de un botón es normal.
Clases de tamaño de botón:
- is-small: esta clase se usa para establecer el tamaño del botón en pequeño
- is-normal: esta clase establece el tamaño del botón en normal.
- is-medium: esta clase se utiliza para establecer el tamaño del botón en medio.
- is-large : esta clase se usa para establecer el tamaño del botón en grande.
Sintaxis:
<button class="button is-large">
Button
</button>
Ejemplo: El siguiente ejemplo ilustra las clases de tamaño de botón en Bulma.
HTML
<!DOCTYPE html> <html> <head> <title>Bulma Button Sizes</title> <link rel='stylesheet' href= 'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> </head> <body class="has-text-centered"> <h1 class="is-size-2 has-text-success"> GeeksforGeeks </h1> <b>Bulma Button Sizes</b> <div class="container"> <button class="button is-small"> Small Button size </button> <button class="button"> Default Button Size </button> <button class="button is-normal"> Normal Button Size </button> <br> <br> <button class="button is-medium"> Medium Button Size </button> <button class="button is-large"> Large Button Size </button> </div> </body> </html>
Producción:
Referencia: https://bulma.io/documentation/elements/button/#sizes