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 =
< 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 =
< 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 =
< 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'>
< 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 >
< 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 >
< 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
Share your thoughts in the comments
Please Login to comment...