CSS Switch Control Extension For Bulma Framework

Category: Form , Javascript | March 10, 2023
Views Total:331 views
Official Page:Go to website
Last Update:March 10, 2023


CSS Switch Control Extension For Bulma Framework


A CSS/SCSS extension for the Bulma framework that converts the regular checkboxes into switch controls with variable sizes and colors.

How to use it:

1. Download and import the stylesheet main.min.css into your Bulma framework.

<link rel="stylesheet" href="/path/to/cdn/bulma.min.css" />
<link rel="stylesheet" href="/path/to/css/main.min.css">

2. Add the required switch class to checkbox’s label and customize the switch using the following CSS classes:

  • is-disabled: Set the state to OFF
  • is-rounded: Rounded theme
  • is-outlined: Outlined theme
  • is-small: Small size
  • is-medium: Medium size
  • is-large: Large size
<label disabled class="switch is-disabled is-rounded is-large">
  <input type="checkbox" value="false" disabled>
  <span class="check"></span>
  <span class="control-label">Disabled</span>

3. Change the color of the switch control.

<span class="check is-info"></span>
<span class="check is-success"></span>
<span class="check is-danger"></span>
<span class="check is-warning"></span>

You Might Be Interested In:

Leave a Reply