I'm using Rails 4 and Simple Form with Bootstrap.
I want that my checkbox will not like that:
<%= c.input :my_bool_field, label: false, class: "form-control" %>
but something like that (I have the CSS for that)
<label class="switch switch-primary">
<input type="checkbox" />
<span></span>
</label>
I know I can use simple_form wrappers, but I find them a little bit confusing.. Can someone help me up creating the checkbox with that styling?
Add data-toggle="buttons" to a . btn-group containing those modified buttons to enable their toggling behavior via JavaScript and add . btn-group-toggle to style the <input> s within your buttons. Note that you can create single input-powered buttons or groups of them.
It's easy for designers to confuse toggle switches and toggle buttons because they both manage states, but there's a fundamental difference. Toggle switches are for system states, and toggle buttons are for contextual ones.
A toggle button allows the user to change a setting between two states. You can add a basic toggle button to your layout with the ToggleButton object. Android 4.0 (API level 14) introduces another kind of toggle button called a switch that provides a slider control, which you can add with a Switch object.
We can toggle a button using conditional statements like if-else statement in JavaScript. We can toggle almost all the properties of an element like its value, class, id, and color in JavaScript. To change any property of an element, we need to get the element using its id or class.
Could you go to this link and check it out "Switches". getbootstrap.com
I hope this example serves you, I'm currently use Bootstrap 4.3 and Rails 5.2;
Use a "custom-switch" in the form of your Model and its going to work:
-- model/_form.html.erb
<%= form_with(model: employee, local: true) do |form| %>
<div class="custom-control custom-switch">
<%= form.check_box :active, class: "custom-control-input", id: "customSwitch1" %>
<label class="custom-control-label" for="customSwitch1">Status: </label>
</div>
<div class="actions">
<%= form.submit %>
</div>
<% end %>
I hope helps you, I'm a newbie in Rails and Bootstrap.
Regards!
I found this project very useful and complete. It is based on twitter bootstrap: http://www.bootstraptoggle.com/
There is a rails gem that embedded it :
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With