Open In App
Related Articles

Bulma Checkbox

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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

Bulma Checkbox

Reference: https://bulma.io/documentation/form/checkbox



Last Updated : 30 Jan, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads