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=
</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=
</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>
|
Output:
Bulma Button Displays
Reference: https://bulma.io/documentation/elements/button/#displays