Bulma Delete Sizes

Last Updated : 09 Feb, 2022

Bulma is a free and open-source CSS framework that ships with premade components and elements. It makes the development of websites very fast as you do not have to style everything from scratch.

Bulma Delete Size is a stand-alone element that can be used for several purposes. It is just a circle with a cross inside it. The Bulma delete element comes in 4 different sizes: small, default, medium, and large.

Bulma Delete Size Classes:

is-small: This class is used to make the delete element small in size.
is-medium: This class is used to make the delete element medium in size.
is-large: This class is used to make the delete element large in size.

Syntax:

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

Below example illustrate the Bulma Delete Sizes:

Example: The below example illustrates the use of the Bulma delete size classes.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Bulma Delete Sizes</title>
    <link rel='stylesheet' href=
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>
 
    <style>
        div.container > div {
            margin: 20px;
        }
    </style>
</head>
 
<body class="has-text-centered">
    <h1 class="is-size-2 has-text-success">
        GeeksforGeeks
    </h1>
     
    <b>Bulma Delete Sizes</b>
     
    <div class="container">
        <div>
            <span>Normal Size: </span>
            <button class="delete"></button>
        </div>
        <div>
            <span>Small Size: </span>
            <button class="delete is-small"></button>
        </div>
        <div>
            <span>Medium Size: </span>
            <button class="delete is-medium"></button>
        </div>
 
        <div>
            <span>Large Size: </span>
            <button class="delete is-large"></button>
        </div>
    </div>
</body>
 
</html>