Skip to content
Related Articles
Open in App
Not now

Related Articles

Bulma Checkbox

Improve Article
Save Article
  • Last Updated : 30 Jan, 2022
Improve Article
Save Article

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


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!