{"id":15572965,"url":"https://github.com/bastinald/laravel-bootstrap-components","last_synced_at":"2025-04-14T19:53:47.533Z","repository":{"id":40490964,"uuid":"372983497","full_name":"bastinald/laravel-bootstrap-components","owner":"bastinald","description":"Laravel Bootstrap Blade components.","archived":false,"fork":false,"pushed_at":"2024-02-20T16:01:15.000Z","size":84,"stargazers_count":46,"open_issues_count":4,"forks_count":28,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-28T08:12:10.482Z","etag":null,"topics":["blade","bootstrap","bootstrap5","components","css","laravel","laravel-blade","laravel-blade-component"],"latest_commit_sha":null,"homepage":"","language":"Blade","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bastinald.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-06-01T23:14:55.000Z","updated_at":"2025-02-27T12:03:00.000Z","dependencies_parsed_at":"2022-09-07T11:21:17.805Z","dependency_job_id":null,"html_url":"https://github.com/bastinald/laravel-bootstrap-components","commit_stats":null,"previous_names":[],"tags_count":43,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bastinald%2Flaravel-bootstrap-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bastinald%2Flaravel-bootstrap-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bastinald%2Flaravel-bootstrap-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bastinald%2Flaravel-bootstrap-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bastinald","download_url":"https://codeload.github.com/bastinald/laravel-bootstrap-components/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248590125,"owners_count":21129753,"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":["blade","bootstrap","bootstrap5","components","css","laravel","laravel-blade","laravel-blade-component"],"created_at":"2024-10-02T18:09:05.886Z","updated_at":"2025-04-14T19:53:47.488Z","avatar_url":"https://github.com/bastinald.png","language":"Blade","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Laravel Bootstrap Components\n\nThis package contains a set of useful Bootstrap Laravel Blade components. It promotes DRY principles and allows you to keep your HTML nice and clean. Components include alerts, badges, buttons, form inputs (with automatic error feedback), dropdowns, navs, pagination (responsive), and more. The components come with Laravel Livewire integration built in, so you can use them with or without Livewire.\n\n## Documentation\n\n- [Requirements](#requirements)\n- [Installation](#installation)\n- [Components](#components)\n    - [Alert](#alert)\n    - [Badge](#badge)\n    - [Button](#button)\n    - [Check](#check)\n    - [Close](#close)\n    - [Color](#color)\n    - [Datalist](#datalist)\n    - [Dropdown](#dropdown)\n    - [Dropdown Item](#dropdown-item)\n    - [Icon](#icon)\n    - [Image](#image)\n    - [Input](#input)\n    - [Link](#link)\n    - [Nav Dropdown](#nav-dropdown)\n    - [Nav Link](#nav-link)\n    - [Pagination](#pagination)\n    - [Progress](#progress)\n    - [Radio](#radio)\n    - [Select](#select)\n    - [Textarea](#textarea)\n- [Traits](#traits)\n    - [WithModel](#withmodel)\n- [Publishing Assets](#publishing-assets)\n    - [Custom Views](#custom-views)\n    - [Custom Icons](#custom-icons)\n\n## Requirements\n\n- Bootstrap 5 must be installed via webpack first\n- Font Awesome must be installed to use icons\n\n## Installation\n\nRequire the package via composer:\n\n```console\ncomposer require bastinald/laravel-bootstrap-components\n```\n\n## Components\n\n### Alert\n\nA Bootstrap alert:\n\n```html\n\u003cx-bs::alert\n    :label=\"__('It was successful!')\"\n    color=\"info\"\n    dismissible\n/\u003e\n```\n\n#### Available Props \u0026 Slots\n\n- `icon`: Font Awesome icon to show before label e.g. `cog`, `envelope`\n- `label`: label to display, can also be placed in the `slot`\n- `color`: Bootstrap color e.g. `primary`, `danger`, `success`\n- `dismissible`: set the alert to be dismissible\n\n---\n\n### Badge\n\nA Bootstrap badge:\n\n```html\n\u003cx-bs::badge\n    :label=\"__('Pending')\"\n    color=\"warning\"\n/\u003e\n```\n\n#### Available Props \u0026 Slots\n\n- `icon`: Font Awesome icon to show before label e.g. `cog`, `envelope`\n- `label`: label to display, can also be placed in the `slot`\n- `color`: Bootstrap color e.g. `primary`, `danger`, `success`\n\n---\n\n### Button\n\nA Bootstrap button:\n\n```html\n\u003cx-bs::button\n    :label=\"__('Login')\"\n    color=\"primary\"\n    size=\"lg\"\n    route=\"login\"\n/\u003e\n```\n\n#### Available Props \u0026 Slots\n\n- `icon`: Font Awesome icon to show before label e.g. `cog`, `envelope`\n- `label`: label to display, can also be placed in the `slot`\n- `color`: Bootstrap color e.g. `primary`, `danger`, `success`\n- `size`: Bootstrap button size e.g. `sm`, `lg`\n- `type`: button type e.g. `button`, `submit`\n- `route`: sets the `href` to a route\n- `url`: sets the `href` to a url\n- `href`: sets the `href`\n- `dismiss`: a `data-bs-dismiss` value e.g. `alert`, `modal`\n- `toggle`: a `data-bs-toggle` value e.g. `collapse`, `dropdown`\n- `click`: Livewire action on click\n- `confirm`: prompts the user for confirmation on click\n\n---\n\n### Check\n\nA Bootstrap checkbox input:\n\n```html\n\u003cx-bs::check\n    :label=\"__('Agree')\"\n    :checkLabel=\"__('I agree to the TOS')\"\n    :help=\"__('Please accept the TOS.')\"\n    switch\n    model=\"agree\"\n/\u003e\n```\n\n#### Available Props \u0026 Slots\n\n- `label`: label to display above the input\n- `checkLabel`: label to display beside the input\n- `help`: helper label to display under the input\n- `switch`: style the input as a switch\n- `model`: Livewire model property key\n- `lazy`: bind Livewire data on change\n\n---\n\n### Close\n\nA Bootstrap close button:\n\n```html\n\u003cx-bs::close \n    dismiss=\"modal\"\n/\u003e\n```\n\n#### Available Props \u0026 Slots\n\n- `color`: Bootstrap close color e.g. `white`\n- `dismiss`: a `data-bs-dismiss` value e.g. `alert`, `modal`\n\n---\n\n### Color\n\nA Bootstrap color picker input:\n\n```html\n\u003cx-bs::color\n    :label=\"__('Favorite Color')\"\n    :prepend=\"__('I like')\"\n    :append=\"_('the most.')\"\n    :help=\"__('Please pick a color.')\"\n    model=\"favorite_color\"\n/\u003e\n```\n\n#### Available Props \u0026 Slots\n\n- `label`: label to display above the input\n- `icon`: Font Awesome icon to show before input e.g. `cog`, `envelope`\n- `prepend`: addon to display before input, can be used via named slot\n- `append`: addon to display after input, can be used via named slot\n- `size`: Bootstrap input size e.g. `sm`, `lg`\n- `help`: helper label to display under the input\n- `model`: Livewire model property key\n- `lazy`: bind Livewire data on change\n\n---\n\n### Datalist\n\nA Bootstrap datalist input:\n\n```html\n\u003cx-bs::datalist\n    :label=\"__('City Name')\"\n    :options=\"['Toronto', 'Montreal', 'Las Vegas']\"\n    :prepend=\"__('I live in')\"\n    :append=\"_('right now.')\"\n    :help=\"__('Please enter your city.')\"\n    model=\"city_name\"\n/\u003e\n```\n\n#### Available Props \u0026 Slots\n\n- `label`: label to display above the input\n- `options`: array of input options e.g. `['Red', 'Blue']`\n- `icon`: Font Awesome icon to show before input e.g. `cog`, `envelope`\n- `prepend`: addon to display before input, can be used via named slot\n- `append`: addon to display after input, can be used via named slot\n- `size`: Bootstrap input size e.g. `sm`, `lg`\n- `help`: helper label to display under the input\n- `model`: Livewire model property key\n- `debounce`: time in ms to bind Livewire data on keyup e.g. `500`\n- `lazy`: bind Livewire data on change\n\n---\n\n### Desc\n\nA description list:\n\n```html\n\u003cx-bs::desc \n    :term=\"__('ID')\"\n    :details=\"$user-\u003eid\"\n/\u003e\n```\n\n#### Available Props \u0026 Slots\n\n- `tern`: the description list term\n- `details`: the description list details, can also be placed in the `slot`\n- `date`: date to use instead of details (for use with [Laravel Timezone](https://github.com/jamesmills/laravel-timezone))\n\n---\n\n### Dropdown\n\nA Bootstrap dropdown:\n\n```html\n\u003cx-bs::dropdown\n    :label=\"__('Filter')\"\n    color=\"danger\"\n\u003e\n    \u003cx-bs::dropdown-item \n        :label=\"__('By Name')\"\n        click=\"$set('filter', 'name')\"\n    /\u003e\n    \u003cx-bs::dropdown-item\n        :label=\"__('By Age')\"\n        click=\"$set('filter', 'age')\"\n    /\u003e\n\u003c/x-bs::dropdown\u003e\n```\n\n#### Available Props \u0026 Slots\n\n- `icon`: Font Awesome icon to show before label e.g. `cog`, `envelope`\n- `label`: dropdown label to display, can be used via named slot\n- `items`: dropdown items, can also be placed in the `slot`\n- `color`: Bootstrap color e.g. `primary`, `danger`, `success`\n- `size`: Bootstrap button size e.g. `sm`, `lg`\n\n---\n\n### Dropdown Item\n\nA Bootstrap dropdown menu item:\n\n```html\n\u003cx-bs::dropdown-item\n    :label=\"__('Login')\"\n    route=\"login\"\n/\u003e\n```\n\n#### Available Props \u0026 Slots\n\n- `icon`: Font Awesome icon to show before label e.g. `cog`, `envelope`\n- `label`: label to display, can also be placed in the `slot`\n- `route`: sets the `href` to a route\n- `url`: sets the `href` to a url\n- `href`: sets the `href`\n\n---\n\n### Form\n\nA Bootstrap form:\n\n```html\n\u003cx-bs::form submit=\"login\"\u003e\n    \u003cx-bs::input :label=\"__('Email')\" type=\"email\" model=\"email\"/\u003e\n    \u003cx-bs::input :label=\"__('Password')\" type=\"password\" model=\"password\"/\u003e\n    \u003cx-bs::button :label=\"__('Login')\" type=\"submit\"/\u003e\n\u003c/x-bs::form\u003e\n```\n\n#### Available Props \u0026 Slots\n\n- `submit`: Livewire action on submit\n\n### Icon\n\nA Font Awesome icon:\n\n```html\n\u003cx-bs::icon\n    name=\"cog\"\n/\u003e\n```\n\n#### Available Props \u0026 Slots\n\n- `name`: Font Awesome icon name e.g. `cog`, `rocket`\n- `style`: Font Awesome icon style e.g. `solid`, `regular`, `brands`\n- `size`: Font Awesome icon size e.g. `sm`, `lg`, `3x`, `5x`\n- `color`: Bootstrap color e.g. `primary`, `danger`, `success`\n- `spin`: sets the icon to use a spin animation\n- `pulse`: sets the icon to use a pulse animation\n\n---\n\n### Image\n\nAn image:\n\n```html\n\u003cx-bs::image\n    asset=\"images/logo.png\"\n    height=\"24\"\n    rounded\n/\u003e\n```\n\n#### Available Props \u0026 Slots\n\n- `asset`: sets the `src` to an asset\n- `src`: sets the `src`\n- `fluid`: sets the image to be fluid width\n- `thumbnail`: sets the image to use thumbnail styling\n- `rounded`: sets the image to have rounded corners\n\n---\n\n### Input\n\nA Bootstrap text input:\n\n```html\n\u003cx-bs::input\n    :label=\"__('Email Address')\"\n    type=\"email\"\n    :help=\"__('Please enter your email.')\"\n    model=\"email_address\"\n\u003e\n    \u003cx-slot name=\"prepend\"\u003e\n        \u003ci class=\"fa fa-envelope\"\u003e\u003c/i\u003e\n    \u003c/x-slot\u003e\n\u003c/x-bs::input\u003e\n```\n\n#### Available Props \u0026 Slots\n\n- `label`: label to display above the input\n- `type`: input type e.g. `text`, `email`\n- `icon`: Font Awesome icon to show before input e.g. `cog`, `envelope`\n- `prepend`: addon to display before input, can be used via named slot\n- `append`: addon to display after input, can be used via named slot\n- `size`: Bootstrap input size e.g. `sm`, `lg`\n- `help`: helper label to display under the input\n- `model`: Livewire model property key\n- `debounce`: time in ms to bind Livewire data on keyup e.g. `500`\n- `lazy`: bind Livewire data on change\n\n---\n\n### Link\n\nA hyperlink:\n\n```html\n\u003cx-bs::link\n    :label=\"__('Users')\"\n    route=\"users\"\n/\u003e\n```\n\n#### Available Props \u0026 Slots\n\n- `icon`: Font Awesome icon to show before label e.g. `cog`, `envelope`\n- `label`: label to display, can also be placed in the `slot`\n- `route`: sets the `href` to a route\n- `url`: sets the `href` to a url\n- `href`: sets the `href`\n\n---\n\n### Nav Dropdown\n\nA Bootstrap nav dropdown:\n\n```html\n\u003cx-bs::nav-dropdown\n    :label=\"Auth::user()-\u003ename\"\n\u003e\n    \u003cx-bs::dropdown-item \n        :label=\"__('Update Profile')\"\n        click=\"$emit('showModal', 'profile.update')\"\n    /\u003e\n    \u003cx-bs::dropdown-item\n        :label=\"__('Logout')\"\n        click=\"logout\"\n    /\u003e\n\u003c/x-bs::nav-dropdown\u003e\n```\n\n#### Available Props \u0026 Slots\n\n- `icon`: Font Awesome icon to show before label e.g. `cog`, `envelope`\n- `label`: dropdown label to display, can be used via named slot\n- `items`: dropdown items, can also be placed in the `slot`\n\n---\n\n### Nav Link\n\nA Bootstrap nav link:\n\n```html\n\u003cx-bs::nav-link\n    :label=\"__('Users')\"\n    route=\"users\"\n/\u003e\n```\n\n#### Available Props \u0026 Slots\n\n- `icon`: Font Awesome icon to show before label e.g. `cog`, `envelope`\n- `label`: label to display, can also be placed in the `slot`\n- `route`: sets the `href` to a route\n- `url`: sets the `href` to a url\n- `href`: sets the `href`\n\n---\n\n### Pagination\n\nResponsive Bootstrap pagination links:\n\n```html\n\u003cx-bs::pagination\n    :links=\"App\\Models\\User::paginate()\"\n    justify=\"center\"\n/\u003e\n```\n\n#### Available Props \u0026 Slots\n\n- `links`: paginated Laravel models\n- `justify`: Bootstrap justification e.g. `start`, `end`\n\n---\n\n### Progress\n\nA Bootstrap progress bar:\n\n```html\n\u003cx-bs::progress\n    :label=\"__('25% Complete')\"\n    percent=\"25\"\n    color=\"success\"\n    height=\"10\"\n    animated\n    striped\n/\u003e\n```\n\n#### Available Props \u0026 Slots\n\n- `label`: label to display inside the progress bar\n- `percent`: percentage of the progress bar\n- `color`: Bootstrap color e.g. `primary`, `danger`, `success`\n- `height`: height of the progress bar in pixels\n- `animated`: animate the progress bar\n- `striped`: use striped styling for the progress bar\n\n---\n\n### Radio\n\nA Bootstrap radio input:\n\n```html\n\u003cx-bs::radio\n    :label=\"__('Gender')\"\n    :options=\"['Male', 'Female']\"\n    :help=\"__('Please select your gender.')\"\n    switch\n    model=\"gender\"\n/\u003e\n```\n\n#### Available Props \u0026 Slots\n\n- `label`: label to display above the input\n- `options`: array of input options e.g. `['Red', 'Blue']`\n- `help`: helper label to display under the input\n- `switch`: sets the input to use a switch style\n- `model`: Livewire model property key\n- `lazy`: bind Livewire data on change\n\n---\n\n### Select\n\nA Bootstrap select input:\n\n```html\n\u003cx-bs::select\n    :label=\"__('Your Country')\"\n    :placeholder=\"__('Select Country')\"\n    :options=\"['Australia', 'Canada', 'USA']\"\n    :prepend=\"__('I live in')\"\n    :append=\"_('right now.')\"\n    :help=\"__('Please select your country.')\"\n    model=\"your_country\"\n/\u003e\n```\n\n#### Available Props \u0026 Slots\n\n- `label`: label to display above the input\n- `placeholder`: placeholder to use for the empty first option\n- `options`: array of input options e.g. `['Red', 'Blue']`\n- `icon`: Font Awesome icon to show before input e.g. `cog`, `envelope`\n- `prepend`: addon to display before input, can be used via named slot\n- `append`: addon to display after input, can be used via named slot\n- `size`: Bootstrap input size e.g. `sm`, `lg`\n- `help`: helper label to display under the input\n- `model`: Livewire model property key\n- `lazy`: bind Livewire data on change\n\n---\n\n### Textarea\n\nA Bootstrap textarea input:\n\n```html\n\u003cx-bs::textarea\n    :label=\"__('Biography')\"\n    rows=\"5\"\n    :help=\"__('Please tell us about yourself.')\"\n    model=\"biography\"\n/\u003e\n```\n\n#### Available Props \u0026 Slots\n\n- `label`: label to display above the input\n- `icon`: Font Awesome icon to show before input e.g. `cog`, `envelope`\n- `prepend`: addon to display before input, can be used via named slot\n- `append`: addon to display after input, can be used via named slot\n- `size`: Bootstrap input size e.g. `sm`, `lg`\n- `help`: helper label to display under the input\n- `model`: Livewire model property key\n- `debounce`: time in ms to bind Livewire data on keyup e.g. `500`\n- `lazy`: bind Livewire data on change\n\n## Traits\n\n### WithModel\n\nThis trait makes form data model manipulation a breeze. No more having to create a Livewire component property for every single form input. All form data will be placed inside the `$model` property array.\n\n#### Getting Model Data\n\nGet the model data as a collection:\n\n```php\n$collection = $this-\u003emodel();\n```\n\n#### Setting Model Data\n\nSet a single value:\n\n```php\n$this-\u003esetModel('name', 'Kevin');\n```\n\nSet values using Eloquent model data:\n\n```php\n$this-\u003esetModel(User::first());\n```\n\nSet values using an array:\n\n```php\n$this-\u003esetModel([\n    'name' =\u003e 'Kevin',\n    'email' =\u003e 'kevin@example.com',\n]);\n```\n\n#### Working With Arrays\n\nAdd an empty array item:\n\n```php\n$this-\u003eaddModelItem('locations');\n```\n\nRemove an array item by its key:\n\n```php\n$this-\u003eremoveModelItem('locations', 3);\n```\n\nOrder an array item by its key \u0026 direction:\n\n```php\n$this-\u003eorderModelItem('locations', 3, 'up');\n```\n\nThe direction should be `up` or `down`.\n\n#### Binding Model Data\n\nPackage components work with this trait via the `model` attribute:\n\n```html\n\u003cx-bs::input :label=\"__('Name')\" model=\"name\"/\u003e\n\u003cx-bs::input :label=\"__('Email')\" type=\"email\" model=\"email\"/\u003e\n```\n\n#### Validating Model Data\n\nUse the `validateModel` method to validate model data:\n\n```php\n$this-\u003evalidateModel([\n    'name' =\u003e ['required'],\n    'email' =\u003e ['required', 'email'],\n]);\n```\n\nThis method works just like the Livewire `validate` method, so you can specify your rules in a separate `rules` method if you prefer.\n\n## Publishing Assets\n\n### Custom Views\n\nUse your own component views by publishing the package views:\n\n```console\nphp artisan vendor:publish --tag=laravel-bootstrap-components:views\n```\n\nNow edit the files inside `resources/views/vendor/bs`. The package will use these files to render the components.\n\n### Custom Icons\n\nUse your own font icons by publishing the package config:\n\n```console\nphp artisan vendor:publish --tag=laravel-bootstrap-components:config\n```\n\nNow edit the `icon_class_prefix` value inside `config/laravel-bootstrap-components.php`. The package will use this class to render the icons.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbastinald%2Flaravel-bootstrap-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbastinald%2Flaravel-bootstrap-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbastinald%2Flaravel-bootstrap-components/lists"}