Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App
geeksforgeeks
Browser
Continue

Related Articles

Bulma Delete Sizes

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

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=
 
    <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>

Output:

Bulma Delete Sizes

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


My Personal Notes arrow_drop_up
Last Updated : 09 Feb, 2022
Like Article
Save Article
Similar Reads
Related Tutorials