{"id":15512577,"url":"https://github.com/comfy/comfy-bootstrap-form","last_synced_at":"2025-04-06T20:12:08.648Z","repository":{"id":54782292,"uuid":"118504479","full_name":"comfy/comfy-bootstrap-form","owner":"comfy","description":"Rails form builder for Bootstrap 4 markup that actually works!","archived":false,"fork":false,"pushed_at":"2023-12-07T19:28:56.000Z","size":2594,"stargazers_count":80,"open_issues_count":6,"forks_count":12,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-03-30T18:09:48.928Z","etag":null,"topics":["bootstrap","rails","rails-form-builder","ruby"],"latest_commit_sha":null,"homepage":"","language":"Ruby","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/comfy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-01-22T19:30:02.000Z","updated_at":"2022-05-10T12:55:15.000Z","dependencies_parsed_at":"2024-01-05T21:59:20.943Z","dependency_job_id":null,"html_url":"https://github.com/comfy/comfy-bootstrap-form","commit_stats":{"total_commits":167,"total_committers":4,"mean_commits":41.75,"dds":"0.029940119760479056","last_synced_commit":"bd64a750f4fc4a06a4f17b24edb5a37473a6526d"},"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/comfy%2Fcomfy-bootstrap-form","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/comfy%2Fcomfy-bootstrap-form/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/comfy%2Fcomfy-bootstrap-form/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/comfy%2Fcomfy-bootstrap-form/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/comfy","download_url":"https://codeload.github.com/comfy/comfy-bootstrap-form/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247543593,"owners_count":20955865,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","rails","rails-form-builder","ruby"],"created_at":"2024-10-02T09:53:43.669Z","updated_at":"2025-04-06T20:12:08.628Z","avatar_url":"https://github.com/comfy.png","language":"Ruby","readme":"# ComfyBootstrapForm\n\n**bootstrap_form** is a Rails form builder that makes it super easy to integrate\n[Bootstrap 4](https://getbootstrap.com/) forms into your Rails application.\n\n[![Gem Version](https://img.shields.io/gem/v/comfy_bootstrap_form.svg?style=flat)](http://rubygems.org/gems/comfy_bootstrap_form)\n[![Gem Downloads](https://img.shields.io/gem/dt/comfy_bootstrap_form.svg?style=flat)](http://rubygems.org/gems/comfy_bootstrap_form)\n[![Build Status](https://img.shields.io/travis/comfy/comfy-bootstrap-form.svg?style=flat)](https://travis-ci.org/comfy/comfy-bootstrap-form)\n[![Coverage Status](https://img.shields.io/coveralls/comfy/comfy-bootstrap-form.svg?style=flat)](https://coveralls.io/r/comfy/comfy-bootstrap-form?branch=master)\n[![Gitter](https://badges.gitter.im/comfy/comfortable-mexican-sofa.svg)](https://gitter.im/comfy/comfortable-mexican-sofa)\n\n## Requirements\n\n- Rails 5.0+\n- Bootstrap 4.0.0+\n\n## Installation\n\nAdd gem to your Gemfile and run `bundle install`\n\n```ruby\ngem \"comfy_bootstrap_form\", \"~\u003e 4.0.0\"\n```\n\n## Usage\n\nHere's a simple example:\n\n```erb\n\u003c%= bootstrap_form_with model: @user do |form| %\u003e\n  \u003c%= form.email_field :email %\u003e\n  \u003c%= form.password_field :password %\u003e\n  \u003c%= form.check_box :remember_me %\u003e\n  \u003c%= form.submit \"Log In\" %\u003e\n\u003c% end %\u003e\n```\n\nThis will generate HTML similar to this:\n\n```html\n\u003cform action=\"/users\" accept-charset=\"UTF-8\" data-remote=\"true\" method=\"post\"\u003e\n  \u003cinput name=\"utf8\" type=\"hidden\" value=\"\u0026#x2713;\" /\u003e\n  \u003cinput type=\"hidden\" name=\"authenticity_token\" value=\"AUTH_TOKEN\" /\u003e\n  \u003cdiv class=\"form-group\"\u003e\n    \u003clabel for=\"user_email\"\u003eEmail\u003c/label\u003e\n    \u003cinput class=\"form-control\" type=\"email\" name=\"user[email]\" id=\"user_email\" /\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"form-group\"\u003e\n    \u003clabel for=\"user_password\"\u003ePassword\u003c/label\u003e\n    \u003cinput class=\"form-control\" type=\"password\" name=\"user[password]\" id=\"user_password\" /\u003e\n  \u003c/div\u003e\n  \u003cfieldset class=\"form-group\"\u003e\n    \u003cdiv class=\"form-check\"\u003e\n      \u003cinput name=\"user[remember_me]\" type=\"hidden\" value=\"0\" /\u003e\n      \u003cinput class=\"form-check-input\" type=\"checkbox\" value=\"1\" name=\"user[remember_me]\" id=\"user_remember_me\" /\u003e\n      \u003clabel class=\"form-check-label\" for=\"user_remember_me\"\u003eRemember me\u003c/label\u003e\n    \u003c/div\u003e\n  \u003c/fieldset\u003e\n  \u003cdiv class=\"form-group\"\u003e\n    \u003cinput type=\"submit\" name=\"commit\" value=\"Log In\" class=\"btn\" data-disable-with=\"Log In\" /\u003e\n  \u003c/div\u003e\n\u003c/form\u003e\n```\n\n## Form helpers\n\n#### bootstrap_form_with\n\nWrapper around `form_with` helper that's available in Rails 5.1 and above.\nHere's an example:\n\n```erb\n\u003c%= bootstrap_form_with model: @person, scope: :user do |form| %\u003e\n  \u003c%= form.email_field :email %\u003e\n  \u003c%= form.submit %\u003e\n\u003c% end %\u003e\n```\n\n#### bootstrap_form_for\n\nWrapper around `form_for` helper that's available in all Rails 5 versions.\nHere's an example:\n\n```erb\n\u003c%= bootstrap_form_for @person, as: :user do |form| %\u003e\n  \u003c%= form.email_field :email %\u003e\n  \u003c%= form.submit %\u003e\n\u003c% end %\u003e\n```\n\n## Supported form field helpers\n\nThis gem wraps most of the default form field helpers. Here's the current list:\n\n```\ncolor_field     file_field      phone_field   text_field\ndate_field      month_field     range_field   time_field\ndatetime_field  number_field    search_field  url_field\nemail_field     password_field  text_area     week_field\ndate_select     time_select     datetime_select\ncheck_box       radio_button    rich_text_area\ncollection_select\ncollection_check_boxes\ncollection_radio_buttons\n```\n\n#### Radio Buttons and Checkboxes\n\nTo render collection of radio buttons or checkboxes we use the same helper that\ncomes with Rails. The only difference is that it doesn't accept a block. This\ngem takes care of rendering of labels and inputs for you.\n\n```erb\n\u003c%= form.collection_radio_buttons :choices, [\"red\", \"green\", \"blue\"], :to_s, :to_s %\u003e\n\u003c%= form.collection_check_boxes   :choices, Choices.all, :id, :label %\u003e\n```\n\nYou may choose to render inputs inline:\n\n```erb\n\u003c%= form.collection_check_boxes :choices, Choices.all, :id, :label, bootstrap: { check_inline: true } %\u003e\n```\n\n#### Submit\n\nSubmit button is automatically wrapped with Bootstrap markup. Here's how it looks:\n\n```erb\n\u003c%= form.submit %\u003e\n\u003c%= form.submit \"Submit\" %\u003e\n\u003c%= form.primary %\u003e\n```\n\nYou can also pass in a block of content that will be appended next to the button:\n\n```erb\n\u003c%= form.submit \"Save\" do %\u003e\n  \u003ca href=\"/\" class=\"btn btn-link\"\u003eCancel\u003c/a\u003e\n\u003c% end %\u003e\n```\n\n#### Plaintext helper\n\nThere's an additional field helper that render read-only plain text values:\n\n```erb\n\u003c%= form.plaintext :value %\u003e\n```\n\n#### Form Group\n\nWhen you need to wrap arbitrary content in markup that renders correctly in\nBootstrap form:\n\n```erb\n\u003c%= form.form_group do %\u003e\n  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n  tempor incididunt ut labore et dolore magna aliqua.\n\u003c% end %\u003e\n```\n\nIf you need to add a label:\n\n```erb\n\u003c%= form.form_group bootstrap: { label: {text: \"Lorem\" }} do %\u003e\n  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n  tempor incididunt ut labore et dolore magna aliqua.\n\u003c% end %\u003e\n```\n\n## Bootstrap options\n\nHere's a list of all possible bootstrap options you can pass via `:bootstrap`\noption that can be attached to the `bootstrap_form_with` and any field helpers\ninside of it:\n\n```\nlayout:               \"vertical\"\nlabel_col_class:      \"col-sm-2\"\ncontrol_col_class:    \"col-sm-10\"\nlabel_align_class:    \"text-sm-right\"\ninline_margin_class:  \"mr-sm-2\"\nlabel:                {}\nappend:               nil\nprepend:              nil\nhelp:                 nil\nerror:                nil\ncheck_inline:         false\ncustom_control:       true\n```\n\nOptions applied on the form level will apply to all field helpers. Options\non field helpers will override form-level options. For example, here's a form\nwhere all labels are hidden:\n\n```erb\n\u003c%= bootstrap_form_with model: @user, bootstrap: { label: { hide: true }} do |form| %\u003e\n  \u003c%= form.email_field :email %\u003e\n  \u003c%= form.text_field :username %\u003e\n\u003c% end %\u003e\n```\n\nHere's an example of a form where one field uses different label alignment:\n\n```erb\n\u003c%= bootstrap_form_with model: @user do |form| %\u003e\n  \u003c%= form.email_field :email, bootstrap: { label_align_class: \"text-sm-left\" } %\u003e\n  \u003c%= form.text_field :username %\u003e\n\u003c% end %\u003e\n```\n\n#### Horizontal Form\n\nBy default form is rendered as a stack. Labels are above inputs, and inputs\ntake up 100% of the width. You can change form layout to `horizontal` to put\nlabels and corresponding inputs side by side:\n\n```erb\n\u003c%= bootstrap_form_with model: @user, bootstrap: { layout: \"horizontal\" } do |form| %\u003e\n  \u003c%= form.email_field :email %\u003e\n\u003c% end %\u003e\n```\n\n#### Inline Form\n\nYou may choose to render form elements in one line. Please note that this layout\nwon't render all form elements. Things like errors messages won't show up right.\n\n```erb\n\u003c%= bootstrap_form_with url: \"/search\", bootstrap: { layout: \"inline\" } do |form| %\u003e\n  \u003c%= form.text_field :query %\u003e\n  \u003c%= form.submit \"Search\" %\u003e\n\u003c% end %\u003e\n```\n\n#### Label\n\nYou can change label generated by Rails to something else:\n\n```erb\n\u003c%= form.text_field :value, bootstrap: { label: \"Custom Label\" } %\u003e\n\u003c%= form.text_field :value, bootstrap: { label: {text: \"Custom Label\" }} %\u003e\n```\n\nYou may hide label completely (it's still there for screen readers):\n\n```erb\n\u003c%= form.text_field :value, bootstrap: { label: { hide: true }} %\u003e\n```\n\nCustom CSS class on the label tag? Sure:\n\n```erb\n\u003c%= form.text_field :value, bootstrap: { label: { class: \"custom-label\" }} %\u003e\n```\n\n#### Help Text\n\nYou may attach help text for pretty much any field type:\n\n```erb\n\u003c%= form.text_field :value, bootstrap: { help: \"Short helpful message\" } %\u003e\n```\n\n#### Append and Prepend\n\nBootstrap allows prepending and appending content to fields via `input-group`.\nHere's how this looks:\n\n```erb\n\u003c%= form.text_field :value, bootstrap: { prepend: \"$\", append: \"%\" } %\u003e\n```\n\nIf you want to use something like a button, or other html content do this:\n\n```erb\n\u003c% button_html = capture do %\u003e\n  \u003cbutton class=\"btn btn-danger\"\u003eDon't Press\u003c/button\u003e\n\u003c% end %\u003e\n\u003c%= form.text_field :value, bootstrap: { append: { html: button_html }} %\u003e\n```\n\n#### Custom Forms\n\nBootstrap can replace native browser form elements with custom ones for checkboxes,\nradio buttons and file input field. Enabled by default. Example usage:\n\n```erb\n\u003c%= form.file_field :photo, bootstrap: { custom_control: true } %\u003e\n\u003c%= form.collection_radio_buttons :choice, %w[yes no], :to_s, :to_s, bootstrap: { custom_control: true } %\u003e\n```\n\n#### Disabling Bootstrap\n\nYou may completely disable bootstrap and use default form builder by passing\n`disabled: true` option. For example:\n\n```erb\n\u003c%= form.text_field :username, bootstrap: { disabled: true } %\u003e\n```\n\n### Gotchas\n\n- In Rails 5.1 `form_with` does not generate ids for inputs. If you want them\n  you'll need to override this method: [actionview/lib/action_view/helpers/form_helper.rb#L745](https://github.com/rails/rails/blob/bdc581616b760d1e2be3795c6f0f3ab4b1e125a5/actionview/lib/action_view/helpers/form_helper.rb#L745)\n- For inline radio buttons and check boxes you need to add custom css for error\n  messages show up. See: [twbs/bootstrap/issues/25540](https://github.com/twbs/bootstrap/issues/25540)\n  For now adding `.invalid-feeback { display: block }` will work.\n\n## Demo App\n\nFeel free to take a look at the [Demo App](/demo) to see how everything renders.\nSpecifically see [form.html.erb](/demo/app/views/bootstrap/form.html.erb) template\nfor all kinds of different form configurations you can have.\n\n![Demo Preview](/demo/preview.png)\n\n---\n\nCopyright 2018-20 Oleg Khabarov, Released under the [MIT License](LICENSE.md)\n","funding_links":[],"categories":["Form Builder","Ruby"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcomfy%2Fcomfy-bootstrap-form","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcomfy%2Fcomfy-bootstrap-form","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcomfy%2Fcomfy-bootstrap-form/lists"}