{"id":15649739,"url":"https://github.com/gbh/phoenix_bootstrap_form","last_synced_at":"2025-04-14T13:12:24.539Z","repository":{"id":24880301,"uuid":"102565390","full_name":"GBH/phoenix_bootstrap_form","owner":"GBH","description":"Bootstrap 4 Forms for Phoenix/Elixir Applications","archived":false,"fork":false,"pushed_at":"2022-01-20T01:34:23.000Z","size":148,"stargazers_count":37,"open_issues_count":4,"forks_count":14,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-11T15:11:24.294Z","etag":null,"topics":["bootstrap","bootstrap4","elixir","phoenix","phoenix-framework"],"latest_commit_sha":null,"homepage":"","language":"Elixir","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/GBH.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-09-06T05:12:18.000Z","updated_at":"2024-05-15T22:40:24.000Z","dependencies_parsed_at":"2022-08-07T11:01:27.910Z","dependency_job_id":null,"html_url":"https://github.com/GBH/phoenix_bootstrap_form","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GBH%2Fphoenix_bootstrap_form","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GBH%2Fphoenix_bootstrap_form/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GBH%2Fphoenix_bootstrap_form/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GBH%2Fphoenix_bootstrap_form/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/GBH","download_url":"https://codeload.github.com/GBH/phoenix_bootstrap_form/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248886325,"owners_count":21177644,"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","bootstrap4","elixir","phoenix","phoenix-framework"],"created_at":"2024-10-03T12:31:37.037Z","updated_at":"2025-04-14T13:12:24.501Z","avatar_url":"https://github.com/GBH.png","language":"Elixir","funding_links":[],"categories":[],"sub_categories":[],"readme":"# PhoenixBootstrapForm\n\nFormat your application forms with [Bootstrap 4](http://getbootstrap.com) markup.\n\n[![Hex.pm](https://img.shields.io/hexpm/v/phoenix_bootstrap_form.svg?style=flat)](https://hex.pm/packages/phoenix_bootstrap_form)\n[![Build Status](https://travis-ci.org/GBH/phoenix_bootstrap_form.svg?style=flat\u0026branch=master)](https://travis-ci.org/GBH/phoenix_bootstrap_form)\n\n## Installation\n\nAdd `phoenix_bootstrap_form` to your list of dependencies in `mix.exs`:\n\n```elixir\ndef deps do\n  [{:phoenix_bootstrap_form, \"~\u003e 0.1.0\"}]\nend\n```\n\nYou may also alias this module in `web.ex` so it's shorter to type in templates.\n\n```elixir\nalias PhoenixBootstrapForm, as: PBF\n```\n\n## Usage\n\nIn order to change markup of form elements to bootstrap-style ones all you need is\nto prefix regular methods you aleady have with `PhoenixBootstrapForm`, or `PBF`\nif you created an alias. For example:\n\n```elixir\n\u003c%= form_for @changeset, \"/\", fn f -\u003e %\u003e\n  \u003c%= PBF.text_input f, :value %\u003e\n  \u003c%= PBF.submit f %\u003e\n\u003c% end %\u003e\n```\n\nBecomes bootstrap-styled:\n\n```html\n\u003cform accept-charset=\"UTF-8\" action=\"/\" method=\"post\"\u003e\n  \u003cdiv class=\"form-group row\"\u003e\n    \u003clabel class=\"col-form-label text-sm-right col-sm-2\" for=\"record_value\"\u003e\n      Value\n    \u003c/label\u003e\n    \u003cdiv class=\"col-sm-10\"\u003e\n      \u003cinput class=\"form-control\" id=\"record_value\" name=\"record[value]\" type=\"text\"\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"form-group row\"\u003e\n    \u003cdiv class=\"col-sm-10 ml-auto\"\u003e\n      \u003cbutton class=\"btn\" type=\"submit\"\u003eSubmit\u003c/button\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/form\u003e\n```\n\nThis library generates [horizonal form](https://getbootstrap.com/docs/4.0/components/forms/#horizontal-form)\nlayout that collapses down on small screens.\n\nYou can always fall-back to default [Phoenix.HTML.Form](https://hexdocs.pm/phoenix_html/Phoenix.HTML.Form.html)\nmethods if bootstrapped ones are not good enough.\n\nCurrently this module supports following methods:\n\n* text_input\n* file_input\n* email_input\n* password_input\n* textarea\n* telephone_input\n* select\n* checkbox\n* checkboxes\n* radio_buttons\n* submit\n* static\n\n[For quick reference you can look at this template](demo/lib/demo_web/templates/page/index.html.eex).\nYou can `mix phx.server` inside demo folder to see this reference template rendered.\n\n### Labels\n\nTo set your own label you can do something like this:\n\n```elixir\n\u003c%= PBF.text_input f, :value, label: [text: \"Custom\"] %\u003e\n```\n\n### CSS Classes\n\nTo add your own css class to the input element / controls do this:\n\n```elixir\n\u003c%= PBF.text_input f, :value, input: [class: \"custom\"] %\u003e\n```\n\n### Help Text\n\nYou can add help text under the input. It could also be rendered template with\nlinks, tables, and whatever else.\n\n```elixir\n\u003c%= PBF.text_input f, :value, input: [help: \"Help text\"] %\u003e\n```\n\n### Prepending and Appending Inputs\n\n```elixir\n\u003c%= PBF.text_input f, :value, input: [prepend: \"$\", append: \".00\"] %\u003e\n```\n\n### Radio Buttons\n\nYou don't need to do multiple calls to create list of radio buttons. One method\nwill do them all:\n\n```elixir\n\u003c%= PBF.radio_buttons f, :value, [\"red\", \"green\"] %\u003e\n```\n\nor with custom labels:\n\n```elixir\n\u003c%= PBF.radio_buttons f, :value, [{\"R\", \"red\"}, {\"G\", \"green\"}] %\u003e\n\n```\n\nor rendered inline:\n\n```elixir\n\u003c%= PBF.radio_buttons f, :value, [\"red\", \"green\", \"blue\"], input: [inline: true] %\u003e\n```\n\n### Checkboxes\n\nVery similar to `multiple_select` in functionality, you can render collection of\ncheckboxes. Other options are the same as for `radio_buttons`\n\n```elixir\n\u003c%= PBF.checkboxes f, :value, [\"red\", \"green\", \"blue\"], selected: [\"green\"] %\u003e\n```\n\n### Submit Buttons\n\nBesides simple `PBF.submit f` you can define custom label and content that goes\nnext to the button. For example:\n\n```elixir\n\u003c% cancel = link \"Cancel\", to: \"/\", class: \"btn btn-link\" %\u003e\n\u003c%= PBF.submit f, \"Smash\", class: \"btn-primary\", alternative: cancel %\u003e\n```\n\n### Static Elements\n\nWhen you need to render a piece of content in the context of your form. For example:\n\n```elixir\n\u003c%= PBF.static f, \"Current Avatar\", avatar_image_tag %\u003e\n```\n\n### Form Errors\n\nIf changeset is invalid, form elements will have `.is-invalid` class added and\n`.invalid-feedback` container will be appended with an error message.\n\nIn order to properly pull in i18n error messages specify `translate_error`\nfunction that handles it:\n\n```elixir\nconfig :phoenix_bootstrap_form, [\n  translate_error_function: \u0026MyApp.ErrorHelpers.translate_error/1\n]\n```\n\n### Custom Grid and Label Alignment\n\nBy default `.col-sm-2` and `.col-sm-10` used for label and control colums respectively.\nYou can change that by passing `label_col` and `control_col` with `form_for` like this:\n\n```elixir\n\u003c% opts = [label_col: \"col-sm-4\", control_col: \"col-sm-8\", label_align: \"text-sm-left\"] %\u003e\n\u003c%= form_for @changeset, \"/\", opts, fn f -\u003e %\u003e\n\n```\n\nIf you need to change it application-wide just edit your `config.exs` and add:\n\n```elixir\nconfig :phoenix_bootstrap_form,\n  label_col_class:    \"col-sm-4\",\n  control_col_class:  \"col-sm-8\",\n  label_align_class:  \"text-sm-left\",\n  form_group_class:   \"form-group myclass\"\n\n```\n\n---\n\nCopyright 2017-2018, Oleg Khabarov\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgbh%2Fphoenix_bootstrap_form","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgbh%2Fphoenix_bootstrap_form","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgbh%2Fphoenix_bootstrap_form/lists"}