Blaze UI Button Sizes

Bulma Button Sizes

Last Updated : 09 Feb, 2022

Bulma Button size class is used to set the size of the button. The button in Bulma comes in four different sizes: small, medium, normal, and large. You can set the button size using one of 4 CSS classes provided by Bulma. The default size of a button is normal.

Button Size Classes:

is-small: This class is used to set the button size to small
is-normal: This class sets the button size to normal.
is-medium: This class is used to set the button size to medium.
is-large: This class is used to set the button size to large.

Syntax:

<button class="button is-large">
    Button
</button>

Example: The below example illustrates the button size classes in Bulma.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Bulma Button Sizes</title>
    <link rel='stylesheet' href=
'https://cdn.jsdelivr.net/npm/[email protected]/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>

Output:

Bulma Button Sizes

Reference: https://bulma.io/documentation/elements/button/#sizes

Blaze UI Button Sizes

vpsop

Improve

Article Tags :

Similar Reads

Bulma Button Styles

Bulma Button style class is used to set the style of the button. There are four pre-defined button styles in Bulma: Outlined, Inverted, Outlined Inverted, and Rounded. You can set the button style with the help of three CSS classes provided by Bulma. Bulma Button Styles Classes: is-outlined: This cl

Bulma Button States

Bulma Button state classes are used to style the button according to a specific state. Using Bulma state classes we can style the buttons like if it is being hovered or is in focus without triggering that state. Bulma Button State classes: is-hovered: This class is used to style the button as if it

Bulma Buttons List

Bulma Button List is used to group buttons in a list. Button List can be created by wrapping the buttons in an HTML div with class buttons. If the list is longer than the current viewport width, the buttons will be wrapped on multiple lines while keeping the spacing between the buttons constant. But

Blaze UI Button Sizes

In this article, we'll see Blaze UI buttons of different sizes. Blaze UI is a free, open-source UI toolkit to build a great website. It provides you with various features like responsiveness, custom components, etc.Â The buttons in Blaze UI are available in 6 different sizes and those are discussed

Bulma Icon Sizes

Bulma Icon Size classes are used to define the size of the icon container. The icon container in Bulma comes in 4 different sizes: small, default, medium, and large. The icon container size can be set by using the CSS classes provided by Bulma. The default dimensions of the icon container are 1.5rem

Bulma Section Sizes

In this article, we'll be seeing the Bulma section sizes. In Bulma, there are two types of sizes available that divide the webpage content into different sections with different spacing/paddings.Â Bulma Section Sizes class: is-medium- This class of Bulma is used to divide the webpage content into di

Bulma Button Variables

Bulma is a free, and open-source CSS framework based on flexbox. It is component rich, compatible, and well documented. It is highly responsive in nature. It uses classes to implement its design.Buttons in Bulma CSS have classic designs in different colors, sizes, and states which makes it interacti

Bulma is a free, and open-source CSS framework based on Flexbox. It is component rich, compatible, and well documented. It is highly responsive in nature. It uses classes to implement its design. Buttons in Bulma CSS has classic designs in different colors, sizes, and states which makes it interacti

Bulma Input Sizes

Bulma is a free, open-source CSS framework based on Flexbox. It is component-rich, compatible, and well documented. It is highly responsive in nature. It uses classes to implement its design. Bulma Input Size is used to set the size of input fields. There are four different input sizes available in

Bulma Button Displays

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 C