{"id":14062760,"url":"https://github.com/lekoala/bs-companion","last_synced_at":"2025-10-27T10:03:26.381Z","repository":{"id":46242683,"uuid":"511953018","full_name":"lekoala/bs-companion","owner":"lekoala","description":"The perfect Bootstrap companion","archived":false,"fork":false,"pushed_at":"2023-11-09T15:39:16.000Z","size":1220,"stargazers_count":17,"open_issues_count":0,"forks_count":0,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-18T09:46:10.970Z","etag":null,"topics":["bootstrap","bootstrap5","form","modal","responsive","table","tabs","toast","validator"],"latest_commit_sha":null,"homepage":"https://bs-companion.vercel.app","language":"HTML","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/lekoala.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"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},"funding":{"github":"lekoala"}},"created_at":"2022-07-08T16:06:43.000Z","updated_at":"2024-11-07T11:25:11.000Z","dependencies_parsed_at":"2023-11-09T16:47:28.971Z","dependency_job_id":null,"html_url":"https://github.com/lekoala/bs-companion","commit_stats":{"total_commits":57,"total_committers":1,"mean_commits":57.0,"dds":0.0,"last_synced_commit":"7ce553bcc57f61bd9035705c431dcb67408f0a57"},"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lekoala%2Fbs-companion","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lekoala%2Fbs-companion/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lekoala%2Fbs-companion/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lekoala%2Fbs-companion/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lekoala","download_url":"https://codeload.github.com/lekoala/bs-companion/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244931349,"owners_count":20534005,"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","bootstrap5","form","modal","responsive","table","tabs","toast","validator"],"created_at":"2024-08-13T07:02:13.862Z","updated_at":"2025-10-27T10:03:26.281Z","avatar_url":"https://github.com/lekoala.png","language":"HTML","funding_links":["https://github.com/sponsors/lekoala"],"categories":["HTML"],"sub_categories":[],"readme":"# bs-companion\n\n[![NPM](https://nodei.co/npm/bs-companion.png?mini=true)](https://nodei.co/npm/bs-companion/)\n[![Downloads](https://img.shields.io/npm/dt/bs-companion.svg)](https://www.npmjs.com/package/bs-companion)\n\n\u003e Components with super powers for your Bootstrap apps!\n\nThis packages includes:\n\n- Responsive Table: Nice responsive tables without ugly scrollbars\n- BS Tabs: Improved tabs, that collapse down to a dropdown and with linkable tabs\n- Toaster: Generate beautiful toast message without markup\n- Toasts: Easily generate basic ui toasts (success, warning, error) and enforce default styling\n- Modalizer: Generate beautiful modals without markup\n- Form Validator: Consistent validator that works across tabs and accordions\n- BS Progress: indeterminate and top page progress bars\n\n## Tabs\n\nSimply wrap your regular tabs in a `bs-tabs` component\n\n```html\n\u003cbs-tabs responsive\u003e\n  \u003cul class=\"nav nav-tabs\" id=\"myTab\" role=\"tablist\" style=\"width: 100%\"\u003e\n    \u003cli class=\"nav-item\" role=\"presentation\"\u003e...\u003c/li\u003e\n    \u003cli class=\"nav-item\" role=\"presentation\"\u003e...\u003c/li\u003e\n    \u003cli class=\"nav-item\" role=\"presentation\"\u003e...\u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/bs-tabs\u003e\n```\n\nSupported features (add attributes)\n\n- Linkable: clicking on the tab will update the hash\n- Responsive: when there is not enough space to fit everything on one line, it will collapse to a dropdown\n\nIt can also lazy load content in the tabs. It will trigger a `lazyload` on any `lazy-loadable` element\n\n## Modals\n\nBasic usage using the `modalizer` function\n\n```js\nmodalizer({\n  body: \"Hello!\",\n  title: \"This is a modal\",\n  icon: btn.dataset.icon,\n});\n```\n\nFor confirm modals, you can use\n\n```js\nmodalizerConfirm(\n  {\n    body: btn.dataset.confirm,\n    icon: \"question\",\n  },\n  (res) =\u003e {\n    // form elements are exposed as FormData inside detail\n    let name = res.detail.get(\"your_name\");\n\n    console.log(\"accepted\", res);\n  },\n  (res) =\u003e {\n    console.log(\"denied\", res);\n  }\n);\n```\n\n## Toasts\n\nBasic usage using the `toaster` function\n\n```js\n// You can simply pass a string\ntoaster(\"Hello world\");\n// Or an array\ntoaster({\n  body: \"Hello world \u003ca href='#'\u003esome link here\u003c/a\u003e\",\n  header: `\u003cdiv class=\"d-flex align-items-center\"\u003e\u003cl-i name=\"star\" class=\"me-2\"\u003e\u003c/l-i\u003e My header\u003c/div\u003e`,\n  autohide: false,\n});\n```\n\nHowever, it can be bothersome to always specify all options. Enters the `Toasts` class\n\n```js\nToasts.success(\"Hello world\");\n```\n\n## Form validation\n\nYou can easily validate all your forms using `FormValidator`\n\n```html\n\u003cscript type=\"module\"\u003e\n    FormValidator.init();\n\u003c/script\u003e\n\u003cform action=\"\" class=\"needs-validation\" data-validation-message=\"Some fields are not valid\"\u003e...\u003c/form\u003e\n```\n\nSimply set a `needs-validation` class. You can also set a message that will be shown in case some fields are invalid.\nIt will also checks in tabs and accordion and show invalid icons.\n\n### Validation on trigger\n\nYou can validate on `blur` or `keydown`.\n\n```html\n\u003cinput type=\"email\" class=\"form-control\" id=\"email-input\" value=\"\" data-validation-trigger=\"blur\" /\u003e\n```\n\n### Custom validation\n\nYou can use custom validation rules. Multiple rules are supported using a , as separator.\n\n```html\n\u003cinput type=\"password\" class=\"form-control\" id=\"confirm-password\" data-validation-rules=\"same #password\" data-validation-trigger=\"blur\"\u003e\n```\n\nBuilt-in rules:\n- same {fieldSelector}: check if the value is the same\n- digits: contains only digits\n- number: is a valid number\n- alnum: contains only alnum\n\nYou can register custom rules using `FormValidation.registerRule`.\n\n## Also check out\n\n- [Bootstrap 5 Tags](https://github.com/lekoala/bootstrap5-tags): tags input for bootstrap\n- [Bootstrap5 autocomplete](https://github.com/lekoala/bootstrap5-autocomplete): the autocomplete input for bootstrap 5 (and more!)\n- [Admini](https://github.com/lekoala/admini): the minimalistic bootstrap 5 admin panel\n- [Formidable Elements](https://github.com/lekoala/formidable-elements): more custom elements for your bootstrap app!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flekoala%2Fbs-companion","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flekoala%2Fbs-companion","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flekoala%2Fbs-companion/lists"}