Skip to content
Related Articles

Related Articles

Improve Article

Bulma | Delete

  • Last Updated : 21 May, 2021
Geek Week

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;
        }
 
        #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>

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.
 

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :