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 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.
Please Login to comment...