Convert Checkboxes to Buttons with Twitter Bootstrap!¶ ↑

Twitter Bootstrap is a great way to add some design to your website quickly, especially if you are just focused on getting an MVP out as soon as possible.

The main way that Twitter Bootstrap functions is by adding CSS to classes. You can add style to your app by adding Twitter Bootstrap’s classes to your tags.

In this app, we’re going to convert a checkbox to a button. To see a demo, visit: http://electric-samurai-7475.herokuapp.com/puppies/new

You can read more about Twitter Bootstrap at http://twitter.github.com/bootstrap/.

Getting Started¶ ↑

Start by adding Bootstrap-Sass to your Gemfile:

gem 'bootstrap-sass', '~> 2.0.2'

Bootstrap-Sass is a Sass-friendly version of Twitter Bootstrap. Great if you want to add mix-in’s and custom variables. To read more about Bootstrap-Sass, visit: https://github.com/thomas-mcdonald/bootstrap-sass

Don’t forget to bundle install!

Create a new stylesheet in app/assets/stylesheets called ‘puppies.css.scss’. (You can name it anything you want.)

Add in one line:

@import 'bootstrap';

If you are running on your localhost:3000, exit and restart.

Format Your Submit Button¶ ↑

To add a button to a tag in your app, all you need to do is add the class ‘btn’ to your tag. If you’d like to change the color, you can add another class, like ‘btn-primary’. For a full list of choices, visit: http://twitter.github.com/bootstrap/base-css.html#buttons

Here is an example of formatting ‘Submit’ as a blue button with form_for:

<%= form_for(@puppy) do |f| %>
  <%= f.label :name %>
  <%= f.text_field :name %>
  <%= f.label :breed %>
  <%= f.text_field :breed %>
  <%= f.label :playtime %>
  <%= f.check_box :playtime %>
  <%= f.submit 'Submit', :class => 'btn btn-primary' %>
<% end %>

Note: Before you add a class to your submit button with form_for, you must add a label.

Convert Your Checkbox to a Button¶ ↑

Have you ever noticed that clicking the checkbox label on a form checks the checkbox for you? This piece of information is enough to get us started.

First, hide your checkbox by adding a style selector to your checkbox.

..
  <%= f.label :playtime %>
  <%= f.check_box :playtime, :style => 'visibility: hidden' %>
..

Next, add a button class to your label.

..
  <%= f.label :playtime, :class => 'btn' %>
  <%= f.check_box :playtime, :style => 'visibility: hidden' %>
..

So now, you’ve gotten rid of an ugly checkbox. The only problem with this format is a user doesn’t know if the checkbox (or now - button) has been selected or not. To fix this, we need to add some jQuery to create toggle functionality.

Add Toggle Functionality to your New Button¶ ↑

Because we want the button style to change when we click on the label, we need to add an id to our label, so we can reference it in jQuery.

..
  <%= f.label :playtime, :class => 'btn', :id => 'label_puppy_playtime' %>
  <%= f.check_box :playtime, :style => 'visibility: hidden' %>
..

Next, create a new javascript document in app/assets/javascripts called ‘puppies.js’. (Again, this can be named anything.)

Add a bit of jQuery to toggle the class of the label when the checkbox is checked. In this case, we’re toggling the class ‘btn-primary’. When the checkbox is unchecked, the label will just have the class we assigned previously: ‘btn’. When the checkbox is checked, another class will be added, so the label will have the class: ‘btn btn-primary’.

$(document).ready( function() {	
  $("#puppy_playtime").change(function() {
    $("#label_puppy_playtime").toggleClass("btn-primary", this.checked)
  }).change();
});

And that’s it. Your form has replaced an ugly checkbox with a pretty toggle button!