Replace Bootstrap’s checkboxes and radio buttons by an elegant switch… a Bootstrap Switch.
I’m a great fan of Twitter’s Bootstrap. Recently I had to develop a settings page which involved displaying a lot of Yes/No checkboxes. It looked outdated. I wanted something a bit more “app-like” – a Yes/No switch. However Bootstrap does not include one, so I found an open-source bootstrap-themed switch. The contributors are amazing: I use Bootstrap Switch since version 2 and when Bootstrap 3 came out I requested a visual update so that the switch looked coherent with Bootstrap 3 – a couple of weeks later my request was fulfilled!
How can you use this Bootstrap Switch with Ruby on Rails? Well it was not that simple so here goes how I managed to make it work. By the way, using Bootstrap Switch 3 does not force you to use version 3 of Twitter Bootstrap; I tested it with Bootstrap 2 and it worked perfectly.
Set up
- Add
gem 'bootstrap-switch-rails', '~> 3.0.0'
to yourGemfile
- Add
//= require bootstrap-switch
to/assets/javascripts/application.js
- Add
*= require bootstrap3-switch
to/assets/stylesheets/application.css
If you use SASS, add @import "bootstrap3-switch";
to the top of your css file that contains your custom css styles (mine is app/assets/stylesheets/custom.css.scss
)
Use it
Every view (*.html.erb
) that has a Bootstrap Switch needs a bit of Javascript for the switch to work. Since you want the switch to display correctly as soon as the webpage is loaded, I recommend that you put the JS code on the page’s header (instead of the footer, as I usually do with JS code that runs on background). The Rails code for that:
<% content_for :head do %>
<script type="text/javascript">
$(document).ready(function() {
$('input:checkbox').bootstrapSwitch();
});
</script>
<% end %>
Notice that $('input:checkbox').bootstrapSwitch();
will affect ALL checkboxes on that page. If you want more control you can specify the checkbox id, like so $("[name='my-checkbox-id']").bootstrapSwitch();
. Don’t forget to add that same id to your checkbox.
To display the switch on a form together associated with a field just:
<%= f.label :field_name, "Field Description" %>
<%= f.check_box :field_name %>
That will display the default switch. If you want to customize the switch you just need to edit the second line. For instance, I wanted to display a Yes/No switch, with the Yes option on green (Bootstrap’s success
class), and a bit smaller than the default size. The code for that customization is below:
<%= f.check_box :field_name,
:data => { :size=>'small', 'on-color'=>'success', 'on-text'=>'YES', 'off-text'=>'NO' } %>
Examples here, and interactive examples here.
Don’t forget to thank the developers by giving the project a star on github ;)