Open In App

Bulma | Delete

Improve
Improve
Like Article
Like
Save
Share
Report

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 different sizes to delete an element option.
 

html




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


Output: 
 

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

html




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


Output: 
 

Example 3:
 

html




<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;
        }
 
        #challenge {
            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>
                                Donot 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>
 
        <!-- challenge -->
        <div class='has-text-centered'>
            <strong id='challenge'>Challenge: </strong>
            <span>
                Cross out the instructions
                exist in wrong column.
            </span>
        </div>
    </div>
</body>
 
</html>


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.
 



Last Updated : 06 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads