{"id":13463228,"url":"https://github.com/bootstrap-ruby/bootstrap_form","last_synced_at":"2025-12-16T17:40:02.036Z","repository":{"id":2169813,"uuid":"3116268","full_name":"bootstrap-ruby/bootstrap_form","owner":"bootstrap-ruby","description":"Official repository of the bootstrap_form gem, a Rails form builder that makes it super easy to create beautiful-looking forms using Bootstrap 5.","archived":false,"fork":false,"pushed_at":"2025-03-12T19:55:35.000Z","size":6064,"stargazers_count":1644,"open_issues_count":48,"forks_count":352,"subscribers_count":45,"default_branch":"main","last_synced_at":"2025-05-07T10:52:38.217Z","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/bootstrap-ruby.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.txt","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2012-01-06T06:41:18.000Z","updated_at":"2025-05-06T11:40:50.000Z","dependencies_parsed_at":"2023-07-05T18:02:26.359Z","dependency_job_id":"dea2e8a9-1b18-43ce-be9f-ab72292ef2c9","html_url":"https://github.com/bootstrap-ruby/bootstrap_form","commit_stats":{"total_commits":821,"total_committers":106,"mean_commits":7.745283018867925,"dds":0.7503045066991474,"last_synced_commit":"261bea6966c2941632532febd626986d06975a64"},"previous_names":["potenza/bootstrap_form"],"tags_count":33,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bootstrap-ruby%2Fbootstrap_form","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bootstrap-ruby%2Fbootstrap_form/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bootstrap-ruby%2Fbootstrap_form/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bootstrap-ruby%2Fbootstrap_form/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bootstrap-ruby","download_url":"https://codeload.github.com/bootstrap-ruby/bootstrap_form/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254129481,"owners_count":22019628,"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-07-31T13:00:48.528Z","updated_at":"2025-12-16T17:39:56.997Z","avatar_url":"https://github.com/bootstrap-ruby.png","language":"Ruby","readme":"# bootstrap_form\n\n[![Ruby](https://github.com/bootstrap-ruby/bootstrap_form/actions/workflows/ruby.yml/badge.svg)](https://github.com/bootstrap-ruby/bootstrap_form/actions/workflows/ruby.yml)\n[![Gem Version](https://badge.fury.io/rb/bootstrap_form.svg)](https://rubygems.org/gems/bootstrap_form)\n\n`bootstrap_form` is a Rails form builder that makes it super easy to integrate Bootstrap v5-style forms into your Rails application. It provides form helpers that augment the Rails form helpers. `bootstrap_forms`'s form helpers generate the form field and its label and all the Bootstrap mark-up required for proper Bootstrap display. `bootstrap_form` also provides:\n\n* [Validation error messages](#validation-and-errors) below the field they correspond to, by default. You can also put the error messages after the label, or turn off `bootstrap_form`'s validation error handling and do it yourself. _Note that this applies to Rails-generated validation messages._ HTML 5 client-side validation and Rails validation out of the box don't really work well together. One discussion of the challenges and some solutions is [here](https://www.jorgemanrubia.com/2019/02/16/form-validations-with-html5-and-modern-rails/)\n* Automatic [mark-up for the `required` attribute](#required-fields) on required fields.\n* An easy way to consistently show [help](#help-text) text on fields.\n* Mark-up for [Bootstrap horizontal forms](#horizontal-forms) (labels to the left of their fields, like a traditional desktop application), if that's what you want.\n* Many [options](#form-helpers) to modify or augment the generated mark-up.\n* A way to [escape to the Rails form helpers](#accessing-rails-form-helpers) if you need to do something that `bootstrap_form` can't do.\n\nSome other nice things that `bootstrap_form` does for you are:\n\n* Reduces the amount of code in your `.erb` files.\n* Gets you going faster with Bootstrap, because you don't need to learn all the rules of Bootstrap form mark-up to get started.\n* Reduces errors, because you're doing less typing.\n* Makes it easier to see the logic of the form, because it's not mixed in with the Bootstrap mark-up.\n\n`bootstrap_form` works like the standard Rails form helpers, and this README assumes you know how they work. You start a form with one of [`bootstrap_form_with`](#bootstrap_form_with), [`bootstrap_form_for`](#bootstrap_form_for), or [`bootstrap_form_tag`](#bootstrap_form_tag) in a view file. You get a form builder that calls the [`bootstrap_form` helpers](#form-helpers) instead of the standard Rails helpers. You use that form builder in the view file to render one or more form fields.\n\n## Requirements\n\n`bootstrap_form` supports at a minimum the currently supported versions of Ruby and Rails:\n\n* Ruby 3.2+ (https://www.ruby-lang.org/en/downloads/branches/)\n* Rails 7.1+ (https://guides.rubyonrails.org/maintenance_policy.html)\n* Bootstrap 5.0+\n\n## Installation\n\nInstall Bootstrap 5. There are many ways to do this, depending on the asset pipeline you're using in your Rails application. One way is to use the gem that works with Sprockets. To do so, in a brand new Rails 7.0+ application created _without_ the `--webpacker` option, add the `bootstrap` gem to your `Gemfile`:\n\n```ruby\ngem \"bootstrap\", \"~\u003e 5.0\"\n```\n\nAnd follow the remaining instructions in the [official bootstrap installation guide](https://github.com/twbs/bootstrap-rubygem#a-ruby-on-rails) for setting up `application.scss` and `application.js`.\n\nAdd the `bootstrap_form` gem to your `Gemfile`:\n\n```ruby\ngem \"bootstrap_form\", \"~\u003e 5.4\"\n```\n\nThen:\n\n`bundle install`\n\nDepending on which CSS pre-processor you are using, adding the bootstrap form styles differs slightly.\nIf you use Rails in the default mode without any pre-processor, you'll have to add the following line to your `application.css` file:\n\n```css\n*= require rails_bootstrap_forms\n```\n\nIf you followed the [official bootstrap installation guide](https://github.com/twbs/bootstrap-rubygem#a-ruby-on-rails), you'll probably have switched to SCSS. In this case add the following line to your `application.scss`:\n\n```scss\n@import \"rails_bootstrap_forms.css\";\n```\n\n## Usage\n\n### bootstrap_form_for\n\nTo get started, use the `bootstrap_form_for` helper in place of the Rails `form_for` helper. Here's an example:\n\n![Example 0](demo/doc/screenshots/bootstrap/readme/00_example.png \"Example 0\")\n```erb\n\u003c%= bootstrap_form_for(@user) do |f| %\u003e\n  \u003c%= f.email_field :email %\u003e\n  \u003c%= f.password_field :password %\u003e\n  \u003c%= f.check_box :remember_me %\u003e\n  \u003c%= f.submit \"Log In\" %\u003e\n\u003c% end %\u003e\n```\n\nThis generates the following HTML:\n\n```html\n\u003cform accept-charset=\"UTF-8\" action=\"/users\" class=\"new_user\" id=\"new_user\" method=\"post\"\u003e\n  \u003cdiv class=\"mb-3\"\u003e\n    \u003clabel class=\"form-label required\" for=\"user_email\"\u003eEmail\u003c/label\u003e\n    \u003cinput class=\"form-control\" id=\"user_email\" name=\"user[email]\" required=\"required\" type=\"email\" value=\"steve@example.com\"\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"mb-3\"\u003e\n    \u003clabel class=\"form-label\" for=\"user_password\"\u003ePassword\u003c/label\u003e\n    \u003cinput class=\"form-control\" id=\"user_password\" name=\"user[password]\" type=\"password\"\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"form-check mb-3\"\u003e\n    \u003cinput autocomplete=\"off\" name=\"user[remember_me]\" type=\"hidden\" value=\"0\"\u003e\n    \u003cinput class=\"form-check-input\" id=\"user_remember_me\" name=\"user[remember_me]\" type=\"checkbox\" value=\"1\"\u003e\n    \u003clabel class=\"form-check-label\" for=\"user_remember_me\"\u003eRemember me\u003c/label\u003e\n  \u003c/div\u003e\n  \u003cinput class=\"btn btn-secondary\" data-disable-with=\"Log In\" name=\"commit\" type=\"submit\" value=\"Log In\"\u003e\n\u003c/form\u003e\n```\n\n### bootstrap_form_tag\n\nIf your form is not backed by a model, use the `bootstrap_form_tag`. Usage of this helper is the same as `bootstrap_form_for`, except no model object is passed in as the first argument. Here's an example:\n\n![Example 1](demo/doc/screenshots/bootstrap/readme/01_example.png \"Example 1\")\n```erb\n\u003c%= bootstrap_form_tag url: '/subscribe' do |f| %\u003e\n  \u003c%= f.email_field :email, value: 'name@example.com' %\u003e\n  \u003c%= f.submit %\u003e\n\u003c% end %\u003e\n```\n\nThis generates:\n\n```html\n\u003cform accept-charset=\"UTF-8\" action=\"/subscribe\" method=\"post\"\u003e\n  \u003cdiv class=\"mb-3\"\u003e\n    \u003clabel class=\"form-label\" for=\"email\"\u003eEmail\u003c/label\u003e\n    \u003cinput class=\"form-control\" id=\"email\" name=\"email\" type=\"email\" value=\"name@example.com\"\u003e\n  \u003c/div\u003e\n  \u003cinput class=\"btn btn-secondary\" data-disable-with=\"Save \" name=\"commit\" type=\"submit\" value=\"Save \"\u003e\n\u003c/form\u003e\n```\n\n### bootstrap_form_with\n\nTo get started, just use the `bootstrap_form_with` helper in place of `form_with`. Here's an example:\n\n![Example 2](demo/doc/screenshots/bootstrap/readme/02_example.png \"Example 2\")\n```erb\n\u003c%= bootstrap_form_with(model: @user, local: true) do |f| %\u003e\n  \u003c%= f.email_field :email %\u003e\n  \u003c%= f.password_field :password, help: 'A good password should be at least six characters long' %\u003e\n  \u003c%= f.check_box :remember_me %\u003e\n  \u003c%= f.submit \"Log In\" %\u003e\n\u003c% end %\u003e\n```\n\nThis generates:\n\n```html\n\u003cform accept-charset=\"UTF-8\" action=\"/users\" method=\"post\"\u003e\n  \u003cdiv class=\"mb-3\"\u003e\n    \u003clabel class=\"form-label required\" for=\"user_email\"\u003eEmail\u003c/label\u003e\n    \u003cinput class=\"form-control\" id=\"user_email\" name=\"user[email]\" required=\"required\" type=\"email\" value=\"steve@example.com\"\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"mb-3\"\u003e\n    \u003clabel class=\"form-label\" for=\"user_password\"\u003ePassword\u003c/label\u003e\n    \u003cinput class=\"form-control\" id=\"user_password\" name=\"user[password]\" type=\"password\"\u003e\n    \u003csmall class=\"form-text text-muted\"\u003eA good password should be at least six characters long\u003c/small\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"form-check mb-3\"\u003e\n    \u003cinput autocomplete=\"off\" name=\"user[remember_me]\" type=\"hidden\" value=\"0\"\u003e\n    \u003cinput class=\"form-check-input\" id=\"user_remember_me\" name=\"user[remember_me]\" type=\"checkbox\" value=\"1\"\u003e\n    \u003clabel class=\"form-check-label\" for=\"user_remember_me\"\u003eRemember me\u003c/label\u003e\n  \u003c/div\u003e\n  \u003cinput class=\"btn btn-secondary\" data-disable-with=\"Log In\" name=\"commit\" type=\"submit\" value=\"Log In\"\u003e\n\u003c/form\u003e\n```\n\n`bootstrap_form_with` supports both the `model:` and `url:` use cases\nin `form_with`.\n\n`form_with` has some important differences compared to `form_for` and `form_tag`, and these differences apply to `bootstrap_form_with`. A good summary of the differences can be found at: https://m.patrikonrails.com/rails-5-1s-form-with-vs-old-form-helpers-3a5f72a8c78a, or in the [Rails documentation](api.rubyonrails.org).\n\n### bootstrap_fields_for and bootstrap_fields\n\nAdding fields for a different object without nesting can be achieved using the `bootstrap_fields_for` and\n`bootstrap_fields` helpers in the same way it is done in Rails.\n\n![Example 3](demo/doc/screenshots/bootstrap/readme/03_example.png \"Example 3\")\n```erb\n\u003c%= bootstrap_form_with model: @user do |f| %\u003e\n  \u003c%= f.email_field :email %\u003e\n  \u003c%= bootstrap_fields_for :parent do |pf| %\u003e\n    \u003c%= pf.email_field :email, label: 'Parent email' %\u003e\n  \u003c% end %\u003e\n  \u003c%= bootstrap_fields @user.address do |af| %\u003e\n    \u003c%= af.text_field :street_name %\u003e\n  \u003c% end %\u003e\n  \u003c%= f.primary \"Save\" %\u003e\n\u003c% end %\u003e\n```\n\nGenerated HTML:\n\n```html\n\u003cform accept-charset=\"UTF-8\" action=\"/users\" method=\"post\"\u003e\n  \u003cdiv class=\"mb-3\"\u003e\n    \u003clabel class=\"form-label required\" for=\"user_email\"\u003eEmail\u003c/label\u003e\n    \u003cinput class=\"form-control\" id=\"user_email\" name=\"user[email]\" required=\"required\" type=\"email\" value=\"steve@example.com\"\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"mb-3\"\u003e\n    \u003clabel class=\"form-label\" for=\"parent_email\"\u003eParent email\u003c/label\u003e\n    \u003cinput class=\"form-control\" id=\"parent_email\" name=\"parent[email]\" type=\"email\"\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"mb-3\"\u003e\n    \u003clabel class=\"form-label\" for=\"street_name\"\u003eStreet name\u003c/label\u003e\n    \u003cinput class=\"form-control\" id=\"street_name\" name=\"street_name\" type=\"text\"\u003e\n  \u003c/div\u003e\n  \u003cinput class=\"btn btn-primary\" data-disable-with=\"Save\" name=\"commit\" type=\"submit\" value=\"Save\"\u003e\n\u003c/form\u003e\n```\n\n## Configuration\n\n`bootstrap_form` can be used out-of-the-box without any configuration. However, `bootstrap_form` does have an optional configuration file at `config/initializers/bootstrap_form.rb` for setting options that affect all generated forms in an application.\n\nThe current configuration options are:\n\n| Option | Default value | Description |\n|---------------------------|------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `default_form_attributes` | | `bootstrap_form` versions 3 and 4 added a role=\"form\" attribute to all forms. The W3C validator will raise a **warning** on forms with a role=\"form\" attribute. `bootstrap_form` version 5 drops this attribute by default. Set this option to `{ role: \"form\" }` to make forms non-compliant with W3C, but generate the `role=\"form\"` attribute like `bootstrap_form` versions 3 and 4. |\n\nExample:\n\n```ruby\n# config/initializers/bootstrap_form.rb\nBootstrapForm.configure do |c|\n  c.default_form_attributes = { role: \"form\" } # to make forms non-compliant with W3C.\nend\n```\n\n## Form Helpers\n\n`bootstrap_form` provides its own version of the following Rails form helpers:\n\n```\nbutton                   email_field                               search_field\ncheck_box                file_field                                select\ncollection_check_boxes   grouped_collection_select                 submit\ncollection_radio_buttons hidden_field (not wrapped, but supported) telephone_field\ncollection_select        month_field                               text_area\ncolor_field              number_field                              text_field\ndate_field               password_field                            time_field\ndate_select              phone_field                               time_select\ndatetime_field           radio_button                              time_zone_select\ndatetime_local_field     range_field                               url_field\ndatetime_select          rich_text_area                            week_field\n```\n\nBy default, the helpers generate a `label` tag, and an `input`, `select`, or `textarea` tag, by calling the Rails `label` helper, and then the Rails helper with the same name as the `bootstrap_form` helper.\n\nThe `bootstrap_form` helpers accept the same options as the standard Rails form helpers, and pass those options through to the Rails helper. They also accept additional options, described in the following section.\n\n## Form Helper Options\n\nMany of the helpers accept the same options. The exceptions are:\n\n[button](#submit-buttons),\n[check_box](#checkboxes-and-radios),\n[collection_check_boxes](#collections),\n[collection_radio_buttons](#collections),\n[collection_select](#selects),\n[date_select](#date-helpers),\n[datetime_select](#date-helpers),\n[file_field](#file-fields),\n[grouped_collection_select](#selects),\n[hidden_field](#hidden-fields),\n[radio_button](#checkboxes-and-radios),\n[rich_text_area](#rich-text-areas-aka-trix-editor),\n[select](#selects),\n[submit](#submit-buttons),\n[time_select](#date-helpers),\n[time_zone_select](#selects)\n\nThe options for the form helpers that aren't in the exceptions list are described in the following sub-sections:\n\n### Labels\n\nUse the `label` option if you want to specify the field's label text:\n\n![Example 4](demo/doc/screenshots/bootstrap/readme/04_example.png \"Example 4\")\n```erb\n\u003c%= f.password_field :password_confirmation, label: \"Confirm Password\" %\u003e\n```\n\nThis generates:\n\n```html\n\u003cdiv class=\"mb-3\"\u003e\n  \u003clabel class=\"form-label\" for=\"user_password_confirmation\"\u003eConfirm Password\u003c/label\u003e\n  \u003cinput class=\"form-control\" id=\"user_password_confirmation\" name=\"user[password_confirmation]\" type=\"password\"\u003e\n\u003c/div\u003e\n```\n\nTo hide a label, use the `hide_label: true` option. This adds the `visually-hidden`\nclass, which keeps your labels accessible to those using screen readers.\n\n![Example 5](demo/doc/screenshots/bootstrap/readme/05_example.png \"Example 5\")\n```erb\n\u003c%= f.text_area :comment, hide_label: true, placeholder: \"Leave a comment...\" %\u003e\n```\n\nThis generates:\n\n```html\n\u003cdiv class=\"mb-3\"\u003e\n  \u003clabel class=\"visually-hidden\" for=\"user_comment\"\u003eComment\u003c/label\u003e\n  \u003ctextarea class=\"form-control\" id=\"user_comment\" name=\"user[comment]\" placeholder=\"Leave a comment...\"\u003e\n\u003c/textarea\u003e\n\u003c/div\u003e\n```\n\nTo add custom classes to the field's label:\n\n![Example 6](demo/doc/screenshots/bootstrap/readme/06_example.png \"Example 6\")\n```erb\n\u003c%= f.email_field :email, label_class: \"custom-class\" %\u003e\n```\n\nThis generates:\n\n```html\n\u003cdiv class=\"mb-3\"\u003e\n  \u003clabel class=\"custom-class required\" for=\"user_email\"\u003eEmail\u003c/label\u003e\n  \u003cinput class=\"form-control\" id=\"user_email\" name=\"user[email]\" required=\"required\" type=\"email\" value=\"steve@example.com\"\u003e\n\u003c/div\u003e\n```\n\nOr you can add the label as input placeholder instead (this automatically hides the label):\n\n![Example 7](demo/doc/screenshots/bootstrap/readme/07_example.png \"Example 7\")\n```erb\n\u003c%= f.email_field :email, value: '', label_as_placeholder: true %\u003e\n```\n\nThis generates:\n\n```html\n\u003cdiv class=\"mb-3\"\u003e\n  \u003clabel class=\"visually-hidden required\" for=\"user_email\"\u003eEmail\u003c/label\u003e\n  \u003cinput class=\"form-control\" id=\"user_email\" name=\"user[email]\" placeholder=\"Email\" required=\"required\" type=\"email\" value=\"\"\u003e\n\u003c/div\u003e\n```\n\n### Input Elements / Controls\n\nTo specify the class of the generated input tag, use the `control_class` option:\n\n![Example 8](demo/doc/screenshots/bootstrap/readme/08_example.png \"Example 8\")\n```erb\n\u003c%= f.text_field :email, control_class: \"custom-class\" %\u003e\n```\n\nThis generates:\n\n```html\n\u003cdiv class=\"mb-3\"\u003e\n  \u003clabel class=\"form-label required\" for=\"user_email\"\u003eEmail\u003c/label\u003e\n  \u003cinput class=\"custom-class\" id=\"user_email\" name=\"user[email]\" required=\"required\" type=\"text\" value=\"steve@example.com\"\u003e\n\u003c/div\u003e\n```\n\n### Help Text\n\nTo add help text, use the `help` option:\n\n![Example 9](demo/doc/screenshots/bootstrap/readme/09_example.png \"Example 9\")\n```erb\n\u003c%= f.password_field :password, help: \"Must be at least 6 characters long\" %\u003e\n```\n\nThis generates:\n\n```html\n\u003cdiv class=\"mb-3\"\u003e\n  \u003clabel class=\"form-label\" for=\"user_password\"\u003ePassword\u003c/label\u003e\n  \u003cinput class=\"form-control\" id=\"user_password\" name=\"user[password]\" type=\"password\"\u003e\n  \u003csmall class=\"form-text text-muted\"\u003eMust be at least 6 characters long\u003c/small\u003e\n\u003c/div\u003e\n```\n\nThis gem is also aware of help messages in locale translation files (i18n):\n\n```yml\nen:\n  activerecord:\n    help:\n      user:\n        password: \"A good password should be at least six characters long\"\n```\n\nHelp translations containing HTML should follow the convention of appending `_html` to the name:\n\n```yml\nen:\n  activerecord:\n    help:\n      user:\n        password_html: \"A \u003cstrong\u003egood\u003c/strong\u003e password should be at least six characters long\"\n```\n\nIf your model name has multiple words (like `SuperUser`), the key on the\ntranslation file should be underscored (`super_user`).\n\nYou can override help translations for a particular field by passing the `help`\noption or turn them off completely by passing `help: false`.\n\n### Prepending and Appending Inputs\n\nYou can pass `prepend` and/or `append` options to input fields:\n\n![Example 10](demo/doc/screenshots/bootstrap/readme/10_example.png \"Example 10\")\n```erb\n\u003c%= f.text_field :price, prepend: \"$\", append: \".00\" %\u003e\n```\n\nThis generates:\n\n```html\n\u003cdiv class=\"mb-3\"\u003e\n  \u003clabel class=\"form-label\" for=\"user_price\"\u003ePrice\u003c/label\u003e\n  \u003cdiv class=\"input-group\"\u003e\n    \u003cspan class=\"input-group-text\"\u003e$\u003c/span\u003e\n    \u003cinput class=\"form-control\" id=\"user_price\" name=\"user[price]\" type=\"text\"\u003e\n    \u003cspan class=\"input-group-text\"\u003e.00\u003c/span\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\nIf you want to attach multiple items to the input, pass them as an array:\n\n![Example 11](demo/doc/screenshots/bootstrap/readme/11_example.png \"Example 11\")\n```erb\n\u003c% icon = capture do %\u003e\u003ci class=\"bi bi-currency-dollar\"\u003e\u003c/i\u003e\u003c% end %\u003e\n\u003c%= f.text_field :price, prepend: ['Net', icon], append: ['.00', 'per day'] %\u003e\n```\n\nThis generates:\n\n```html\n\u003cdiv class=\"mb-3\"\u003e\n  \u003clabel class=\"form-label\" for=\"user_price\"\u003ePrice\u003c/label\u003e\n  \u003cdiv class=\"input-group\"\u003e\n    \u003cspan class=\"input-group-text\"\u003eNet\u003c/span\u003e\n    \u003cspan class=\"input-group-text\"\u003e\n      \u003ci class=\"bi bi-currency-dollar\"\u003e\n      \u003c/i\u003e\n    \u003c/span\u003e\n    \u003cinput class=\"form-control\" id=\"user_price\" name=\"user[price]\" type=\"text\"\u003e\n    \u003cspan class=\"input-group-text\"\u003e.00\u003c/span\u003e\n    \u003cspan class=\"input-group-text\"\u003eper day\u003c/span\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\nYou can also prepend and append buttons. Note: The buttons must contain the\n`btn` class to generate the correct markup.\n\n![Example 12](demo/doc/screenshots/bootstrap/readme/12_example.png \"Example 12\")\n```erb\n\u003c%= f.text_field :search, append: link_to(\"Go\", \"#\", class: \"btn btn-secondary\") %\u003e\n```\n\nThis generates:\n\n```html\n\u003cdiv class=\"mb-3\"\u003e\n  \u003clabel class=\"form-label\" for=\"user_search\"\u003eSearch\u003c/label\u003e\n  \u003cdiv class=\"input-group\"\u003e\n    \u003cinput class=\"form-control\" id=\"user_search\" name=\"user[search]\" type=\"text\"\u003e\n    \u003ca class=\"btn btn-secondary\" href=\"#\"\u003eGo\u003c/a\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\nTo add a class to the input group wrapper, use the `:input_group_class` option.\n\n![Example 13](demo/doc/screenshots/bootstrap/readme/13_example.png \"Example 13\")\n```erb\n\u003c%= f.email_field :email, append: f.primary('Subscribe'), input_group_class: 'input-group-lg' %\u003e\n```\n\nThis generates:\n\n```html\n\u003cdiv class=\"mb-3\"\u003e\n  \u003clabel class=\"form-label required\" for=\"user_email\"\u003eEmail\u003c/label\u003e\n  \u003cdiv class=\"input-group input-group-lg\"\u003e\n    \u003cinput class=\"form-control\" id=\"user_email\" name=\"user[email]\" required=\"required\" type=\"email\" value=\"steve@example.com\"\u003e\n    \u003cinput class=\"btn btn-primary\" data-disable-with=\"Subscribe\" name=\"commit\" type=\"submit\" value=\"Subscribe\"\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Additional Form Group Attributes\n\nBootstrap mark-up dictates that most input field types have the label and input wrapped in a `div.mb-3`.\n\nIf you want to change the CSS class or any other attribute to the form group div, you can use the `wrapper: { class: 'mb-3 additional-class', data: { foo: 'bar' } }` option.\n\n![Example 14](demo/doc/screenshots/bootstrap/readme/14_example.png \"Example 14\")\n```erb\n\u003c%= f.text_field :name, wrapper: { class: 'mb-3 has-warning', data: { foo: 'bar' } } %\u003e\n```\n\nThis generates:\n\n```html\n\u003cdiv class=\"mb-3 has-warning\" data-foo=\"bar\"\u003e\n  \u003clabel class=\"form-label\" for=\"user_name\"\u003eName\u003c/label\u003e\n  \u003cinput class=\"form-control\" id=\"user_name\" name=\"user[name]\" type=\"text\"\u003e\n\u003c/div\u003e\n```\n\nWhich produces the following output:\n\n![Example 15](demo/doc/screenshots/bootstrap/readme/15_example.png \"Example 15\")\n```erb\n\u003cdiv class=\"mb-3 has-warning\" data-foo=\"bar\"\u003e\n  \u003clabel class=\"form-label form-control-label\" for=\"user_name\"\u003eId\u003c/label\u003e\n  \u003cinput class=\"form-control\" id=\"user_name\" name=\"user[name]\" type=\"text\"\u003e\n\u003c/div\u003e\n```\n\nThis generates:\n\n```html\n\u003cdiv class=\"mb-3 has-warning\" data-foo=\"bar\"\u003e\n  \u003clabel class=\"form-label form-control-label\" for=\"user_name\"\u003eId\u003c/label\u003e\n  \u003cinput class=\"form-control\" id=\"user_name\" name=\"user[name]\" type=\"text\"\u003e\n\u003c/div\u003e\n```\n\nIf you only want to set the class on the form group div, you can use the `wrapper_class` option: `wrapper_class: 'mb-3 additional-class'`.\nIt's just a short form of `wrapper: { class: 'mb-3 additional-class' }`.\n\nIf you don't want any class on the form group div, you can set it to `false`: `wrapper_class: false`.\n\n### Suppressing the Form Group Altogether\n\nYou may want to define your own form group div around a field. To do so, add the option `wrapper: false` to the input field. For example:\n\n![Example 16](demo/doc/screenshots/bootstrap/readme/16_example.png \"Example 16\")\n```erb\n\u003c%= f.form_group :user do %\u003e\n  \u003c%= f.email_field :email, wrapper: false %\u003e\n\u003c% end %\u003e\n```\n\nGenerated HTML:\n\n```html\n\u003cdiv class=\"mb-3\"\u003e\n  \u003cinput class=\"form-control\" id=\"user_email\" name=\"user[email]\" required=\"required\" type=\"email\" value=\"steve@example.com\"\u003e\n\u003c/div\u003e\n```\n\nNote that Bootstrap relies on the form group div to correctly format most fields, so if you use the `wrapper: false` option, you should provide your own form group div around the input field. You can write your own HTML, or use the `form_group` helper.\n\n## Selects\n\nOur select helper accepts the same arguments as the [default Rails helper](http://api.rubyonrails.org/classes/ActionView/Helpers/FormOptionsHelper.html#method-i-select). Here's an example of how you pass both options and html_options hashes:\n\n![Example 17](demo/doc/screenshots/bootstrap/readme/17_example.png \"Example 17\")\n```erb\n\u003c%= f.select :product, [[\"Apple\", 1], [\"Grape\", 2]], { label: \"Choose your favorite fruit:\", wrapper: { class: 'has-warning', data: { foo: 'bar' } } }, { class: \"selectpicker\" } %\u003e\n```\n\nThis generates:\n\n```html\n\u003cdiv class=\"has-warning\" data-foo=\"bar\"\u003e\n  \u003clabel class=\"form-label\" for=\"user_product\"\u003eChoose your favorite fruit:\u003c/label\u003e\n  \u003cselect class=\"form-select selectpicker\" id=\"user_product\" name=\"user[product]\"\u003e\n    \u003coption value=\"1\"\u003eApple\u003c/option\u003e\n    \u003coption value=\"2\"\u003eGrape\u003c/option\u003e\n  \u003c/select\u003e\n\u003c/div\u003e\n```\n\n## Checkboxes and Radios\n\nCheckboxes and radios should be placed inside of a `form_group` to render\nproperly. The following example ensures that the entire form group will display\nan error if an associated validations fails:\n\n![Example 18](demo/doc/screenshots/bootstrap/readme/18_example.png \"Example 18\")\n```erb\n\u003c%= f.form_group :skill_level, label: { text: \"Skill\" }, help: \"Optional Help Text\" do %\u003e\n  \u003c%= f.radio_button :skill_level, 0, label: \"Novice\", checked: true %\u003e\n  \u003c%= f.radio_button :skill_level, 1, label: \"Intermediate\" %\u003e\n  \u003c%= f.radio_button :skill_level, 2, label: \"Advanced\" %\u003e\n\u003c% end %\u003e\n\n\u003c%= f.form_group :terms do %\u003e\n  \u003c%= f.check_box :terms, label: \"I agree to the Terms of Service\" %\u003e\n\u003c% end %\u003e\n```\n\nThis generates:\n\n```html\n\u003cdiv class=\"mb-3\"\u003e\n  \u003clabel class=\"form-label\" for=\"user_skill_level\"\u003eSkill\u003c/label\u003e\n  \u003cdiv class=\"form-check\"\u003e\n    \u003cinput checked class=\"form-check-input\" id=\"user_skill_level_0\" name=\"user[skill_level]\" type=\"radio\" value=\"0\"\u003e\n    \u003clabel class=\"form-check-label\" for=\"user_skill_level_0\"\u003eNovice\u003c/label\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"form-check\"\u003e\n    \u003cinput class=\"form-check-input\" id=\"user_skill_level_1\" name=\"user[skill_level]\" type=\"radio\" value=\"1\"\u003e\n    \u003clabel class=\"form-check-label\" for=\"user_skill_level_1\"\u003eIntermediate\u003c/label\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"form-check\"\u003e\n    \u003cinput class=\"form-check-input\" id=\"user_skill_level_2\" name=\"user[skill_level]\" type=\"radio\" value=\"2\"\u003e\n    \u003clabel class=\"form-check-label\" for=\"user_skill_level_2\"\u003eAdvanced\u003c/label\u003e\n  \u003c/div\u003e\n  \u003csmall class=\"form-text text-muted\"\u003eOptional Help Text\u003c/small\u003e\n\u003c/div\u003e\n\u003cdiv class=\"mb-3\"\u003e\n  \u003cdiv class=\"form-check mb-3\"\u003e\n    \u003cinput autocomplete=\"off\" name=\"user[terms]\" type=\"hidden\" value=\"0\"\u003e\n    \u003cinput class=\"form-check-input\" id=\"user_terms\" name=\"user[terms]\" type=\"checkbox\" value=\"1\"\u003e\n    \u003clabel class=\"form-check-label\" for=\"user_terms\"\u003eI agree to the Terms of Service\u003c/label\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\nYou can also create a checkbox using a block:\n\n![Example 19](demo/doc/screenshots/bootstrap/readme/19_example.png \"Example 19\")\n```erb\n\u003c%= f.form_group :terms, label: { text: \"Optional Label\" } do %\u003e\n  \u003c%= f.check_box :terms do %\u003e\n    You need to check this box to accept our terms of service and privacy policy\n  \u003c% end %\u003e\n\u003c% end %\u003e\n```\n\nThis generates:\n\n```html\n\u003cdiv class=\"mb-3\"\u003e\n  \u003clabel class=\"form-label\" for=\"user_terms\"\u003eOptional Label\u003c/label\u003e\n  \u003cdiv class=\"form-check mb-3\"\u003e\n    \u003cinput autocomplete=\"off\" name=\"user[terms]\" type=\"hidden\" value=\"0\"\u003e\n    \u003cinput class=\"form-check-input\" id=\"user_terms\" name=\"user[terms]\" type=\"checkbox\" value=\"1\"\u003e\n    \u003clabel class=\"form-check-label\" for=\"user_terms\"\u003e\n      You need to check this box to accept our terms of service and privacy policy\n    \u003c/label\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\nTo display checkboxes and radios inline, pass the `inline: true` option:\n\n![Example 20](demo/doc/screenshots/bootstrap/readme/20_example.png \"Example 20\")\n```erb\n\u003c%= f.form_group :skill_level, label: { text: \"Skill\" } do %\u003e\n  \u003c%= f.radio_button :skill_level, 0, label: \"Novice\", inline: true %\u003e\n  \u003c%= f.radio_button :skill_level, 1, label: \"Intermediate\", inline: true %\u003e\n  \u003c%= f.radio_button :skill_level, 2, label: \"Advanced\", inline: true %\u003e\n\u003c% end %\u003e\n```\n\nThis generates:\n\n```html\n\u003cdiv class=\"mb-3\"\u003e\n  \u003clabel class=\"form-label\" for=\"user_skill_level\"\u003eSkill\u003c/label\u003e\n  \u003cdiv class=\"form-check form-check-inline\"\u003e\n    \u003cinput class=\"form-check-input\" id=\"user_skill_level_0\" name=\"user[skill_level]\" type=\"radio\" value=\"0\"\u003e\n    \u003clabel class=\"form-check-label\" for=\"user_skill_level_0\"\u003eNovice\u003c/label\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"form-check form-check-inline\"\u003e\n    \u003cinput class=\"form-check-input\" id=\"user_skill_level_1\" name=\"user[skill_level]\" type=\"radio\" value=\"1\"\u003e\n    \u003clabel class=\"form-check-label\" for=\"user_skill_level_1\"\u003eIntermediate\u003c/label\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"form-check form-check-inline\"\u003e\n    \u003cinput class=\"form-check-input\" id=\"user_skill_level_2\" name=\"user[skill_level]\" type=\"radio\" value=\"2\"\u003e\n    \u003clabel class=\"form-check-label\" for=\"user_skill_level_2\"\u003eAdvanced\u003c/label\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\nCheck boxes and radio buttons are wrapped in a `div.form-check`. You can add classes to this `div` with the `:wrapper_class` option:\n\n![Example 21](demo/doc/screenshots/bootstrap/readme/21_example.png \"Example 21\")\n```erb\n\u003c%= f.radio_button :skill_level, 0, label: \"Novice\", inline: true, wrapper_class: \"w-auto\" %\u003e\n```\n\nThis generates:\n\n```html\n\u003cdiv class=\"form-check form-check-inline w-auto\"\u003e\n  \u003cinput class=\"form-check-input\" id=\"user_skill_level_0\" name=\"user[skill_level]\" type=\"radio\" value=\"0\"\u003e\n  \u003clabel class=\"form-check-label\" for=\"user_skill_level_0\"\u003eNovice\u003c/label\u003e\n\u003c/div\u003e\n```\n\nYou can also add a style to the tag using the `wrapper` option:\n\n![Example 22](demo/doc/screenshots/bootstrap/readme/22_example.png \"Example 22\")\n```erb\n\u003c%= f.check_box :skilled, inline: true, wrapper: {style: \"color: green\"} %\u003e\n\u003c%= f.radio_button :skill_level, 0, label: \"Novice\", inline: true, wrapper: {class: 'w-auto', style: \"color: red\"} %\u003e\n```\n\nThis generates:\n\n```html\n\u003cdiv class=\"form-check form-check-inline mb-3\" style=\"color: green\"\u003e\n  \u003cinput autocomplete=\"off\" name=\"user[skilled]\" type=\"hidden\" value=\"0\"\u003e\n  \u003cinput class=\"form-check-input\" id=\"user_skilled\" name=\"user[skilled]\" type=\"checkbox\" value=\"1\"\u003e\n  \u003clabel class=\"form-check-label\" for=\"user_skilled\"\u003eSkilled\u003c/label\u003e\n\u003c/div\u003e\n\u003cdiv class=\"form-check form-check-inline w-auto\" style=\"color: red\"\u003e\n  \u003cinput class=\"form-check-input\" id=\"user_skill_level_0\" name=\"user[skill_level]\" type=\"radio\" value=\"0\"\u003e\n  \u003clabel class=\"form-check-label\" for=\"user_skill_level_0\"\u003eNovice\u003c/label\u003e\n\u003c/div\u003e\n```\n\n### Switches\n\nTo render checkboxes as switches with Bootstrap 4.2+, use `switch: true`:\n\n![Example 23](demo/doc/screenshots/bootstrap/readme/23_example.png \"Example 23\")\n```erb\n\u003c%= f.check_box :remember_me, switch: true %\u003e\n```\n\nThis generates:\n\n```html\n\u003cdiv class=\"form-check mb-3 form-switch\"\u003e\n  \u003cinput autocomplete=\"off\" name=\"user[remember_me]\" type=\"hidden\" value=\"0\"\u003e\n  \u003cinput class=\"form-check-input\" id=\"user_remember_me\" name=\"user[remember_me]\" type=\"checkbox\" value=\"1\"\u003e\n  \u003clabel class=\"form-check-label\" for=\"user_remember_me\"\u003eRemember me\u003c/label\u003e\n\u003c/div\u003e\n```\n\n### Collections\n\n`bootstrap_form` also provides helpers that automatically create the\n`form_group` and the `radio_button`s or `check_box`es for you:\n\n![Example 24](demo/doc/screenshots/bootstrap/readme/24_example.png \"Example 24\")\n```erb\n\u003c%= f.collection_radio_buttons :skill_level, Skill.all, :id, :name %\u003e\n\u003c%= f.collection_check_boxes :skills, Skill.all, :id, :name %\u003e\n```\n\nThis generates:\n\n```html\n\u003cdiv class=\"mb-3\"\u003e\n  \u003clabel class=\"form-label\" for=\"user_skill_level\"\u003eSkill level\u003c/label\u003e\n  \u003cdiv class=\"form-check\"\u003e\n    \u003cinput class=\"form-check-input\" id=\"user_skill_level_1\" name=\"user[skill_level]\" type=\"radio\" value=\"1\"\u003e\n    \u003clabel class=\"form-check-label\" for=\"user_skill_level_1\"\u003eMind reading\u003c/label\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"form-check\"\u003e\n    \u003cinput class=\"form-check-input\" id=\"user_skill_level_2\" name=\"user[skill_level]\" type=\"radio\" value=\"2\"\u003e\n    \u003clabel class=\"form-check-label\" for=\"user_skill_level_2\"\u003eFarming\u003c/label\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\u003cinput autocomplete=\"off\" id=\"user_skills\" name=\"user[skills][]\" type=\"hidden\" value=\"\"\u003e\n\u003cdiv class=\"mb-3\"\u003e\n  \u003clabel class=\"form-label\" for=\"user_skills\"\u003eSkills\u003c/label\u003e\n  \u003cdiv class=\"form-check\"\u003e\n    \u003cinput class=\"form-check-input\" id=\"user_skills_1\" name=\"user[skills][]\" type=\"checkbox\" value=\"1\"\u003e\n    \u003clabel class=\"form-check-label\" for=\"user_skills_1\"\u003eMind reading\u003c/label\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"form-check\"\u003e\n    \u003cinput class=\"form-check-input\" id=\"user_skills_2\" name=\"user[skills][]\" type=\"checkbox\" value=\"2\"\u003e\n    \u003clabel class=\"form-check-label\" for=\"user_skills_2\"\u003eFarming\u003c/label\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\nNOTE: These helpers do not currently support a block, unlike their equivalent Rails helpers. See issue [#477](https://github.com/bootstrap-ruby/bootstrap_form/issues/477). If you need to use the block syntax, use `collection_check_boxes_without_bootstrap` or `collection_radio_buttons_without_bootstrap` for now.\n\nCollection methods accept these options:\n\n* `:label`: Customize the `form_group`'s label\n* `:hide_label`: Pass true to hide the `form_group`'s label\n* `:help`: Add a help span to the `form_group`\n* Other options will be forwarded to the `radio_button`/`check_box` method\n\n\nTo add `data-` attributes to a collection of radio buttons, map your models to an array and add a hash:\n\n![Example 25](demo/doc/screenshots/bootstrap/readme/25_example.png \"Example 25\")\n```erb\n\u003c%# Use the :first and :second elements of the array to be the value and label respectively %\u003e\n\u003c%- choices = @collection.map { |addr| [ addr.id, addr.street, { 'data-zip-code':  addr.zip_code } ] } -%\u003e\n\n\u003c%= f.collection_radio_buttons :misc, choices, :first, :second %\u003e\n```\n\nThis generates:\n\n```html\n\u003cdiv class=\"mb-3\"\u003e\n  \u003clabel class=\"form-label\" for=\"user_misc\"\u003eMisc\u003c/label\u003e\n  \u003cdiv class=\"form-check\"\u003e\n    \u003cinput class=\"form-check-input\" id=\"user_misc_1\" name=\"user[misc]\" type=\"radio\" value=\"1\"\u003e\n    \u003clabel class=\"form-check-label\" for=\"user_misc_1\"\u003eFoo\u003c/label\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"form-check\"\u003e\n    \u003cinput class=\"form-check-input\" id=\"user_misc_2\" name=\"user[misc]\" type=\"radio\" value=\"2\"\u003e\n    \u003clabel class=\"form-check-label\" for=\"user_misc_2\"\u003eBar\u003c/label\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n## Range Controls\n\nYou can create a range control like this:\n\n![Example 26](demo/doc/screenshots/bootstrap/readme/26_example.png \"Example 26\")\n```erb\n\u003c%= f.range_field :excellence %\u003e\n```\n\nThis generates:\n\n```html\n\u003cdiv class=\"mb-3\"\u003e\n  \u003clabel class=\"form-label\" for=\"user_excellence\"\u003eExcellence\u003c/label\u003e\n  \u003cinput class=\"form-range\" id=\"user_excellence\" name=\"user[excellence]\" type=\"range\"\u003e\n\u003c/div\u003e\n```\n\n## Static Controls\n\nYou can create a static control like this:\n\n![Example 27](demo/doc/screenshots/bootstrap/readme/27_example.png \"Example 27\")\n```erb\n\u003c%= f.static_control :email %\u003e\n```\n\nThis generates:\n\n```html\n\u003cdiv class=\"mb-3\"\u003e\n  \u003clabel class=\"form-label required\" for=\"user_email\"\u003eEmail\u003c/label\u003e\n  \u003cinput class=\"form-control-plaintext\" id=\"user_email\" name=\"user[email]\" readonly required=\"required\" type=\"text\" value=\"steve@example.com\"\u003e\n\u003c/div\u003e\n```\n\nHere's the output for a horizontal layout:\n\n![Example 28](demo/doc/screenshots/bootstrap/readme/28_example.png \"Example 28\")\n```erb\n\u003c%= bootstrap_form_for(@user, layout: :horizontal) do |f| %\u003e\n  \u003c%= f.static_control :email %\u003e\n\u003c% end %\u003e\n```\n\nThis generates:\n\n```html\n\u003cform accept-charset=\"UTF-8\" action=\"/users\" class=\"new_user\" id=\"new_user\" method=\"post\"\u003e\n  \u003cdiv class=\"mb-3 row\"\u003e\n    \u003clabel class=\"col-form-label col-sm-2 required\" for=\"user_email\"\u003eEmail\u003c/label\u003e\n    \u003cdiv class=\"col-sm-10\"\u003e\n      \u003cinput class=\"form-control-plaintext\" id=\"user_email\" name=\"user[email]\" readonly required=\"required\" type=\"text\" value=\"steve@example.com\"\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/form\u003e\n```\n\nYou can also create a static control that isn't based on a model attribute:\n\n![Example 29](demo/doc/screenshots/bootstrap/readme/29_example.png \"Example 29\")\n```erb\n\u003c%= f.static_control :field_name, label: \"Custom Static Control\", value: \"Content Here\" %\u003e\n```\n\nThis generates:\n\n```html\n\u003cdiv class=\"mb-3\"\u003e\n  \u003clabel class=\"form-label\" for=\"user_field_name\"\u003eCustom Static Control\u003c/label\u003e\n  \u003cinput class=\"form-control-plaintext\" id=\"user_field_name\" name=\"user[field_name]\" readonly type=\"text\" value=\"Content Here\"\u003e\n\u003c/div\u003e\n```\n\n`field_name` may be any name that isn't already used in the form. Note that you may get \"unpermitted parameter\" messages in your log file with this approach.\n\nYou can also create the static control the following way, if you don't need to get the value of the static control as a parameter when the form is submitted:\n\n![Example 30](demo/doc/screenshots/bootstrap/readme/30_example.png \"Example 30\")\n```erb\n\u003c%= f.static_control label: \"Custom Static Control\", value: \"Content Here\", name: nil %\u003e\n```\n\nThis generates:\n\n```html\n\u003cdiv class=\"mb-3\"\u003e\n  \u003clabel class=\"form-label\" for=\"user_\"\u003eCustom Static Control\u003c/label\u003e\n  \u003cinput class=\"form-control-plaintext\" id=\"user_\" readonly type=\"text\" value=\"Content Here\"\u003e\n\u003c/div\u003e\n```\n\n(If you neither provide a field name nor `name: nil`, the Rails code that submits the form will give a JavaScript error.)\n\nPrior to version 4 of `bootstrap_form`, you could pass a block to the `static_control` method.\nThe value of the block would be used for the content of the static \"control\".\nBootstrap 4 actually creates and styles a disabled input field for static controls, so the value of the control has to be specified by the `value:` option.\nPassing a block to `static_control` no longer has any effect.\n\n## Date Helpers\n\nThe multiple selects that the date and time helpers (`date_select`,\n`time_select`, `datetime_select`) generate are wrapped inside a\n`div.rails-bootstrap-forms-[date|time|datetime]-select` tag. This is because\nBootstrap automatically styles our controls as `block`s. This wrapper fixes\nthis by defining these selects as `inline-block` and a width of `auto`.\n\n## Submit Buttons\n\nThe `btn btn-secondary` CSS classes are automatically added to your submit\nbuttons.\n\n![Example 31](demo/doc/screenshots/bootstrap/readme/31_example.png \"Example 31\")\n```erb\n\u003c%= f.submit %\u003e\n```\n\nThis generates:\n\n```html\n\u003cinput class=\"btn btn-secondary\" data-disable-with=\"Create User\" name=\"commit\" type=\"submit\" value=\"Create User\"\u003e\n```\n\nYou can also use the `primary` helper, which adds `btn btn-primary` to your\nsubmit button:\n\n![Example 32](demo/doc/screenshots/bootstrap/readme/32_example.png \"Example 32\")\n```erb\n\u003c%= f.primary \"Optional Label\" %\u003e\n```\n\nThis generates:\n\n```html\n\u003cinput class=\"btn btn-primary\" data-disable-with=\"Optional Label\" name=\"commit\" type=\"submit\" value=\"Optional Label\"\u003e\n```\n\nYou can specify your own classes like this:\n\n![Example 33](demo/doc/screenshots/bootstrap/readme/33_example.png \"Example 33\")\n```erb\n\u003c%= f.submit \"Log In\", class: \"btn btn-success\" %\u003e\n```\n\nThis generates:\n\n```html\n\u003cinput class=\"btn btn-success\" data-disable-with=\"Log In\" name=\"commit\" type=\"submit\" value=\"Log In\"\u003e\n```\n\nIf the `primary` helper receives a `render_as_button: true` option or a block,\nit will be rendered as an HTML button, instead of an input tag. This allows you\nto specify HTML content and styling for your buttons (such as adding\nillustrative icons to them). For example, the following statements\n\n![Example 34](demo/doc/screenshots/bootstrap/readme/34_example.png \"Example 34\")\n```erb\n\u003c%= f.primary \"Save changes \u003cspan class='bi bi-save'\u003e\u003c/span\u003e\".html_safe, render_as_button: true %\u003e\n\n\u003c%= f.primary do\n      concat 'Save changes '\n      concat content_tag(:span, nil, class: 'bi bi-save')\n    end %\u003e\n```\n\nThis generates:\n\n```html\n\u003cbutton class=\"btn btn-primary\" name=\"button\" type=\"submit\"\u003eSave changes \u003cspan class=\"bi bi-save\"\u003e\n  \u003c/span\u003e\n\u003c/button\u003e\n\u003cbutton class=\"btn btn-primary\" name=\"button\" type=\"submit\"\u003eSave changes \u003cspan class=\"bi bi-save\"\u003e\n  \u003c/span\u003e\n\u003c/button\u003e\n```\n\nare equivalent, and each of them both be rendered as:\n\n```html\n\u003cbutton name=\"button\" type=\"submit\" class=\"btn btn-primary\"\u003eSave changes \u003cspan class=\"bi bi-save\"\u003e\u003c/span\u003e\u003c/button\u003e\n```\n\nIf you wish to add additional CSS classes to your button, while keeping the\ndefault ones, you can use the `extra_class` option. This is particularly useful\nfor adding extra details to buttons (without forcing you to repeat the\nBootstrap classes), or for element targeting via CSS classes.\nBe aware, however, that using the `class` option will discard any extra classes\nyou add. As an example, the following button declarations\n\n![Example 35](demo/doc/screenshots/bootstrap/readme/35_example.png \"Example 35\")\n```erb\n\u003c%= f.primary \"My Nice Button\", extra_class: 'my-button' %\u003e\n\n\u003c%= f.primary \"My Button\", class: 'my-button' %\u003e\n```\n\nwill be rendered as\n\n```html\n\u003cinput class=\"btn btn-primary my-button\" data-disable-with=\"My Nice Button\" name=\"commit\" type=\"submit\" value=\"My Nice Button\"\u003e\n\u003cinput class=\"my-button\" data-disable-with=\"My Button\" name=\"commit\" type=\"submit\" value=\"My Button\"\u003e\n```\n\n(some unimportant HTML attributes have been removed for simplicity)\n\n## Rich Text Areas AKA Trix Editor\n\n![Example 36](demo/doc/screenshots/bootstrap/readme/36_example.png \"Example 36\")\n```erb\n\u003c%= f.rich_text_area(:life_story) %\u003e\n```\n\nwill be rendered as:\n\n```html\n\u003cdiv class=\"mb-3\"\u003e\n  \u003clabel class=\"form-label\" for=\"user_life_story\"\u003eLife story\u003c/label\u003e\n  \u003cinput autocomplete=\"off\" id=\"user_life_story_trix_input_user\" name=\"user[life_story]\" type=\"hidden\"\u003e\n  \u003ctrix-toolbar id=\"trix-toolbar-1\"\u003e\n    \u003cdiv class=\"trix-button-row\"\u003e\n      \u003cspan class=\"trix-button-group trix-button-group--text-tools\" data-trix-button-group=\"text-tools\"\u003e\n        \u003cbutton class=\"trix-button trix-button--icon trix-button--icon-bold\" data-trix-attribute=\"bold\" data-trix-key=\"b\" tabindex=\"-1\" title=\"Bold\" type=\"button\"\u003eBold\u003c/button\u003e\n        \u003cbutton class=\"trix-button trix-button--icon trix-button--icon-italic\" data-trix-attribute=\"italic\" data-trix-key=\"i\" tabindex=\"-1\" title=\"Italic\" type=\"button\"\u003eItalic\u003c/button\u003e\n        \u003cbutton class=\"trix-button trix-button--icon trix-button--icon-strike\" data-trix-attribute=\"strike\" tabindex=\"-1\" title=\"Strikethrough\" type=\"button\"\u003eStrikethrough\u003c/button\u003e\n        \u003cbutton class=\"trix-button trix-button--icon trix-button--icon-link\" data-trix-action=\"link\" data-trix-attribute=\"href\" data-trix-key=\"k\" tabindex=\"-1\" title=\"Link\" type=\"button\"\u003eLink\u003c/button\u003e\n      \u003c/span\u003e\n      \u003cspan class=\"trix-button-group trix-button-group--block-tools\" data-trix-button-group=\"block-tools\"\u003e\n        \u003cbutton class=\"trix-button trix-button--icon trix-button--icon-heading-1\" data-trix-attribute=\"heading1\" tabindex=\"-1\" title=\"Heading\" type=\"button\"\u003eHeading\u003c/button\u003e\n        \u003cbutton class=\"trix-button trix-button--icon trix-button--icon-quote\" data-trix-attribute=\"quote\" tabindex=\"-1\" title=\"Quote\" type=\"button\"\u003eQuote\u003c/button\u003e\n        \u003cbutton class=\"trix-button trix-button--icon trix-button--icon-code\" data-trix-attribute=\"code\" tabindex=\"-1\" title=\"Code\" type=\"button\"\u003eCode\u003c/button\u003e\n        \u003cbutton class=\"trix-button trix-button--icon trix-button--icon-bullet-list\" data-trix-attribute=\"bullet\" tabindex=\"-1\" title=\"Bullets\" type=\"button\"\u003eBullets\u003c/button\u003e\n        \u003cbutton class=\"trix-button trix-button--icon trix-button--icon-number-list\" data-trix-attribute=\"number\" tabindex=\"-1\" title=\"Numbers\" type=\"button\"\u003eNumbers\u003c/button\u003e\n        \u003cbutton class=\"trix-button trix-button--icon trix-button--icon-decrease-nesting-level\" data-trix-action=\"decreaseNestingLevel\" tabindex=\"-1\" title=\"Decrease Level\" type=\"button\"\u003eDecrease Level\u003c/button\u003e\n        \u003cbutton class=\"trix-button trix-button--icon trix-button--icon-increase-nesting-level\" data-trix-action=\"increaseNestingLevel\" tabindex=\"-1\" title=\"Increase Level\" type=\"button\"\u003eIncrease Level\u003c/button\u003e\n      \u003c/span\u003e\n      \u003cspan class=\"trix-button-group trix-button-group--file-tools\" data-trix-button-group=\"file-tools\"\u003e\n        \u003cbutton class=\"trix-button trix-button--icon trix-button--icon-attach\" data-trix-action=\"attachFiles\" tabindex=\"-1\" title=\"Attach Files\" type=\"button\"\u003eAttach Files\u003c/button\u003e\n      \u003c/span\u003e\n      \u003cspan class=\"trix-button-group-spacer\"\u003e\n      \u003c/span\u003e\n      \u003cspan class=\"trix-button-group trix-button-group--history-tools\" data-trix-button-group=\"history-tools\"\u003e\n        \u003cbutton class=\"trix-button trix-button--icon trix-button--icon-undo\" data-trix-action=\"undo\" data-trix-key=\"z\" tabindex=\"-1\" title=\"Undo\" type=\"button\"\u003eUndo\u003c/button\u003e\n        \u003cbutton class=\"trix-button trix-button--icon trix-button--icon-redo\" data-trix-action=\"redo\" data-trix-key=\"shift+z\" tabindex=\"-1\" title=\"Redo\" type=\"button\"\u003eRedo\u003c/button\u003e\n      \u003c/span\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"trix-dialogs\" data-trix-dialogs=\"\"\u003e\n      \u003cdiv class=\"trix-dialog trix-dialog--link\" data-trix-dialog=\"href\" data-trix-dialog-attribute=\"href\"\u003e\n        \u003cdiv class=\"trix-dialog__link-fields\"\u003e\n          \u003cinput aria-label=\"URL\" class=\"trix-input trix-input--dialog\" data-trix-input=\"\" disabled name=\"href\" placeholder=\"Enter a URL…\" required=\"\" type=\"url\"\u003e\n          \u003cdiv class=\"trix-button-group\"\u003e\n            \u003cinput class=\"trix-button trix-button--dialog\" data-trix-method=\"setAttribute\" type=\"button\" value=\"Link\"\u003e\n            \u003cinput class=\"trix-button trix-button--dialog\" data-trix-method=\"removeAttribute\" type=\"button\" value=\"Unlink\"\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/trix-toolbar\u003e\n  \u003ctrix-editor aria-label=\"Life story\" class=\"trix-content form-control\" contenteditable=\"\" data-blob-url-template=\"http://test.host/rails/active_storage/blobs/redirect/:signed_id/:filename\" data-direct-upload-url=\"http://test.host/rails/active_storage/direct_uploads\" id=\"user_life_story\" input=\"user_life_story_trix_input_user\" role=\"textbox\" toolbar=\"trix-toolbar-1\" trix-id=\"1\"\u003e\n  \u003c/trix-editor\u003e\n\u003c/div\u003e\n```\n\n## File Fields\n\nThe `file_field` helper generates mark-up for a Bootstrap 4 custom file field entry. It takes the [options for `text_field`](#form-helper-options), minus `append` and `prepend`.\n\n## Hidden Fields\n\nThe `hidden_field` helper in `bootstrap_form` calls the Rails helper directly, and does no additional mark-up.\n\n## Accessing Rails Form Helpers\n\nIf you want to use the original Rails form helpers for a particular field,\nappend `_without_bootstrap` to the helper:\n\n![Example 37](demo/doc/screenshots/bootstrap/readme/37_example.png \"Example 37\")\n```erb\n\u003c%= f.text_field_without_bootstrap :email %\u003e\n```\n\nThis generates:\n\n```html\n\u003cinput id=\"user_email\" name=\"user[email]\" type=\"text\" value=\"steve@example.com\"\u003e\n```\n\n## Form Styles\n\nBy default, your forms will stack labels on top of controls and your controls\nwill grow to 100 percent of the available width. This is consistent with Bootstrap's \"mobile first\" approach.\n\n### Inline Forms\n\nTo use an inline-layout form, use the `layout: :inline` option. To hide labels,\nuse the `hide_label: true` option, which keeps your labels accessible to those\nusing screen readers.\n\n![Example 38](demo/doc/screenshots/bootstrap/readme/38_example.png \"Example 38\")\n```erb\n\u003c%= bootstrap_form_for(@user, layout: :inline) do |f| %\u003e\n  \u003c%= f.email_field :email, hide_label: true %\u003e\n  \u003c%= f.password_field :password, hide_label: true %\u003e\n  \u003c%= f.check_box :remember_me %\u003e\n  \u003c%= f.submit %\u003e\n\u003c% end %\u003e\n```\n\nThis generates:\n\n```html\n\u003cform accept-charset=\"UTF-8\" action=\"/users\" class=\"new_user row row-cols-auto g-3 align-items-center\" id=\"new_user\" method=\"post\"\u003e\n  \u003cdiv class=\"col\"\u003e\n    \u003clabel class=\"visually-hidden required\" for=\"user_email\"\u003eEmail\u003c/label\u003e\n    \u003cinput class=\"form-control\" id=\"user_email\" name=\"user[email]\" required=\"required\" type=\"email\" value=\"steve@example.com\"\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"col\"\u003e\n    \u003clabel class=\"visually-hidden\" for=\"user_password\"\u003ePassword\u003c/label\u003e\n    \u003cinput class=\"form-control\" id=\"user_password\" name=\"user[password]\" type=\"password\"\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"col\"\u003e\n    \u003cdiv class=\"form-check form-check-inline\"\u003e\n      \u003cinput autocomplete=\"off\" name=\"user[remember_me]\" type=\"hidden\" value=\"0\"\u003e\n      \u003cinput class=\"form-check-input\" id=\"user_remember_me\" name=\"user[remember_me]\" type=\"checkbox\" value=\"1\"\u003e\n      \u003clabel class=\"form-check-label\" for=\"user_remember_me\"\u003eRemember me\u003c/label\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"col\"\u003e\n    \u003cinput class=\"btn btn-secondary\" data-disable-with=\"Create User\" name=\"commit\" type=\"submit\" value=\"Create User\"\u003e\n  \u003c/div\u003e\n\u003c/form\u003e\n```\n\nTo skip label rendering at all, use `skip_label: true` option.\n\n![Example 39](demo/doc/screenshots/bootstrap/readme/39_example.png \"Example 39\")\n```erb\n\u003c%= f.password_field :password, skip_label: true %\u003e\n```\n\nThis generates:\n\n```html\n\u003cdiv class=\"mb-3\"\u003e\n  \u003cinput class=\"form-control\" id=\"user_password\" name=\"user[password]\" type=\"password\"\u003e\n\u003c/div\u003e\n```\n\n### Horizontal Forms\n\nTo use a horizontal-layout form with labels to the left of the control, use the\n`layout: :horizontal` option. You should specify both `label_col` and\n`control_col` css classes as well (they default to `col-sm-2` and `col-sm-10`).\n\nIn the example below, the submit button has been wrapped in a `form_group` to\nkeep it properly aligned.\n\n![Example 40](demo/doc/screenshots/bootstrap/readme/40_example.png \"Example 40\")\n```erb\n\u003c%= bootstrap_form_for(@user, layout: :horizontal, label_col: \"col-sm-2\", control_col: \"col-sm-10\") do |f| %\u003e\n  \u003c%= f.email_field :email %\u003e\n  \u003c%= f.password_field :password %\u003e\n  \u003c%= f.check_box :remember_me %\u003e\n  \u003c%= f.form_group do %\u003e\n    \u003c%= f.submit %\u003e\n  \u003c% end %\u003e\n\u003c% end %\u003e\n```\n\nThis generates:\n\n```html\n\u003cform accept-charset=\"UTF-8\" action=\"/users\" class=\"new_user\" id=\"new_user\" method=\"post\"\u003e\n  \u003cdiv class=\"mb-3 row\"\u003e\n    \u003clabel class=\"col-form-label col-sm-2 required\" for=\"user_email\"\u003eEmail\u003c/label\u003e\n    \u003cdiv class=\"col-sm-10\"\u003e\n      \u003cinput class=\"form-control\" id=\"user_email\" name=\"user[email]\" required=\"required\" type=\"email\" value=\"steve@example.com\"\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"mb-3 row\"\u003e\n    \u003clabel class=\"col-form-label col-sm-2\" for=\"user_password\"\u003ePassword\u003c/label\u003e\n    \u003cdiv class=\"col-sm-10\"\u003e\n      \u003cinput class=\"form-control\" id=\"user_password\" name=\"user[password]\" type=\"password\"\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"mb-3 row\"\u003e\n    \u003cdiv class=\"col-sm-10 offset-sm-2\"\u003e\n      \u003cdiv class=\"form-check\"\u003e\n        \u003cinput autocomplete=\"off\" name=\"user[remember_me]\" type=\"hidden\" value=\"0\"\u003e\n        \u003cinput class=\"form-check-input\" id=\"user_remember_me\" name=\"user[remember_me]\" type=\"checkbox\" value=\"1\"\u003e\n        \u003clabel class=\"form-check-label\" for=\"user_remember_me\"\u003eRemember me\u003c/label\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"mb-3 row\"\u003e\n    \u003cdiv class=\"col-sm-10 offset-sm-2\"\u003e\n      \u003cinput class=\"btn btn-secondary\" data-disable-with=\"Create User\" name=\"commit\" type=\"submit\" value=\"Create User\"\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/form\u003e\n```\n\nThe `label_col` and `control_col` css classes can also be changed per control:\n\n![Example 41](demo/doc/screenshots/bootstrap/readme/41_example.png \"Example 41\")\n```erb\n\u003c%= bootstrap_form_for(@user, layout: :horizontal) do |f| %\u003e\n  \u003c%= f.email_field :email %\u003e\n  \u003c%= f.text_field :age, label_col: %w[col-sm-3 text-bg-info], control_col: %w[col-sm-3 text-bg-success] %\u003e\n  \u003c%= f.check_box :terms, label_col: \"\", control_col: \"col-sm-11\" %\u003e\n  \u003c%= f.form_group do %\u003e\n    \u003c%= f.submit %\u003e\n  \u003c% end %\u003e\n\u003c% end %\u003e\n```\n\nThis generates:\n\n```html\n\u003cform accept-charset=\"UTF-8\" action=\"/users\" class=\"new_user\" id=\"new_user\" method=\"post\"\u003e\n  \u003cdiv class=\"mb-3 row\"\u003e\n    \u003clabel class=\"col-form-label col-sm-2 required\" for=\"user_email\"\u003eEmail\u003c/label\u003e\n    \u003cdiv class=\"col-sm-10\"\u003e\n      \u003cinput class=\"form-control\" id=\"user_email\" name=\"user[email]\" required=\"required\" type=\"email\" value=\"steve@example.com\"\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"mb-3 row\"\u003e\n    \u003clabel class=\"col-form-label col-sm-3 text-bg-info\" for=\"user_age\"\u003eAge\u003c/label\u003e\n    \u003cdiv class=\"col-sm-3 text-bg-success\"\u003e\n      \u003cinput class=\"form-control\" id=\"user_age\" name=\"user[age]\" type=\"text\" value=\"42\"\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"mb-3 row\"\u003e\n    \u003cdiv class=\"col-sm-10\"\u003e\n      \u003cdiv class=\"form-check\"\u003e\n        \u003cinput autocomplete=\"off\" name=\"user[terms]\" type=\"hidden\" value=\"0\"\u003e\n        \u003cinput class=\"form-check-input\" id=\"user_terms\" name=\"user[terms]\" type=\"checkbox\" value=\"1\"\u003e\n        \u003clabel class=\"form-check-label\" for=\"user_terms\"\u003eTerms\u003c/label\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"mb-3 row\"\u003e\n    \u003cdiv class=\"col-sm-10 offset-sm-2\"\u003e\n      \u003cinput class=\"btn btn-secondary\" data-disable-with=\"Create User\" name=\"commit\" type=\"submit\" value=\"Create User\"\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/form\u003e\n```\n\nor default value can be changed in initializer:\n\n```ruby\n# config/initializers/bootstrap_form.rb\nmodule BootstrapForm\n  class FormBuilder\n    def default_label_col\n      'col-sm-4'\n    end\n    def default_control_col\n      'col-sm-8'\n    end\n    def default_layout\n      # :vertical, :horizontal or :inline\n      :horizontal\n    end\n  end\nend\n```\n\nControl col wrapper class can be modified with `add_control_col_class`. This option will preserve column definition:\n\n![Example 42](demo/doc/screenshots/bootstrap/readme/42_example.png \"Example 42\")\n```erb\n\u003c%= bootstrap_form_for(@user, layout: :horizontal) do |f| %\u003e\n  \u003c%= f.email_field :email %\u003e\n  \u003c%= f.text_field :age, add_control_col_class: \"additional-control-col-class\" %\u003e\n  \u003c%= f.form_group do %\u003e\n    \u003c%= f.submit %\u003e\n  \u003c% end %\u003e\n\u003c% end %\u003e\n```\n\nThis generates:\n\n```html\n\u003cform accept-charset=\"UTF-8\" action=\"/users\" class=\"new_user\" id=\"new_user\" method=\"post\"\u003e\n  \u003cdiv class=\"mb-3 row\"\u003e\n    \u003clabel class=\"col-form-label col-sm-2 required\" for=\"user_email\"\u003eEmail\u003c/label\u003e\n    \u003cdiv class=\"col-sm-10\"\u003e\n      \u003cinput class=\"form-control\" id=\"user_email\" name=\"user[email]\" required=\"required\" type=\"email\" value=\"steve@example.com\"\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"mb-3 row\"\u003e\n    \u003clabel class=\"col-form-label col-sm-2\" for=\"user_age\"\u003eAge\u003c/label\u003e\n    \u003cdiv class=\"col-sm-10 additional-control-col-class\"\u003e\n      \u003cinput class=\"form-control\" id=\"user_age\" name=\"user[age]\" type=\"text\" value=\"42\"\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"mb-3 row\"\u003e\n    \u003cdiv class=\"col-sm-10 offset-sm-2\"\u003e\n      \u003cinput class=\"btn btn-secondary\" data-disable-with=\"Create User\" name=\"commit\" type=\"submit\" value=\"Create User\"\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/form\u003e\n```\n\n### Custom Field Layout\n\nThe form-level `layout` can be overridden per field, unless the form-level layout was `inline`:\n\n![Example 43](demo/doc/screenshots/bootstrap/readme/43_example.png \"Example 43\")\n```erb\n\u003c%= bootstrap_form_for(@user, layout: :horizontal) do |f| %\u003e\n  \u003c%= f.email_field :email %\u003e\n  \u003cdiv class=\"row\"\u003e\n    \u003cdiv class=\"col\"\u003e\u003c%= f.text_field :feet, layout: :vertical %\u003e\u003c/div\u003e\n    \u003cdiv class=\"col\"\u003e\u003c%= f.text_field :inches, layout: :vertical %\u003e\u003c/div\u003e\n  \u003c/div\u003e\n  \u003c%= f.check_box :terms, layout: :vertical %\u003e\n  \u003c%= f.submit %\u003e\n\u003c% end %\u003e\n```\n\nThis generates:\n\n```html\n\u003cform accept-charset=\"UTF-8\" action=\"/users\" class=\"new_user\" id=\"new_user\" method=\"post\"\u003e\n  \u003cdiv class=\"mb-3 row\"\u003e\n    \u003clabel class=\"col-form-label col-sm-2 required\" for=\"user_email\"\u003eEmail\u003c/label\u003e\n    \u003cdiv class=\"col-sm-10\"\u003e\n      \u003cinput class=\"form-control\" id=\"user_email\" name=\"user[email]\" required=\"required\" type=\"email\" value=\"steve@example.com\"\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"row\"\u003e\n    \u003cdiv class=\"col\"\u003e\n      \u003cdiv class=\"mb-3\"\u003e\n        \u003clabel class=\"form-label\" for=\"user_feet\"\u003eFeet\u003c/label\u003e\n        \u003cinput class=\"form-control\" id=\"user_feet\" name=\"user[feet]\" type=\"text\" value=\"5\"\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"col\"\u003e\n      \u003cdiv class=\"mb-3\"\u003e\n        \u003clabel class=\"form-label\" for=\"user_inches\"\u003eInches\u003c/label\u003e\n        \u003cinput class=\"form-control\" id=\"user_inches\" name=\"user[inches]\" type=\"text\" value=\"7\"\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"mb-3\"\u003e\n    \u003cdiv class=\"form-check\"\u003e\n      \u003cinput autocomplete=\"off\" name=\"user[terms]\" type=\"hidden\" value=\"0\"\u003e\n      \u003cinput class=\"form-check-input\" id=\"user_terms\" name=\"user[terms]\" type=\"checkbox\" value=\"1\"\u003e\n      \u003clabel class=\"form-check-label\" for=\"user_terms\"\u003eTerms\u003c/label\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003cinput class=\"btn btn-secondary\" data-disable-with=\"Create User\" name=\"commit\" type=\"submit\" value=\"Create User\"\u003e\n\u003c/form\u003e\n```\n\nA form-level `layout: :inline` can't be overridden because of the way Bootstrap 4 implements in-line layouts. One possible work-around is to leave the form-level layout as default, and specify the individual fields as `layout: :inline`, except for the fields(s) that should be other than in-line.\n\n### Floating Labels\n\nThe `floating` option can be used to enable Bootstrap 5's floating labels. This option is supported on text fields\nand dropdowns. Here's an example:\n\n![Example 44](demo/doc/screenshots/bootstrap/readme/44_example.png \"Example 44\")\n```erb\n\u003c%= bootstrap_form_for(@user) do |f| %\u003e\n  \u003c%= f.email_field :email, floating: true %\u003e\n  \u003c%= f.password_field :password, floating: true %\u003e\n  \u003c%= f.password_field :password, floating: true %\u003e\n  \u003c%= f.select :status, [[\"Active\", 1], [\"Inactive\", 2]], include_blank: \"Select a value\", floating: true %\u003e\n  \u003c%= f.submit \"Log In\" %\u003e\n\u003c% end %\u003e\n```\n\nThis generates:\n\n```html\n\u003cform accept-charset=\"UTF-8\" action=\"/users\" class=\"new_user\" id=\"new_user\" method=\"post\"\u003e\n  \u003cdiv class=\"mb-3 form-floating\"\u003e\n    \u003cinput class=\"form-control\" id=\"user_email\" name=\"user[email]\" placeholder=\"Email\" required=\"required\" type=\"email\" value=\"steve@example.com\"\u003e\n    \u003clabel class=\"form-label required\" for=\"user_email\"\u003eEmail\u003c/label\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"mb-3 form-floating\"\u003e\n    \u003cinput class=\"form-control\" id=\"user_password\" name=\"user[password]\" placeholder=\"Password\" type=\"password\"\u003e\n    \u003clabel class=\"form-label\" for=\"user_password\"\u003ePassword\u003c/label\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"mb-3 form-floating\"\u003e\n    \u003cinput class=\"form-control\" id=\"user_password\" name=\"user[password]\" placeholder=\"Password\" type=\"password\"\u003e\n    \u003clabel class=\"form-label\" for=\"user_password\"\u003ePassword\u003c/label\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"mb-3 form-floating\"\u003e\n    \u003cselect class=\"form-select\" id=\"user_status\" name=\"user[status]\"\u003e\n      \u003coption value=\"\"\u003eSelect a value\u003c/option\u003e\n      \u003coption value=\"1\"\u003eActive\u003c/option\u003e\n      \u003coption value=\"2\"\u003eInactive\u003c/option\u003e\n    \u003c/select\u003e\n    \u003clabel class=\"form-label\" for=\"user_status\"\u003eStatus\u003c/label\u003e\n  \u003c/div\u003e\n  \u003cinput class=\"btn btn-secondary\" data-disable-with=\"Log In\" name=\"commit\" type=\"submit\" value=\"Log In\"\u003e\n\u003c/form\u003e\n```\n\n## Validation and Errors\n\nRails normally wraps fields with validation errors in a `div.field_with_errors`, but this behaviour isn't consistent with Bootstrap 4 styling. By default, `bootstrap_form` generations in-line errors which appear below the field. But it can also generate errors on the label, or not display any errors, leaving it up to you.\n\n### Inline Errors\n\nBy default, fields that have validation errors will be outlined in red and the\nerror will be displayed below the field. Here's an example:\n\n![Example 45](demo/doc/screenshots/bootstrap/readme/45_example.png \"Example 45\")\n```erb\n\u003c%= bootstrap_form_for(@user_with_error) do |f| %\u003e\n  \u003c%= f.email_field :email %\u003e\n  \u003c%= f.collection_radio_buttons :misc, Skill.all, :id, :name %\u003e\n  \u003c%= f.collection_check_boxes :preferences, [[1, 'Good'], [2, 'Bad']], :first, :second %\u003e\n  \u003c%= f.fields_for :address do |af| %\u003e\n    \u003c%= af.text_field :street %\u003e\n  \u003c% end %\u003e\n\u003c% end %\u003e\n```\n\nGenerated HTML:\n\n```html\n\u003cform accept-charset=\"UTF-8\" action=\"/users\" class=\"new_user\" id=\"new_user\" method=\"post\"\u003e\n  \u003cdiv class=\"mb-3\"\u003e\n    \u003clabel class=\"form-label required\" for=\"user_email\"\u003eEmail\u003c/label\u003e\n    \u003cinput class=\"form-control is-invalid\" id=\"user_email\" name=\"user[email]\" required=\"required\" type=\"email\" value=\"steve.example.com\"\u003e\n    \u003cdiv class=\"invalid-feedback\"\u003eis invalid\u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"mb-3\"\u003e\n    \u003clabel class=\"form-label\" for=\"user_misc\"\u003eMisc\u003c/label\u003e\n    \u003cdiv class=\"form-check\"\u003e\n      \u003cinput checked class=\"form-check-input is-invalid\" id=\"user_misc_1\" name=\"user[misc]\" type=\"radio\" value=\"1\"\u003e\n      \u003clabel class=\"form-check-label\" for=\"user_misc_1\"\u003eMind reading\u003c/label\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"form-check\"\u003e\n      \u003cinput class=\"form-check-input is-invalid\" id=\"user_misc_2\" name=\"user[misc]\" type=\"radio\" value=\"2\"\u003e\n      \u003clabel class=\"form-check-label\" for=\"user_misc_2\"\u003eFarming\u003c/label\u003e\n      \u003cdiv class=\"invalid-feedback\"\u003eis invalid\u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003cinput autocomplete=\"off\" id=\"user_preferences\" name=\"user[preferences][]\" type=\"hidden\" value=\"\"\u003e\n  \u003cdiv class=\"mb-3\"\u003e\n    \u003clabel class=\"form-label\" for=\"user_preferences\"\u003ePreferences\u003c/label\u003e\n    \u003cdiv class=\"form-check\"\u003e\n      \u003cinput checked class=\"form-check-input is-invalid\" id=\"user_preferences_1\" name=\"user[preferences][]\" type=\"checkbox\" value=\"1\"\u003e\n      \u003clabel class=\"form-check-label\" for=\"user_preferences_1\"\u003eGood\u003c/label\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"form-check\"\u003e\n      \u003cinput class=\"form-check-input is-invalid\" id=\"user_preferences_2\" name=\"user[preferences][]\" type=\"checkbox\" value=\"2\"\u003e\n      \u003clabel class=\"form-check-label\" for=\"user_preferences_2\"\u003eBad\u003c/label\u003e\n      \u003cdiv class=\"invalid-feedback\"\u003eis invalid\u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"mb-3\"\u003e\n    \u003clabel class=\"form-label\" for=\"user_address_attributes_street\"\u003eStreet\u003c/label\u003e\n    \u003cinput class=\"form-control is-invalid\" id=\"user_address_attributes_street\" name=\"user[address_attributes][street]\" type=\"text\" value=\"Bar\"\u003e\n    \u003cdiv class=\"invalid-feedback\"\u003eis invalid\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/form\u003e\n```\n\nYou can turn off inline errors for the entire form like this:\n\n```erb\n\u003c%= bootstrap_form_for(@user_with_error, inline_errors: false) do |f| %\u003e\n  ...\n\u003c% end %\u003e\n```\n\n### Label Errors\n\nYou can also display validation errors in the field's label; just turn\non the `:label_errors` option. Here's an example:\n\n![Example 46](demo/doc/screenshots/bootstrap/readme/46_example.png \"Example 46\")\n```erb\n\u003c%= bootstrap_form_for(@user_with_error, label_errors: true) do |f| %\u003e\n  \u003c%= f.email_field :email %\u003e\n\u003c% end %\u003e\n```\n\nGenerated HTML:\n\n```html\n\u003cform accept-charset=\"UTF-8\" action=\"/users\" class=\"new_user\" id=\"new_user\" method=\"post\"\u003e\n  \u003cdiv class=\"mb-3\"\u003e\n    \u003clabel class=\"form-label required text-danger\" for=\"user_email\"\u003eEmail is invalid\u003c/label\u003e\n    \u003cinput class=\"form-control is-invalid\" id=\"user_email\" name=\"user[email]\" required=\"required\" type=\"email\" value=\"steve.example.com\"\u003e\n  \u003c/div\u003e\n\u003c/form\u003e\n```\n\nBy default, turning on `:label_errors` will also turn off\n`:inline_errors`. If you want both turned on, you can do that too:\n\n```erb\n\u003c%= bootstrap_form_for(@user, label_errors: true, inline_errors: true) do |f| %\u003e\n  ...\n\u003c% end %\u003e\n```\n\n### Alert Messages\n\nTo display an error message with an error summary, you can use the\n`alert_message` helper. This won't output anything unless a model validation\nhas failed.\n\n![Example 47](demo/doc/screenshots/bootstrap/readme/47_example.png \"Example 47\")\n```erb\n\u003c%= bootstrap_form_for @user_with_error do |f| %\u003e\n  \u003c%= f.alert_message \"Please fix the errors below.\" %\u003e\n\u003c% end %\u003e\n```\n\nWhich outputs:\n\n```html\n\u003cform accept-charset=\"UTF-8\" action=\"/users\" class=\"new_user\" id=\"new_user\" method=\"post\"\u003e\n  \u003cdiv class=\"alert alert-danger\"\u003e\n    \u003cp\u003ePlease fix the errors below.\u003c/p\u003e\n    \u003cul class=\"rails-bootstrap-forms-error-summary\"\u003e\n      \u003cli\u003eEmail is invalid\u003c/li\u003e\n      \u003cli\u003eMisc is invalid\u003c/li\u003e\n      \u003cli\u003ePreferences is invalid\u003c/li\u003e\n    \u003c/ul\u003e\n  \u003c/div\u003e\n\u003c/form\u003e\n```\n\nYou can turn off the error summary like this:\n\n![Example 48](demo/doc/screenshots/bootstrap/readme/48_example.png \"Example 48\")\n```erb\n\u003c%= bootstrap_form_for @user_with_error do |f| %\u003e\n  \u003c%= f.alert_message \"Please fix the errors below.\", error_summary: false %\u003e\n\u003c% end %\u003e\n```\n\nThis generates:\n\n```html\n\u003cform accept-charset=\"UTF-8\" action=\"/users\" class=\"new_user\" id=\"new_user\" method=\"post\"\u003e\n  \u003cdiv class=\"alert alert-danger\"\u003ePlease fix the errors below.\u003c/div\u003e\n\u003c/form\u003e\n```\n\nTo output a simple unordered list of errors, use the `error_summary` helper.\n\n![Example 49](demo/doc/screenshots/bootstrap/readme/49_example.png \"Example 49\")\n```erb\n\u003c%= bootstrap_form_for @user_with_error do |f| %\u003e\n  \u003c%= f.error_summary %\u003e\n\u003c% end %\u003e\n```\n\nWhich outputs:\n\n```html\n\u003cform accept-charset=\"UTF-8\" action=\"/users\" class=\"new_user\" id=\"new_user\" method=\"post\"\u003e\n  \u003cul class=\"rails-bootstrap-forms-error-summary\"\u003e\n    \u003cli\u003eEmail is invalid\u003c/li\u003e\n    \u003cli\u003eMisc is invalid\u003c/li\u003e\n    \u003cli\u003ePreferences is invalid\u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/form\u003e\n```\n\n### Errors On\n\nIf you want to display a custom inline error for a specific attribute not represented by a form field, use the `errors_on` helper.\n\n![Example 50](demo/doc/screenshots/bootstrap/readme/50_example.png \"Example 50\")\n```erb\n\u003c%= bootstrap_form_for @user_with_error do |f| %\u003e\n  \u003cinput class=\"is-invalid\" autocomplete=\"off\" disabled type=\"hidden\"\u003e\n  \u003c%= f.errors_on :email %\u003e\n\u003c% end %\u003e\n```\n\nWhich outputs:\n\n```html\n\u003cform accept-charset=\"UTF-8\" action=\"/users\" class=\"new_user\" id=\"new_user\" method=\"post\"\u003e\n  \u003cinput autocomplete=\"off\" class=\"is-invalid\" disabled type=\"hidden\"\u003e\n  \u003cdiv class=\"invalid-feedback\"\u003eEmail is invalid\u003c/div\u003e\n\u003c/form\u003e\n```\n\nNote that the `invalid-feedback` `div` is hidden unless there is a preceding element under the same parent that has class `is-invalid`. For the examples, we've artificially added a hidden input.\n\nYou can hide the attribute name like this:\n\n![Example 51](demo/doc/screenshots/bootstrap/readme/51_example.png \"Example 51\")\n```erb\n\u003c%= bootstrap_form_for @user_with_error do |f| %\u003e\n  \u003cinput class=\"is-invalid\" autocomplete=\"off\" disabled type=\"hidden\"\u003e\n  \u003c%= f.errors_on :email, hide_attribute_name: true %\u003e\n\u003c% end %\u003e\n```\n\nWhich outputs:\n\n```html\n\u003cform accept-charset=\"UTF-8\" action=\"/users\" class=\"new_user\" id=\"new_user\" method=\"post\"\u003e\n  \u003cinput autocomplete=\"off\" class=\"is-invalid\" disabled type=\"hidden\"\u003e\n  \u003cdiv class=\"invalid-feedback\"\u003eis invalid\u003c/div\u003e\n\u003c/form\u003e\n```\n\nYou can also use a custom class for the wrapping div, like this:\n\n![Example 52](demo/doc/screenshots/bootstrap/readme/52_example.png \"Example 52\")\n```erb\n\u003c%= bootstrap_form_for @user_with_error do |f| %\u003e\n  \u003cinput class=\"is-invalid\" autocomplete=\"off\" disabled type=\"hidden\"\u003e\n  \u003c%= f.errors_on :email, custom_class: 'custom-error' %\u003e\n\u003c% end %\u003e\n```\n\nWhich outputs:\n\n```html\n\u003cform accept-charset=\"UTF-8\" action=\"/users\" class=\"new_user\" id=\"new_user\" method=\"post\"\u003e\n  \u003cinput autocomplete=\"off\" class=\"is-invalid\" disabled type=\"hidden\"\u003e\n  \u003cdiv class=\"custom-error\"\u003eEmail is invalid\u003c/div\u003e\n\u003c/form\u003e\n```\n\nNote that adding the custom class removes the default `invalid-feedback` class. If you still want the default `invalid-feedback` formatting, add it to your `custom_class`es.\n\n## Required Fields\n\nA label that is associated with a required field is automatically annotated with\na `required` CSS class. `bootstrap_form` doesn't provide any styling for required fields. You're free to add any appropriate CSS to style\nrequired fields as desired. One example would be to automatically add an\nasterisk to the end of the label:\n\n```css\nlabel.required:after {\n  content:\" *\";\n}\n```\n\nThe label `required` class is determined based on the definition of a presence\nvalidator with the associated model attribute. Presently this is one of:\nActiveRecord::Validations::PresenceValidator or\nActiveModel::Validations::PresenceValidator.\n\nIn cases where this behaviour is undesirable, use the `required` option to force the class to be present or absent:\n\n![Example 53](demo/doc/screenshots/bootstrap/readme/53_example.png \"Example 53\")\n```erb\n\u003c%= f.password_field :login, label: \"New Username\", required: true %\u003e\n\u003c%= f.password_field :password, label: \"New Password\", required: false %\u003e\n```\n\nThis generates:\n\n```html\n\u003cdiv class=\"mb-3\"\u003e\n  \u003clabel class=\"form-label required\" for=\"user_login\"\u003eNew Username\u003c/label\u003e\n  \u003cinput class=\"form-control\" id=\"user_login\" name=\"user[login]\" required=\"required\" type=\"password\"\u003e\n\u003c/div\u003e\n\u003cdiv class=\"mb-3\"\u003e\n  \u003clabel class=\"form-label\" for=\"user_password\"\u003eNew Password\u003c/label\u003e\n  \u003cinput class=\"form-control\" id=\"user_password\" name=\"user[password]\" type=\"password\"\u003e\n\u003c/div\u003e\n```\n\n### Required belongs_to associations\n\nAdding a form control for a `belongs_to` field will automatically pick up the associated presence validator.\n\n![Example 54](demo/doc/screenshots/bootstrap/readme/54_example.png \"Example 54\")\n```erb\n\u003c%= bootstrap_form_for(@address, url: '/address') do |f| %\u003e\n  \u003c%= f.collection_select :user_id, @users, :id, :email, include_blank: \"Select a value\" %\u003e\n  \u003c%= f.text_field :street %\u003e\n  \u003c%= f.text_field :city %\u003e\n  \u003c%= f.text_field :state %\u003e\n  \u003c%= f.text_field :zip_code %\u003e\n  \u003c%= f.submit \"Save\" %\u003e\n\u003c% end %\u003e\n```\n\nGenerated HTML:\n\n```html\n\u003cform accept-charset=\"UTF-8\" action=\"/address\" class=\"new_address\" id=\"new_address_1\" method=\"post\"\u003e\n  \u003cdiv class=\"mb-3\"\u003e\n    \u003clabel class=\"form-label required\" for=\"address_user_id\"\u003eUser\u003c/label\u003e\n    \u003cselect class=\"form-select\" id=\"address_user_id\" name=\"address[user_id]\" required=\"required\"\u003e\n      \u003coption value=\"\"\u003eSelect a value\u003c/option\u003e\n      \u003coption value=\"\"\u003esteve@example.com\u003c/option\u003e\n    \u003c/select\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"mb-3\"\u003e\n    \u003clabel class=\"form-label\" for=\"address_street\"\u003eStreet\u003c/label\u003e\n    \u003cinput class=\"form-control\" id=\"address_street\" name=\"address[street]\" type=\"text\" value=\"Foo\"\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"mb-3\"\u003e\n    \u003clabel class=\"form-label\" for=\"address_city\"\u003eCity\u003c/label\u003e\n    \u003cinput class=\"form-control\" id=\"address_city\" name=\"address[city]\" type=\"text\"\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"mb-3\"\u003e\n    \u003clabel class=\"form-label\" for=\"address_state\"\u003eState\u003c/label\u003e\n    \u003cinput class=\"form-control\" id=\"address_state\" name=\"address[state]\" type=\"text\"\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"mb-3\"\u003e\n    \u003clabel class=\"form-label\" for=\"address_zip_code\"\u003eZip code\u003c/label\u003e\n    \u003cinput class=\"form-control\" id=\"address_zip_code\" name=\"address[zip_code]\" type=\"text\"\u003e\n  \u003c/div\u003e\n  \u003cinput class=\"btn btn-secondary\" data-disable-with=\"Save\" name=\"commit\" type=\"submit\" value=\"Save\"\u003e\n\u003c/form\u003e\n```\n\n## Disabled fields\n\nFields can be disabled using the standard Rails form helper option.\n\n![Example 55](demo/doc/screenshots/bootstrap/readme/55_example.png \"Example 55\")\n```erb\n\u003c%= bootstrap_form_for @user do |f| %\u003e\n  \u003cdiv class=\"row g-3\"\u003e\n    \u003cdiv class=\"col-auto\"\u003e\u003c%= f.email_field :email, disabled: true, size: 18 %\u003e\u003c/div\u003e\n    \u003cdiv class=\"col-auto\"\u003e\u003c%= f.password_field :password, disabled: true, size: 18 %\u003e\u003c/div\u003e\n    \u003cdiv class=\"col-auto\"\u003e\u003c%= f.text_area :comments, disabled: true, rows: 2, cols: 18 %\u003e\u003c/div\u003e\n    \u003cdiv class=\"col-auto\"\u003e\u003c%= f.text_field :status, disabled: true, size: 18 %\u003e\u003c/div\u003e\n    \u003cdiv class=\"col-auto\"\u003e\u003c%= f.number_field :misc, label: \"Number\", disabled: true %\u003e\u003c/div\u003e\n    \u003cdiv class=\"col-auto\"\u003e\u003c%= f.radio_button :preferences, 1, disabled: true %\u003e\u003c/div\u003e\n    \u003cdiv class=\"col-auto\"\u003e\u003c%= f.check_box :terms, disabled: true %\u003e\u003c/div\u003e\n    \u003cdiv class=\"col-auto\"\u003e\u003c%= f.select :type, [1,2,3], {}, disabled: true %\u003e\u003c/div\u003e\n    \u003cdiv class=\"col-auto\"\u003e\u003c%= f.datetime_field :created_at, disabled: true %\u003e\u003c/div\u003e\n  \u003c/div\u003e\n  \u003c%= f.primary disabled: true %\u003e\n\u003c% end %\u003e\n```\n\nGenerated HTML:\n\n```html\n\u003cform accept-charset=\"UTF-8\" action=\"/users\" class=\"new_user\" id=\"new_user\" method=\"post\"\u003e\n  \u003cdiv class=\"row g-3\"\u003e\n    \u003cdiv class=\"col-auto\"\u003e\n      \u003cdiv class=\"mb-3\"\u003e\n        \u003clabel class=\"form-label required\" for=\"user_email\"\u003eEmail\u003c/label\u003e\n        \u003cinput class=\"form-control\" disabled id=\"user_email\" name=\"user[email]\" required=\"required\" size=\"18\" type=\"email\" value=\"steve@example.com\"\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"col-auto\"\u003e\n      \u003cdiv class=\"mb-3\"\u003e\n        \u003clabel class=\"form-label\" for=\"user_password\"\u003ePassword\u003c/label\u003e\n        \u003cinput class=\"form-control\" disabled id=\"user_password\" name=\"user[password]\" size=\"18\" type=\"password\"\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"col-auto\"\u003e\n      \u003cdiv class=\"mb-3\"\u003e\n        \u003clabel class=\"form-label\" for=\"user_comments\"\u003eComments\u003c/label\u003e\n        \u003ctextarea class=\"form-control\" cols=\"18\" disabled id=\"user_comments\" name=\"user[comments]\" rows=\"2\"\u003e\n\u003c/textarea\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"col-auto\"\u003e\n      \u003cdiv class=\"mb-3\"\u003e\n        \u003clabel class=\"form-label\" for=\"user_status\"\u003eStatus\u003c/label\u003e\n        \u003cinput class=\"form-control\" disabled id=\"user_status\" name=\"user[status]\" size=\"18\" type=\"text\"\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"col-auto\"\u003e\n      \u003cdiv class=\"mb-3\"\u003e\n        \u003clabel class=\"form-label\" for=\"user_misc\"\u003eNumber\u003c/label\u003e\n        \u003cinput class=\"form-control\" disabled id=\"user_misc\" name=\"user[misc]\" type=\"number\"\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"col-auto\"\u003e\n      \u003cdiv class=\"form-check disabled\"\u003e\n        \u003cinput class=\"form-check-input\" disabled id=\"user_preferences_1\" name=\"user[preferences]\" type=\"radio\" value=\"1\"\u003e\n        \u003clabel class=\"form-check-label\" for=\"user_preferences_1\"\u003e1\u003c/label\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"col-auto\"\u003e\n      \u003cdiv class=\"form-check mb-3\"\u003e\n        \u003cinput autocomplete=\"off\" disabled name=\"user[terms]\" type=\"hidden\" value=\"0\"\u003e\n        \u003cinput class=\"form-check-input\" disabled id=\"user_terms\" name=\"user[terms]\" type=\"checkbox\" value=\"1\"\u003e\n        \u003clabel class=\"form-check-label\" for=\"user_terms\"\u003eTerms\u003c/label\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"col-auto\"\u003e\n      \u003cdiv class=\"mb-3\"\u003e\n        \u003clabel class=\"form-label\" for=\"user_type\"\u003eType\u003c/label\u003e\n        \u003cselect class=\"form-select\" disabled id=\"user_type\" name=\"user[type]\"\u003e\n          \u003coption value=\"1\"\u003e1\u003c/option\u003e\n          \u003coption value=\"2\"\u003e2\u003c/option\u003e\n          \u003coption value=\"3\"\u003e3\u003c/option\u003e\n        \u003c/select\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"col-auto\"\u003e\n      \u003cdiv class=\"mb-3\"\u003e\n        \u003clabel class=\"form-label\" for=\"user_created_at\"\u003eCreated at\u003c/label\u003e\n        \u003cinput class=\"form-control\" disabled id=\"user_created_at\" name=\"user[created_at]\" type=\"datetime-local\"\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003cinput class=\"btn btn-primary\" data-disable-with=\"Create User\" disabled name=\"commit\" type=\"submit\" value=\"Create User\"\u003e\n\u003c/form\u003e\n```\n\n## Internationalization\n\nbootstrap_form follows standard rails conventions so it's i18n-ready. See more\nhere: http://guides.rubyonrails.org/i18n.html#translations-for-active-record-models\n\n## Future Compatibility\n\nThe Rails team has [suggested](https://github.com/rails/rails/issues/25197) that `form_for` and `form_tag` may be deprecated and then removed in future versions of Rails. `bootstrap_form` will continue to support `bootstrap_form_for` and `bootstrap_form_tag` as long as Rails supports `form_for` and `form_tag`.\n\n## Other Tips and Edge Cases\n\nBy their very nature, forms are extremely diverse. It would be extremely difficult to provide a gem that could handle every need. Here are some tips for handling edge cases.\n\n### Empty But Visible Labels\n\nSome third party plug-ins require an empty but visible label on an input control. The `hide_label` option generates a label that won't appear on the screen, but it's considered invisible and therefore doesn't work with such a plug-in. An empty label (e.g. `\"\"`) causes the underlying Rails helper to generate a label based on the field's attribute's name.\n\nThe solution is to use a zero-width character for the label, or some other \"empty\" HTML. For example:\n\n```ruby\nlabel: \"\u0026#8203;\".html_safe\n```\n\nor\n\n```ruby\nlabel: \"\u003cspan\u003e\u003c/span\u003e\".html_safe\n```\n\n## Contributing\n\nWe welcome contributions.\nIf you're considering contributing to bootstrap_form,\nplease review the [Contributing](/CONTRIBUTING.md)\ndocument first.\n\n## Previous Version\n\nIf you're looking for `bootstrap_form` for Bootstrap 4, go [here](https://github.com/bootstrap-ruby/bootstrap_form/tree/bootstrap-4).\n\n## License\n\nMIT License. Copyright 2012-2021 Stephen Potenza (https://github.com/potenza) and others\n","funding_links":[],"categories":["HTML \u0026 Markup","Ruby","Forms"],"sub_categories":["Form Builders"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbootstrap-ruby%2Fbootstrap_form","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbootstrap-ruby%2Fbootstrap_form","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbootstrap-ruby%2Fbootstrap_form/lists"}