{"id":32056758,"url":"https://github.com/portavice/bladestrap","last_synced_at":"2026-03-10T01:33:24.471Z","repository":{"id":204540222,"uuid":"711921482","full_name":"portavice/bladestrap","owner":"portavice","description":"Blade components for Bootstrap 5","archived":false,"fork":false,"pushed_at":"2025-03-11T14:18:44.000Z","size":122,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-31T10:51:56.015Z","etag":null,"topics":["bootstrap","bootstrap-5","composer-package","laravel-extension"],"latest_commit_sha":null,"homepage":"https://packagist.org/packages/portavice/bladestrap","language":"PHP","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/portavice.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-10-30T12:52:21.000Z","updated_at":"2025-09-26T14:46:41.000Z","dependencies_parsed_at":"2023-11-08T11:24:58.639Z","dependency_job_id":"66886f7c-09cf-45d2-a75a-323cfd4df3c3","html_url":"https://github.com/portavice/bladestrap","commit_stats":null,"previous_names":["portavice/bladestrap"],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/portavice/bladestrap","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/portavice%2Fbladestrap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/portavice%2Fbladestrap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/portavice%2Fbladestrap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/portavice%2Fbladestrap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/portavice","download_url":"https://codeload.github.com/portavice/bladestrap/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/portavice%2Fbladestrap/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30320889,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-09T20:05:46.299Z","status":"ssl_error","status_checked_at":"2026-03-09T19:57:04.425Z","response_time":61,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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","bootstrap-5","composer-package","laravel-extension"],"created_at":"2025-10-18T14:11:25.278Z","updated_at":"2026-03-10T01:33:24.423Z","avatar_url":"https://github.com/portavice.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Bladestrap = Blade + Bootstrap\n\n[![MIT Licensed](https://img.shields.io/badge/License-MIT-brightgreen.svg)](LICENSE.md)\n![PHP](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2Fportavice%2Fbladestrap%2Fmain%2Fcomposer.json\u0026query=require.php\u0026label=PHP)\n[![Tests](https://github.com/portavice/bladestrap/actions/workflows/tests.yml/badge.svg)](https://github.com/portavice/bladestrap/actions/workflows/tests.yml)\n[![Code style check](https://github.com/portavice/bladestrap/actions/workflows/code-style.yml/badge.svg)](https://github.com/portavice/bladestrap/actions/workflows/code-style.yml)\n[![Latest version](https://img.shields.io/packagist/v/portavice/bladestrap.svg)](https://packagist.org/packages/portavice/bladestrap)\n[![Total downloads](https://img.shields.io/packagist/dt/portavice/bladestrap.svg)](https://packagist.org/packages/portavice/bladestrap)\n\nBladestrap provides [Laravel Blade components](https://laravel.com/docs/12.x/blade#components)\nfor the [Bootstrap 5](https://getbootstrap.com/docs/) frontend framework.\n\n\n## Contents\n- [Installation](#installation)\n  - [Install Bootstrap](#install-bootstrap)\n  - [Configure Bladestrap](#configure-bladestrap)\n  - [Customize views](#customize-views)\n- [Usage](#usage)\n  - [Alerts](#alerts)\n  - [Badges](#badges)\n  - [Breadcrumb](#breadcrumb)\n  - [Buttons](#buttons)\n    - [Button groups](#button-groups)\n    - [Button toolbars](#button-toolbars)\n  - [Dropdowns](#dropdowns)\n  - [Forms](#forms)\n    - [Types of form fields](#types-of-form-fields)\n    - [Options](#options)\n    - [Disabled, readonly, required](#disabled-readonly-required)\n    - [Input groups](#input-groups)\n    - [Hints](#hints)\n    - [Prefill values from query parameters](#prefill-values-from-query-parameters)\n    - [Error messages](#error-messages)\n  - [Links](#links)\n  - [List groups](#list-groups)\n  - [Modals](#modals)\n  - [Navigation](#navigation) \n- [Usage without Laravel](#usage-without-laravel)\n\n\n## Installation\nFirst, install the package via [Composer](https://getcomposer.org/):\n```bash\ncomposer require portavice/bladestrap\n```\n\nWithin a Laravel application, the package will automatically register itself.\n\n\u003e [!NOTE]\n\u003e If you only use parts of the Laravel framework (such as `illuminate/view`),\n\u003e make sure to follow the instructions in the section on [usage without Laravel](#usage-without-laravel).\n\n### Install Bootstrap\nNote that you need to [include the Bootstrap files](https://github.com/twbs/bootstrap#quick-start) on your own.\n1. If you haven't added Bootstrap as one of your dependencies, you can do so via [npm](https://www.npmjs.com/):\n    ```bash\n    npm install bootstrap\n    ```\n2. Add the following to your `webpack.mix.js` to copy the required Bootstrap files to your `public` directory:\n    ```javascript\n    let bootstrapFiles = [\n        'node_modules/bootstrap/dist/css/bootstrap.min.css',\n        'node_modules/bootstrap/dist/js/bootstrap.bundle.min.js',\n    ];\n    mix.copy(bootstrapFiles, 'public/lib');\n    ```\n3. Include CSS and JavaScript in `resources/views/layouts/app.blade.php`:\n    ```HTML\n    \u003clink rel=\"stylesheet\" href=\"{{ mix('lib/bootstrap.min.css') }}\"\u003e\n    \u003cscript src=\"{{ mix('lib/bootstrap.bundle.min.js') }}\"\u003e\u003c/script\u003e\n    ```\nYou may need to adjust the steps above to your custom project configuration.\nIf you have a [custom Bootstrap build](https://getbootstrap.com/docs/5.3/customize/sass/) you are responsible to include the necessary parts of Bootstrap yourself.\n\n\n### Configure Bladestrap\nUsually this should not be necessary, but if you need to overwrite the default configuration,\ncreate and edit `config/bladestrap.php`:\n```bash\nphp artisan vendor:publish --tag=\"bladestrap-config\"\n```\n\n### Customize views\nIf you want to customize the views, publish them to `resources\\views\\vendor\\bladestrap\\components`\nand edit them to meet your requirements:\n```bash\nphp artisan vendor:publish --tag=\"bladestrap-views\"\n```\nYou may want to delete the views you haven't changed to benefit from package updates automatically.\n\n\n## Usage\nThe components are placed in the `bs` namespace, such that they can be used via:\n```HTML\n\u003cx-bs::component-name\u003e \u003c!-- Replace component-name with one of the component names described below --\u003e\n```\nComponents can be enhanced with additional classes from Bootstrap or your own CSS.\n\nSpecifically handled attributes are documented with type annotations in the `@props`\nin the respective Blade template under `resources/views/components`.\n\n\n### Alerts\n[Alerts](https://getbootstrap.com/docs/5.3/components/alerts/) are of variant `alert-info` by default\nand can be dismissible (with a close button).\n```HTML\n\u003cx-bs::alert\u003eMy info alert\u003c/x-bs::alert\u003e\n\u003cx-bs::alert variant=\"primary\"\u003eMy primary alert\u003c/x-bs::alert\u003e\n\u003cx-bs::alert variant=\"secondary\" :dismissible=\"true\"\u003eMy dismissible secondary alert\u003c/x-bs::alert\u003e\n```\n\n### Badges\n[Badges](https://getbootstrap.com/docs/5.3/components/badge/) are of variant `badge-primary` default:\n```HTML\n\u003cx-bs::badge\u003eMy primary badge\u003c/x-bs::badge\u003e\n\u003cx-bs::badge variant=\"secondary\"\u003eMy secondary badge\u003c/x-bs::badge\u003e\n```\n\n### Breadcrumb\nThe [breadcrumb](https://getbootstrap.com/docs/5.3/components/breadcrumb/) container is a `\u003cx-bs::breadcrumb\u003e` (typically placed within your `layouts/app.blade.php`):\n```HTML\n@hasSection('breadcrumbs')\n    \u003cx-bs::breadcrumb container-class=\"mt-3\" class=\"bg-light\"\u003e\n        \u003cx-bs::breadcrumb.item href=\"{{ route('dashboard') }}\"\u003e{{ __('Dashboard') }}\u003c/x-bs::breadcrumb.item\u003e\n        @yield('breadcrumbs')\n    \u003c/x-bs::breadcrumb\u003e\n@endif\n```\n\nItems can be added via `\u003cx-bs::breadcrumb.item :href=\"route('route-name')\"\u003eTitle\u003c/x-bs::breadcrumb.item\u003e`.\n\n### Buttons\nTo create [buttons](https://getbootstrap.com/docs/5.3/components/buttons/) \nor button-like links with Bootstrap's `btn-*` classes you can use \n- `\u003cx-bs::button\u003e` (becomes a `\u003cbutton\u003e`)\n- and `\u003cx-bs::button.link\u003e` (becomes an `\u003ca\u003e`).\nPer default `btn-primary` is used, you can change that with the variant. \n```HTML\n\u003cx-bs::button href=\"{{ route('my-route') }}\" variant=\"danger\"\u003e{{ __('Delete') }}\u003c/x-bs::button\u003e\n\u003cx-bs::button.link href=\"{{ route('my-route') }}\"\u003e{{ __('My title') }}\u003c/x-bs::button.link\u003e\n```\n\nTo disable a button or link, just add `disabled=\"true\"` which automatically adds the corresponding class \nand `aria-disabled=\"true\"` as recommended by the Bootstrap documentation.\n\n#### Button groups\nButtons can be [grouped](https://getbootstrap.com/docs/5.3/components/button-group/):\n```HTML\n\u003cx-bs::button.group\u003e\n    \u003cx-bs::button\u003eButton 1\u003c/x-bs::button\u003e\n    \u003cx-bs::button variant=\"secondary\"\u003eButton 2\u003c/x-bs::button\u003e\n\u003c/x-bs::button.group\u003e\n```\n\n#### Button toolbars\nButton groups can be grouped into a [toolbar](https://getbootstrap.com/docs/5.3/components/button-group/#button-toolbar):\n```HTML\n\u003cx-bs:toolbar aria-label=\"Toolbar with two groups\"\u003e\n    \u003cx-bs::button.group aria-label=\"First group\"\u003e\n        \u003cx-bs::button\u003eButton 1\u003c/x-bs::button\u003e\n        \u003cx-bs::button\u003eButton 2\u003c/x-bs::button\u003e\n    \u003c/x-bs::button.group\u003e\n    \u003cx-bs::button.group aria-label=\"Second group\"\u003e\n        \u003cx-bs::button variant=\"secondary\"\u003eButton 3\u003c/x-bs::button\u003e\n        \u003cx-bs::button variant=\"secondary\"\u003eButton 4\u003c/x-bs::button\u003e\n    \u003c/x-bs::button.group\u003e\n\u003c/x-bs:toolbar\u003e\n```\n\n### Dropdowns\n[Dropdown buttons](https://getbootstrap.com/docs/5.3/components/dropdowns/#single-button) can be added as follows:\n\n```HTML\n\u003cx-bs::dropdown.button direction=\"end\" variant=\"secondary\"\u003e\n    My button\n    \u003cx-slot:dropdown\u003e\n        \u003cx-bs::dropdown.item href=\"#\"\u003eItem 1\u003c/x-bs::dropdown.item\u003e\n        \u003cx-bs::dropdown.item href=\"#\"\u003eItem 2\u003c/x-bs::dropdown.item\u003e\n    \u003c/x-slot:dropdown\u003e\n\u003c/x-bs::dropdown.button\u003e\n```\n\nThe `direction` attribute can be used to set the direction of the dropdown overlay. It defaults to `down`.\n`variant` (default `primary`) is inherited from the [button component](#buttons).\n\nWithin the `\u003cx-slot:dropdown\u003e` you may place [headers](https://getbootstrap.com/docs/5.3/components/dropdowns/#headers) \nand [items](https://getbootstrap.com/docs/5.3/components/dropdowns/#menu-items):\n```HTML\n\u003cx-bs::dropdown.header\u003eMy header\u003c/x-bs::dropdown.header\u003e\n\u003cx-bs::dropdown.item href=\"#\"\u003eItem\u003c/x-bs::dropdown.item\u003e\n```\n\nNote that Bootstrap's [dropdowns require Popper](https://getbootstrap.com/docs/5.3/components/dropdowns/#overview), which needs to be included separately if you don't use Bootstrap's `bootstrap.bundle.min.js`.\n\nDropdown buttons within a button group require a [nested button group](https://getbootstrap.com/docs/5.3/components/button-group/#nesting) and `:nested-in-group=\"true\"` on the dropdown button:\n```HTML\n\u003cx-bs::button.group\u003e\n    \u003cx-bs::button.group\u003e\n        \u003cx-bs::dropdown.button variant=\"primary\" :nested-in-group=\"true\"\u003e\n            Primary dropdown in group\n            \u003cx-slot:dropdown\u003e\n                \u003cx-bs::dropdown.item href=\"#\"\u003eItem 1.1\u003c/x-bs::dropdown.item\u003e\n                \u003cx-bs::dropdown.item href=\"#\"\u003eItem 1.2\u003c/x-bs::dropdown.item\u003e\n            \u003c/x-slot:dropdown\u003e\n        \u003c/x-bs::dropdown.button\u003e\n        \u003cx-bs::dropdown.button variant=\"secondary\" :nested-in-group=\"true\"\u003e\n            Secondary dropdown in group\n            \u003cx-slot:dropdown\u003e\n                \u003cx-bs::dropdown.item href=\"#\"\u003eItem 2.1\u003c/x-bs::dropdown.item\u003e\n                \u003cx-bs::dropdown.item href=\"#\"\u003eItem 2.2\u003c/x-bs::dropdown.item\u003e\n            \u003c/x-slot:dropdown\u003e\n        \u003c/x-bs::dropdown.button\u003e\n    \u003c/x-bs::button.group\u003e\n    \u003cx-bs::button.link href=\"#\"\u003eNormal button in group\u003c/x-bs::button.link\u003e\n\u003c/x-bs::button.group\u003e\n```\n\n### Forms\nUse `\u003cx-bs::form\u003e` to create [forms](https://getbootstrap.com/docs/5.3/forms/overview/) (method defaults to `POST`),\nany additional attributes passed to the form component will be outputted as well:\n```HTML\n\u003cx-bs::form method=\"PUT\" action=\"{{ route('my-route.update') }}\" class=\"my-3\"\u003e\n    \u003c!-- TODO: add form fields and buttons --\u003e\n\u003c/x-bs::form\u003e\n```\n\nBladestrap will inject an [CSRF token field](https://laravel.com/docs/12.x/blade#csrf-field) for all methods except `GET` automatically.\nBladestrap will also configure [method spoofing](https://laravel.com/docs/12.x/blade#method-field) for `PUT`, `PATCH` and `DELETE` forms.\n\n### Types of form fields\nBladestrap has wide support for Bootstrap's [form fields](https://getbootstrap.com/docs/5.3/forms/form-control/).\n```HTML\n\u003cx-bs::form.field name=\"my_field_name\" type=\"text\" value=\"My value\"\u003e{{ __('My label') }}\u003c/x-bs::form.field\u003e\n```\n\nNote that the content of the form field becomes the label. This allows to include icons etc.\nIf you don't want to add a label, don't pass any content:\n```HTML\n\u003cx-bs::form.field name=\"my_field_name\" type=\"text\" value=\"My value\"/\u003e\n```\n\nAll attributes will be passed to the `\u003cinput\u003e`, `\u003cselect\u003e`, `\u003ctextarea\u003e` - except\n- the attributes which start with `container-` (those will be applied to the container for the label and input)\n- and the attributes which start with `label-` (those will be applied to the label).\n\nThe following [types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types) are supported as values for the `type` attribute:\n- `checkbox` - creates a [normal checkbox](https://getbootstrap.com/docs/5.3/forms/checks-radios/#checks), requires `:options`\n- `color`\n- `date`\n- `datetime-local`*\n- `email`\n- `file`\n- `hidden` - ignores slots for label, hint and input group\n- `month`*\n- `number`\n- `password`\n- `radio` - creates a [radio](https://getbootstrap.com/docs/5.3/forms/checks-radios/#radios), requires `:options`\n- `range`\n- `select` - creates a [dropdown](https://getbootstrap.com/docs/5.3/forms/select/) (`\u003cselect\u003e` with `\u003coption\u003e`s), requires `:options`\n- `switch` - creates a [toggle switch](https://getbootstrap.com/docs/5.3/forms/checks-radios/#switches), requires `:options`\n- `tel`\n- `text`\n- `textarea` - creates a `\u003ctextarea\u003e`\n- `time`*\n- `url`\n- `week`*\n\nThe types (marked with *) listed above don't have [full browser support](https://caniuse.com/?search=input%20type).\n\n#### Options\nRadio buttons, checkboxes and selects need a `:options` attribute providing an iterable of value/label pairs, e.g.\n- an `array`, as in `:options=\"[1 =\u003e 'Label 1', 2 =\u003e 'Label 2']\"`\n- an `Illuminate\\Support\\Collection`, such as \n  - `:options=\"User::query()-\u003epluck('name', 'id')\"`\n  - or `:options=\"User::query()-\u003epluck('name', 'id')-\u003eprepend(__('all'), '')\"`\n- a `Portavice\\Bladestrap\\Support\\Options` which allows to set custom attributes for each option.\n  For checkboxes, radios and switches, custom attributes prefixed with `check-container-` or `check-label-` are applied to the `.form-check` or `.form-check-label` respectively.\n  If labels contain HTML, set `:allow-html=\"true\"`.\n\nAn `Portavice\\Bladestrap\\Support\\Options` can be used to easily create an iterable based on\n- an `array`\n  ```PHP\n  use Portavice\\Bladestrap\\Support\\Options;\n\n  // Array with custom attributes\n  Options::fromArray(\n        [\n            1 =\u003e 'One',\n            2 =\u003e 'Two',\n        ],\n        static fn ($optionValue, $label) =\u003e [\n            'data-value' =\u003e $optionValue + 2,\n        ]\n    );\n  ```\n- an `enum` implementing the [BackedEnum interface](https://www.php.net/manual/de/class.backedenum.php)\n  ```PHP\n  use Portavice\\Bladestrap\\Support\\Options;\n\n  // All enum cases with labels based on the value\n  Options::fromEnum(MyEnum::class);\n\n  // ... with labels based on the name\n  Options::fromEnum(MyEnum::class, 'name');\n\n  // ... with labels based on the result of the myMethod function\n  Options::fromEnum(MyEnum::class, 'myMethod');\n\n  // Only a subset of enum cases\n  Options::fromEnum([MyEnum::Case1, MyEnum::Case2]);\n  ```\n- an `array` or `Illuminate\\Database\\Eloquent\\Collection` of Eloquent models \n  (the primary key becomes the value, label must be defined)\n  ```PHP\n  use Portavice\\Bladestrap\\Support\\Options;\n\n  // Array of models with labels based on a column or accessor\n  Options::fromModels([$user1, $user2, ...$moreUsers], 'name');\n\n  // Collection of models with labels based on a column or accessor\n  Options::fromModels(User::query()-\u003eget(), 'name');\n\n  // ... with labels based on a Closure\n  Options::fromModels(\n      User::query()-\u003eget(),\n      static fn (User $user) =\u003e sprintf('%s (%s)', $user-\u003ename, $user-\u003eid)\n  );\n\n  // ... with custom attributes for \u003coption\u003es using a \\Closure defining an ComponentAttributeBag\n  Options::fromModels(User::query()-\u003eget(), 'name', static function (User $user) {\n      return (new ComponentAttributeBag([]))-\u003eclass([\n          'user-option',\n          'inactive' =\u003e $user-\u003eisInactive(),\n      ]);\n  });\n\n  // ... with custom attributes for \u003coption\u003es using a \\Closure defining an array of attributes\n  Options::fromModels(User::query()-\u003eget(), 'name', fn (User $user) =\u003e [\n      'data-title' =\u003e $user-\u003etitle,\n  ]);\n  ```\n\nAdditional options can be prepended/appended to an `Options`:\n\n```PHP\nuse Portavice\\Bladestrap\\Support\\Options;\n\n$options = Options::fromModels(User::query()-\u003eget(), 'name')\n    -\u003esortAlphabetically() // call sort for current options\n    -\u003eprepend('all', '') // adds an option with an empty value before first option\n    -\u003eappend('label for last option', 'value') // adds an option after the last option\n    -\u003eprependMany([ // adds options before the first option (value =\u003e label)\n        'value-1' =\u003e 'first prepended option',\n        'value-2' =\u003e 'second prepended option',\n    ]);\n```\n\n**Radio** buttons (allows to select one of multiple values):\n```HTML\n\u003cx-bs::form.field name=\"my_field_name\" type=\"radio\" :options=\"$options\"\n                  :value=\"$value\"\u003e{{ __('My label') }}\u003c/x-bs::form.field\u003e\n```\n\n**Multiple** checkboxes (allows to select multiple values):\n```HTML\n\u003cx-bs::form.field id=\"my_field_name\" name=\"my_field_name[]\" type=\"checkbox\" :options=\"$options\"\n                  :value=\"$value\"\u003e{{ __('My label') }}\u003c/x-bs::form.field\u003e\n```\n\n**Single** checkbox (just one option):\n```HTML\n\u003cx-bs::form.field id=\"my_field_name\" type=\"checkbox\" :options=\"[1 =\u003e 'Option enabled']\"\n                  :value=\"$value\"\u003e{{ __('My label') }}\u003c/x-bs::form.field\u003e\n\u003cx-bs::form.field id=\"my_field_name\" type=\"checkbox\" :allow-html=\"true\"\n                  :options=\"Options::one('Option \u003cstrong\u003ewith HTML\u003c/strong\u003e enabled')\"\n                  :value=\"$value\"\u003e{{ __('My label') }}\u003c/x-bs::form.field\u003e\n```\n\n**Select** (allows to select one of multiple values):\n```HTML\n\u003cx-bs::form.field name=\"my_field_name\" type=\"select\" :options=\"$options\"\n                  :value=\"$value\"\u003e{{ __('My label') }}\u003c/x-bs::form.field\u003e\n```\n\n**Multi-Select** (allows to select multiple values):\n```HTML\n\u003cx-bs::form.field id=\"my_field_name\" name=\"my_field_name[]\" type=\"select\" multi :options=\"$options\"\n                  :value=\"$value\"\u003e{{ __('My label') }}\u003c/x-bs::form.field\u003e\n```\n\n#### Disabled, readonly, required\nThe attributes `:disabled`, `:readonly`, and `:required` accept a boolean value,\ne.g. `:disabled=\"true\"` or `:required=\"isset($var)\"`.\n\nPer default fields with `:required=\"true\"` are marked with a `*` after the label.\nThis behavior can be disabled via configuration (for all fields) or with `:mark-as-required=\"false\"` (for a single field).\n\n#### Input groups\nTo add text at the left or the right of a form field (except checkboxes and radio buttons),\nyou can use the slots `\u003cx-slot:prependText\u003e` and `\u003cx-slot:appendText\u003e`\nwhich makes an [input group](https://getbootstrap.com/docs/5.3/forms/input-group/):\n```HTML\n\u003cx-bs::form.field name=\"my_field_name\" type=\"number\" min=\"0\" max=\"100\" step=\"0.1\"\u003e\n    {{ __('My label') }}\n    \u003cx-slot:prependText\u003e≥\u003c/x-slot:prependText\u003e\n    \u003cx-slot:appendText\u003e€\u003c/x-slot:appendText\u003e\n\u003c/x-bs::form.field\u003e\n```\n\nBy default, the appended/prepended text is wrapped within a `\u003clabel\u003e class=\"input-group-text\"` associated with the field.\nTo avoid this, set `:container=\"false\"` attribute on the slot which allows to define to add buttons for example:\n```HTML\n\u003cx-bs::form.field name=\"file\" type=\"file\"\u003e\n    File\n    \u003cx-slot:appendText\u003e\n        \u003cx-bs::button.link variant=\"primary\" href=\"test.pdf\"\u003eDownload current file\u003c/x-bs::button.link\u003e\n    \u003c/x-slot:appendText\u003e\n\u003c/x-bs::form.field\u003e'\n```\n\nAlternatively, an `appendText` slot can include a `\u003cx-bs::form.field:nested-in-group=\"true\"\u003e`:\n```HTML\n\u003cx-bs::form.field name=\"price_from\" type=\"number\" min=\"1\" step=\"1\"\u003e\n    \u003cx-slot:prependText\u003efrom\u003c/x-slot:prependText\u003e\n    Price\n    \u003cx-slot:appendText :container=\"false\"\u003e\n        \u003cx-bs::form.field name=\"price_until\" type=\"number\" min=\"1\" step=\"1\" :nested-in-group=\"true\"\u003e\n            \u003cx-slot:prependText\u003euntil\u003c/x-slot:prependText\u003e\n            \u003cx-slot:appendText\u003e€\u003c/x-slot:appendText\u003e\n        \u003c/x-bs::form.field\u003e\n    \u003c/x-slot:appendText\u003e\n\u003c/x-bs::form.field\u003e\n```\n\n#### Hints\n`\u003cx-slot:hint\u003e` can be used to add a [text](https://getbootstrap.com/docs/5.3/forms/form-control/#form-text) with custom hints (`.form-text`) below the field,\nwhich will be automatically referenced via `aria-describedby` by the input:\n```HTML\n\u003cx-bs::form.field name=\"my_field_name\" type=\"text\"\u003e\n    {{ __('My label') }}\n    \u003cx-slot:hint\u003eHint\u003c/x-slot:hint\u003e\n\u003c/x-bs::form.field\u003e\n```\n\n#### Prefill values from query parameters\nSetting `:from-query=\"true\"` will extract values from the query parameters of the current route.\n```HTML\n\u003cx-bs::form.field id=\"name\" name=\"filter[name]\" type=\"text\" :from-query=\"true\"\u003e{{ __('Name') }}\u003c/x-bs::form.field\u003e\n```\nA form with the example field above on a page `/my-page?filter[name]=Test` will set \"Test\" as the prefilled value of the field,\nwhile `/my-page` will have an empty value.\n\nTo pass default filters applied if no query parameters are set, use `ValueHelper::setDefaults`:\n```PHP\nuse Portavice\\Bladestrap\\Support\\ValueHelper;\n\nValueHelper::setDefaults([\n    'filter.name' =\u003e 'default',\n])\n```\n\n#### Error messages\nAll form fields show corresponding error messages automatically if present \n([server-side validation](https://getbootstrap.com/docs/5.3/forms/validation/#server-side)).\nIf you want to show them independent of a form field, you can use the component directly:\n```HTML\n\u003cx-bs::form.feedback name=\"{{ $name }}\"/\u003e\n```\nBoth `\u003cx-bs::form.feedback\u003e` and `\u003cx-bs::form.field\u003e` support to use another than the default error bag via the `:errors` attribute.\n\n### Links\n[Colored links](https://getbootstrap.com/docs/5.3/helpers/colored-links/#link-colors) can be placed via `\u003cx-bs::link\u003e`, \nthe attributes `opacity` and `opacityHover` define [opacity](https://getbootstrap.com/docs/5.3/utilities/link/#link-opacity). \n```HTML\n\u003cx-bs::link href=\"{{ route('my-route') }}\"\u003eLink text\u003c/x-bs::link\u003e\n\u003cx-bs::link href=\"{{ route('my-route') }}\" variant=\"danger\"\u003eLink text\u003c/x-bs::link\u003e\n\u003cx-bs::link href=\"{{ route('my-route') }}\" opacity=\"25\"\u003eLink text\u003c/x-bs::link\u003e\n```\n\n### List groups\n`\u003cx-bs::list\u003e` is a [list group](https://getbootstrap.com/docs/5.3/components/list-group/), a container for multiple `\u003cx-bs::list.item\u003e`.\n`:flush=\"true\"` enables [flush behavior](https://getbootstrap.com/docs/5.3/components/list-group/#flush),\n`:horizontal=\"true` changes the layout from vertical to [horizontal](https://getbootstrap.com/docs/5.3/components/list-group/#horizontal).\n\nItems can be added via `\u003cx-bs::list.item\u003e`:\n```HTML\n\u003cx-bs::list\u003e\n    \u003cx-bs::list.item\u003eItem 1\u003c/x-bs::list.item\u003e\n    \u003cx-bs::list.item :active=\"true\"\u003eItem 2\u003c/x-bs::list.item\u003e\n\u003c/x-bs::list\u003e\n```\n`:active=\"true\"` highlights the [active item](https://getbootstrap.com/docs/5.3/components/list-group/#active-items), \n`:disabled=\"true\"` makes it appear [disabled](https://getbootstrap.com/docs/5.3/components/list-group/#disabled-items).\n\n### Modals\n[Modals](https://getbootstrap.com/docs/5.3/components/modal/) can be created via `\u003cx-bs::modal\u003e` with optional slots for title and footer.\nBoth slots accept additional classes and other attributes.\nIf you don't want a `\u003ch1\u003e` container for the title, change it via `container=\"h2\"` etc.\n```HTML\n\u003cx-bs::modal.button modal=\"my-modal\"\u003eOpen modal\u003c/x-bs::modal.button\u003e\n\u003cx-bs::modal id=\"my-modal\"\u003e\n    \u003cx-slot:title\u003eMy modal title\u003c/x-slot:title\u003e\n    \u003cx-slot:footer\u003e\n        \u003cx-bs::button\u003eTest\u003c/x-bs::button\u003e\n    \u003c/x-slot:footer\u003e\n\u003c/x-bs::modal\u003e\n```\n`\u003cx-bs::modal\u003e` supports the following optional attributes:\n- `centered` to center the modal vertically (defaults to `false`)\n- `fade` for the fade effect when opening the modal (defaults to `true`)\n- `fullScreen` to force fullscreen (defaults to `false`, pass `true` to always enforce full screen or `sm` to enforce for sizes below the sm breakpoint etc.), \n- `scrollable` to enable a vertical scrollbar for long dialog content (defaults to `false`)\n- `staticBackdrop`' to enforce that clicking outside of it does not close the modal (defaults to `false`)\n- `closeButton` sets the variant of the close button in the modal footer (defaults to `secondary`, `false` to disable the close button),\n- `closeButtonTitle` for the title of the close button (defaults to \"Close\")\n\nA `\u003cx-bs::modal.button modal=\"my-modal\"\u003e` opens the modal with the ID `my-modal`.\nYou may pass any additional attributes as known from [`\u003cx-bs::button\u003e`](#buttons).\n\n### Navigation\n`\u003cx-bs::nav\u003e` creates a [nav](https://getbootstrap.com/docs/5.3/components/navs-tabs/) container, use `container=\"ol\"` to change the container element from the default `\u003cul\u003e` to `\u003col\u003e`.\n\nNavigation items can be added via `\u003cx-bs::nav.item href=\"{{ route('route-name') }}\"\u003eCurrent Page\u003c/x-bs::nav.item\u003e`.\n\nA navigation item may open a [dropdown](#dropdowns) if you enabled this by adding a dropdown slot:\n```HTML\n\u003cx-bs::nav.item id=\"navbarUserDropdown\"\u003e\n    Dropdown link text\n    \u003cx-slot:dropdown class=\"dropdown-menu-end\"\u003e\n        \u003c!-- dropdown content--\u003e\n    \u003c/x-slot:dropdown\u003e\n\u003c/x-bs::list.item\u003e\n```\n\n\n## Usage without Laravel\nBladestrap uses `config()` and `request()` helpers.\nIf you want to use Bladestrap without Laravel, you need to define the two helpers in your application,\nfor example (may need to be adapted to the framework you use):\n```PHP\nuse Illuminate\\Http\\Request;\nuse Illuminate\\Support\\Arr;\n\n$configFile = [\n    'bladestrap' =\u003e require __DIR__ . '/../vendor/portavice/bladestrap/config/bladestrap.php',\n];\nfunction config(array|string|null $key, mixed $default = null): mixed\n{\n    global $configFile;\n    return Arr::get($configFile, $key, $default);\n}\n\n$request = Request::capture();\nfunction request(array|string|null $key = null, mixed $default = null): mixed\n{\n    global $request;\n    return $key === null ? $request : $request-\u003einput($key, $default);\n}\n```\n\nIn addition, you have to do the registrations of the `BladestrapServiceProvider` yourself:\n```PHP\nuse Illuminate\\View\\Factory;\nuse Portavice\\Bladestrap\\Macros\\ComponentAttributeBagExtension;\n\n// Register macros as BladestrapServiceProvider would do.\nComponentAttributeBagExtension::registerMacros();\n\n/* @var Factory $viewFactory */\n// Add components in bs namespace to your views.\n$viewFactory-\u003eaddNamespace('bs', __DIR__ . '/../vendor/portavice/bladestrap/resources/views');\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fportavice%2Fbladestrap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fportavice%2Fbladestrap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fportavice%2Fbladestrap/lists"}