Bulma Button Displays

Last Updated : 09 Feb, 2022

Bulma is an open-source CSS framework that provides pre-built components which can be combined together to make responsive websites and web applications. We can choose the display of buttons in Bulma as per our choice. Mainly there are four displays of buttons is available in Bulma.

Bulma Displays Class:

Normal: Button has a normal display as by default.
is-small: To give a small display to the button we use class is-small.
is-medium: To give a small display to the button we use class is-medium.
is-large: To give a small display to the button we use class is-large.

Syntax:

<button class="button display-class">
    ...
</button>

Example 1: In the example below, we are trying to illustrate the Button Display Classes.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Bulma Button Displays</title>
    <link rel='stylesheet' href=
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>
</head>
 
<body class="has-text-centered">
    <h2 class="is-size-2 has-text-success">
        GeeksforGeeks
    </h2>
    <b>Bulma Button Displays</b><br>
    <button class="button is-small 
                   is-success">Small</button>
    <button class="button 
                   is-success">Normal</button>
    <button class="button is-medium 
                   is-success">Medium</button>
    <button class="button is-large 
                   is-success">Large</button>
</body>
 
</html>

Output:

Bulma Button Displays

Example 2: In the example below, we are trying to illustrate the Button Display Classes.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Bulma Button Displays</title>
    <link rel='stylesheet' href=
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>
</head>
<body class="has-text-centered">
    <h2 class="is-size-2 has-text-success">
        GeeksforGeeks
    </h2>
    <b>Bulma Button Displays</b><br>
    <button class="button is-small 
                   is-success">GeeksforGeeks</button>
    <button class="button is-success">GeeksforGeeks</button>
    <button class="button is-medium 
                   is-success">GeeksforGeeks</button>
    <button class="button is-large 
                   is-success">GeeksforGeeks</button>
</body>
 
</html>