Bulma | Delete

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.
delete is an element that can be used in different context. This is a link or a button that is used to pop off a page, a box, a model on the page. Some JavaScript code is triggered when someone clicks on that delete button and that JavaScript code leads to popped of that model (Bulma is a pure CSS framework, it only responsible for the designing part).

Example 1: This example creates differnt sizes to delete an element option.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>Bulma Delete</title>
    <link rel='stylesheet' href=
  
    <!-- custom css -->
    <style>
        div.columns {
            margin-top: 80px;
        }
  
        h1 {
            width: 100%;
            margin-top: 70px;
            color: green !important
        }
  
        div.columns {
            margin-top: 10px;
        }
  
        div.column {
            text-align: center;
        }
  
        .custom {
            margin-bottom: 10px;
        }
    </style>
</head>
  
<body>
    <div class='container'>
        <div>
            <h1 class='title has-text-centered'>
                Delete Elements
            </h1>
        </div>
          
        <div class='columns is-mobile is-centered'>
            <div class='column is-5'>
                <div class='custom'>
                    <strong>Small : </strong>
                    <a class="delete is-small"></a>
                </div>
  
                <div class='custom'>
                    <strong>Default : </strong>
                    <a class="delete"></a>
                </div>
  
                <div class='custom'>
                    <strong>Medium : </strong>
                    <a class="delete is-medium"></a>
                </div>
  
                <div class='custom'>
                    <strong>Large : </strong>
                    <a class="delete is-large"></a>
                </div>
            </div>
        </div>
    </div>
</body>
  
</html>

chevron_right


Output:

Example 2: This example creates a delete element with background color.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>Bulma Delete</title>
    <link rel='stylesheet' href=
  
    <!-- custom css -->
    <style>
        div.columns {
            margin-top: 80px;
        }
  
        h1 {
            width: 100%;
            margin-top: 70px;
            color: green !important
        }
  
        div.columns {
            margin-top: 10px;
        }
  
        div.column {
            text-align: center;
        }
  
        .custom {
            margin-bottom: 10px;
        }
    </style>
</head>
  
<body>
    <div class='container'>
        <div>
            <h1 class='title has-text-centered'>
                Delete Elements
            </h1>
        </div>
  
        <div class='columns is-mobile is-centered'>
            <div class='column is-5'>
                <div class='custom'>
                    <strong>Small : </strong>
                    <a class="delete is-small 
                        has-background-danger"></a>
                </div>
  
                <div class='custom'>
                    <strong>Default : </strong>
                    <a class="delete 
                        has-background-danger"></a>
                </div>
  
                <div class='custom'>
                    <strong>Medium : </strong>
                    <a class="delete is-medium 
                        has-background-danger"></a>
                </div>
  
                <div class='custom'>
                    <strong>Large : </strong>
                    <a class="delete is-large 
                        has-background-danger"></a>
                </div>
            </div>
        </div>
    </div>
</body>
  
</html>

chevron_right


Output:



Example 3:

filter_none

edit
close

play_arrow

link
brightness_4
code

<html>
  
<head>
    <title>Bulma Delete</title>
    <link rel='stylesheet' href=
  
    <!-- custom css -->
    <style>
        div.columns {
            margin-top: 80px;
        }
  
        h1 {
            margin-top: 10px;
            margin-bottom: 20px;
        }
  
        div.columns {
            margin-top: 10px;
        }
  
        div.column {
            text-align: center;
        }
  
        .custom {
            margin-bottom: 10px;
        }
  
        p {
            font-size: 20px;
            font-family: calibri;
            text-align: left;
        }
  
        p button.delete {
            float: right;
            margin-top: 5px;
        }
  
        span {
            font-size: 25px;
            font-family: calibri;
        }
  
        #chellange {
            font-size: 25px;
            font-family: calibri;
        }
    </style>
</head>
  
<body>
    <div class='container'>
        <div class='columns 
            is-mobile is-centered'>
  
            <!-- Start of DO -->
            <div class='column is-5'>
                <div>
                    <h1 class='title has-text-centered'
                        style='color:green'>TODO</h1>
                </div>
                <div class='notification is-success'>
                    <button class="delete"></button>
  
                    <div class='list'>
                        <div class='list-item'>
                            <p>
                                Explore yourself in a 
                                particular language.
                                <button class="delete 
                                    has-background-success">
                                </button>
                            </p>
                        </div>
  
                        <div class='list-item'>
                            <p>
                                Refer API documentation 
                                for new things.
                                <button class="delete 
                                    has-background-success">
                                </button>
                            </p>
                        </div>
  
                        <div class='list-item'>
                            <p>
                                Dont follow DRY principle.
                                <button class="delete 
                                    has-background-success">
                                </button>
                            </p>
                        </div>
  
                        <div class='list-item'>
                            <p>
                                write comments while coding.
                                <button class="delete 
                                    has-background-success">
                                </button>
                            </p>
                        </div>
  
                        <div class='list-item'>
                            <p>
                                Keep your code clean 
                                as possible.
                                <button class="delete 
                                    has-background-success">
                                </button>
                            </p>
                        </div>
  
                        <div class='list-item'>
                            <p>
                                Use inline css styling.
                                <button class="delete 
                                    has-background-success">
                                </button>
                            </p>
                        </div>
  
                        <div class='list-item'>
                            <p>
                                Create your own projects.
                                <button class="delete 
                                    has-background-success">
                                </button>
                            </p>
                        </div>
  
                    </div>
                </div>
            </div>
  
            <!-- Start of DONT -->
            <div class='column is-5 '>
                <div>
                    <h1 class='title has-text-centered' 
                        style='color:red'>TODONT</h1>
                </div>
                <div class='notification is-danger'>
                    <button class="delete"></button>
  
                    <div class='list'>
                        <div class='list-item'>
                            <p>
                                Use Nesting loops as possible.
                                <button class="delete 
                                    has-background-danger">
                                </button>
                            </p>
                        </div>
  
                        <div class='list-item'>
                            <p>
                                Use Promises in place 
                                of callbacks.
                                <button class="delete 
                                    has-background-danger">
                                </button>
                            </p>
                        </div>
  
                        <div class='list-item'>
                            <p>
                                Learn to code in isolation
                                <button class="delete 
                                    has-background-danger">
                                </button>
                            </p>
                        </div>
  
                        <div class='list-item'>
                            <p>
                                Use online Platforms to 
                                practice.
                                <button class="delete 
                                    has-background-danger">
                                </button>
                            </p>
                        </div>
  
                        <div class='list-item'>
                            <p>
                                Don't follow KISS 
                                principle of coding.
                                <button class="delete 
                                    has-background-danger">
                                </button>
                            </p>
                        </div>
  
                        <div class='list-item'>
                            <p>
                                works on others project.
                                <button class="delete 
                                    has-background-danger">
                                </button>
                            </p>
                        </div>
  
                        <div class='list-item'>
                            <p>
                                Always go for 
                                premature-optimization.
                                <button class="delete 
                                    has-background-danger">
                                </button>
                            </p>
                        </div>
  
                    </div>
                </div>
            </div>
        </div>
  
        <!-- chellange -->
        <div class='has-text-centered'>
            <strong id='chellange'>Chellange: </strong>
            <span>
                Cross out the instructions 
                exist in wrong column.
            </span>
        </div>
    </div>
</body>
  
</html>

chevron_right


Output:

Note: Here in all the above examples, we use some extra Bulma classes like container, column, title, list, etc. to design our content well.

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.