Bulma Radiusless
Last Updated :
02 Feb, 2022
Bulma Radiusless class is used to remove the radius from any element, add the is-radiusless modifier to any element, and any radius previously applied to that element will be removed.
Bulma Radiusless Classes:
- is-radiusless: This class is used to remove the radius from any element.
Syntax:
<element class="is-radiusless">
...
</element>
Below example illustrate the Bulma Radiusless class
Example: The below example shows the use of the Bulma Radiusless class to remove the radius of an element. Since the tags and notification element in Bulma have a border-radius by default we will use those elements to show how the is-radiusless class works.
HTML
<!DOCTYPE html>
< html >
< head >
< title >Bulma Radiusless Example</ title >
< link rel = 'stylesheet'
href =
</ head >
< body class = "has-text-centered" >
< h1 class = "is-size-2 has-text-success" >
GeeksforGeeks
</ h1 >
< b class = "is-size-5" >
Bulma Radiusless Example
</ b >
< div class = "container is-fluid" >
< p class = "mt-5" >
< b >Default Notification element:</ b >
</ p >
< div class = "notification is-link mt-2" >
< button class = "delete" ></ button >
GeeksforGeeks is a computer science
portal for geeks by geeks. Here
you can find articles on various computer
science topics like Data Structures,
Algorithms and many more.
</ div >
< p class = "mt-5" >
< b >Notification with
< i >is-radiusless</ i >
modifier:</ b >
</ p >
< div class="notification
is-radiusless is-link mt-2">
< button class = "delete" ></ button >
GeeksforGeeks is a computer science portal
for geeks by geeks. Here you can find articles
on various computer science topics like Data
Structures, Algorithms and many more.
</ div >
</ div >
</ body >
</ html >
|
Output:
Bulma Radiusless
Reference: https://bulma.io/documentation/helpers/other-helpers/
Share your thoughts in the comments
Please Login to comment...