Bulma Checkbox
Last Updated :
30 Jan, 2022
In this article, we’ll be learning about Bulma Checkbox, with some of its examples. Bulma is a free and open-source framework used to build reusable components while building web applications. This framework is a mobile-ready framework with which the users can see the web applications as like a mobile application.
The checkboxes allow the users to select multiple options from a list of options. For using the Bulma checkbox, we have to use different classes. The class is a simple wrapper around the <input> element in HTML. The styling of the checkbox is not predefined, the developer can change the style accordingly for the best user experience.
Bulma Checkbox Class:
- Simple CheckBox in Bulma: For using a simple checkbox in your HTML web application, just use the “checkbox” class in <input> element.
- Disabled CheckBox in Bulma: For using a disabled checkbox in your HTML web application, just use the “disabled” attribute after the “checkbox” class in the <input> element.
- CheckBox with links in Bulma: For using links with your checkboxes in the web application, just add a <a> tag.
Syntax:
<label>
<input type="checkbox">
...
</label>
Example: The below example demonstrates all types of checkboxes in Bulma:
HTML
<!DOCTYPE html>
< html >
< head >
< link
rel = "stylesheet" href =
</ head >
< body >
< section class = "section" id = "simple" >
< div class = "container" >
< h1 class = "title" >Basic checkbox</ h1 >
< label class = "checkbox" >
Are you a Geek?
< input type = "checkbox" />
</ label >
< br >
< h1 class = "title" >Disabled checkbox</ h1 >
< label class = "checkbox" >
Are you a Geek?
< input type = "checkbox" disabled />
</ label >
< br >
< h1 class = "title" >Checkbox with Link</ h1 >
< label class = "checkbox" >
< input type = "checkbox" />
Hey Geek! < a href = "#" >Check this out.</ a >
</ label >
</ div >
</ section >
</ body >
</ html >
|
Output:
Bulma Checkbox
Reference: https://bulma.io/documentation/form/checkbox
Share your thoughts in the comments
Please Login to comment...