PHPackages shawe/laravel-bs5-components - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Templating & Views](/categories/templating) 4. / 5. shawe/laravel-bs5-components ActiveLibrary[Templating & Views](/categories/templating) shawe/laravel-bs5-components ============================ Laravel Bootstrap Blade components. This is a fork from https://github.com/bastinald/laravel-bootstrap-components to add more needed components. All credits to Kevin Dion. 0255Blade Since Mar 28Pushed 1y ago1 watchersCompare [ Source](https://github.com/shawe/laravel-bs5-components)[ Packagist](https://packagist.org/packages/shawe/laravel-bs5-components)[ RSS](/packages/shawe-laravel-bs5-components/feed)WikiDiscussions main Synced 1mo ago READMEChangelogDependenciesVersions (1)Used By (0) Laravel Bootstrap Components ============================ [](#laravel-bootstrap-components) This 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. Documentation ------------- [](#documentation) - [Requirements](#requirements) - [Installation](#installation) - [Components](#components) - [Alert](#alert) - [Badge](#badge) - [Button](#button) - [Check](#check) - [Close](#close) - [Color](#color) - [Datalist](#datalist) - [Dropdown](#dropdown) - [Dropdown Item](#dropdown-item) - [Icon](#icon) - [Image](#image) - [Input](#input) - [Link](#link) - [Nav Dropdown](#nav-dropdown) - [Nav Link](#nav-link) - [Pagination](#pagination) - [Progress](#progress) - [Radio](#radio) - [Select](#select) - [Textarea](#textarea) - [Traits](#traits) - [WithModel](#withmodel) - [Publishing Assets](#publishing-assets) - [Custom Views](#custom-views) - [Custom Icons](#custom-icons) Requirements ------------ [](#requirements) - Bootstrap 5 must be installed via webpack first - Font Awesome must be installed to use icons Installation ------------ [](#installation) Require the package via composer: ``` composer require shawe/laravel-bs5-components ``` Components ---------- [](#components) ### Accordion [](#accordion) A Bootstrap accordion: ``` Section 1 content... Section 2 content... ``` #### Available Props & Slots [](#available-props--slots) - `body`: accordion body content, can also be placed in the `slot` ### Accordion Item [](#accordion-item) A Bootstrap accordion item: ``` Section 1 content... ``` --- #### Available Props & Slots [](#available-props--slots-1) - `header`: accordion header text - `body`: accordion body content, can also be placed in the `slot` - `active`: set the accordion item to be active ### Alert [](#alert) A Bootstrap alert: ``` ``` #### Available Props & Slots [](#available-props--slots-2) - `icon`: Font Awesome icon to show before label e.g. `cog`, `envelope` - `label`: label to display, can also be placed in the `slot` - `color`: Bootstrap color e.g. `primary`, `danger`, `success` - `dismissible`: set the alert to be dismissible --- ### Badge [](#badge) A Bootstrap badge: ``` ``` #### Available Props & Slots [](#available-props--slots-3) - `icon`: Font Awesome icon to show before label e.g. `cog`, `envelope` - `label`: label to display, can also be placed in the `slot` - `color`: Bootstrap color e.g. `primary`, `danger`, `success` --- ### Breadcrumb [](#breadcrumb) A Bootstrap breadcrumb: ``` ``` --- ### Button [](#button) A Bootstrap button: ``` ``` #### Available Props & Slots [](#available-props--slots-4) - `icon`: Font Awesome icon to show before label e.g. `cog`, `envelope` - `label`: label to display, can also be placed in the `slot` - `color`: Bootstrap color e.g. `primary`, `danger`, `success` - `size`: Bootstrap button size e.g. `sm`, `lg` - `type`: button type e.g. `button`, `submit` - `route`: sets the `href` to a route - `url`: sets the `href` to a url - `href`: sets the `href` - `dismiss`: a `data-bs-dismiss` value e.g. `alert`, `modal` - `toggle`: a `data-bs-toggle` value e.g. `collapse`, `dropdown` - `click`: Livewire action on click - `confirm`: prompts the user for confirmation on click --- ### Card [](#card) A Bootstrap card: ``` Card Title Card body content... Card footer button ``` #### Available Props & Slots [](#available-props--slots-5) - `header`: card header content - `body`: card body content, can also be placed in the `slot` - `footer`: card footer content --- ### Carousel [](#carousel) A Bootstrap carousel: ``` @php($images = [ [ 'src' => 'https://via.placeholder.com/800x400?text=First+slide', 'alt' => 'First slide', 'caption' => 'First slide caption', ], [ 'src' => 'https://via.placeholder.com/800x400?text=Second+slide', 'alt' => 'Second slide', 'caption' => 'Second slide caption', ], [ 'src' => 'https://via.placeholder.com/800x400?text=Third+slide', 'alt' => 'Third slide', 'caption' => 'Third slide caption', ], ]) ``` #### Available Props & Slots [](#available-props--slots-6) - `images`: array of images - `indicators`: show carousel indicators - `controls`: show carousel controls - `id`: carousel id --- ### Check [](#check) A Bootstrap checkbox input: ``` ``` #### Available Props & Slots [](#available-props--slots-7) - `label`: label to display above the input - `checkLabel`: label to display beside the input - `help`: helper label to display under the input - `switch`: style the input as a switch - `model`: Livewire model property key - `lazy`: bind Livewire data on change --- ### Close [](#close) A Bootstrap close button: ``` ``` #### Available Props & Slots [](#available-props--slots-8) - `color`: Bootstrap close color e.g. `white` - `dismiss`: a `data-bs-dismiss` value e.g. `alert`, `modal` --- ### Color [](#color) A Bootstrap color picker input: ``` ``` #### Available Props & Slots [](#available-props--slots-9) - `label`: label to display above the input - `icon`: Font Awesome icon to show before input e.g. `cog`, `envelope` - `prepend`: addon to display before input, can be used via named slot - `append`: addon to display after input, can be used via named slot - `size`: Bootstrap input size e.g. `sm`, `lg` - `help`: helper label to display under the input - `model`: Livewire model property key - `lazy`: bind Livewire data on change --- ### Datalist [](#datalist) A Bootstrap datalist input: ``` ``` #### Available Props & Slots [](#available-props--slots-10) - `label`: label to display above the input - `options`: array of input options e.g. `['Red', 'Blue']` - `icon`: Font Awesome icon to show before input e.g. `cog`, `envelope` - `prepend`: addon to display before input, can be used via named slot - `append`: addon to display after input, can be used via named slot - `size`: Bootstrap input size e.g. `sm`, `lg` - `help`: helper label to display under the input - `model`: Livewire model property key - `debounce`: time in ms to bind Livewire data on keyup e.g. `500` - `lazy`: bind Livewire data on change --- ### Desc [](#desc) A description list: ``` ``` #### Available Props & Slots [](#available-props--slots-11) - `tern`: the description list term - `details`: the description list details, can also be placed in the `slot` - `date`: date to use instead of details (for use with [Laravel Timezone](https://github.com/jamesmills/laravel-timezone)) --- ### Dropdown [](#dropdown) A Bootstrap dropdown: ``` ``` #### Available Props & Slots [](#available-props--slots-12) - `icon`: Font Awesome icon to show before label e.g. `cog`, `envelope` - `label`: dropdown label to display, can be used via named slot - `items`: dropdown items, can also be placed in the `slot` - `color`: Bootstrap color e.g. `primary`, `danger`, `success` - `size`: Bootstrap button size e.g. `sm`, `lg` --- ### Dropdown Item [](#dropdown-item) A Bootstrap dropdown menu item: ``` ``` #### Available Props & Slots [](#available-props--slots-13) - `icon`: Font Awesome icon to show before label e.g. `cog`, `envelope` - `label`: label to display, can also be placed in the `slot` - `route`: sets the `href` to a route - `url`: sets the `href` to a url - `href`: sets the `href` --- ### Form [](#form) A Bootstrap form: ``` ``` #### Available Props & Slots [](#available-props--slots-14) - `submit`: Livewire action on submit ### Icon [](#icon) A Font Awesome icon: ``` ``` #### Available Props & Slots [](#available-props--slots-15) - `name`: Font Awesome icon name e.g. `cog`, `rocket` - `style`: Font Awesome icon style e.g. `solid`, `regular`, `brands` - `size`: Font Awesome icon size e.g. `sm`, `lg`, `3x`, `5x` - `color`: Bootstrap color e.g. `primary`, `danger`, `success` - `spin`: sets the icon to use a spin animation - `pulse`: sets the icon to use a pulse animation --- ### Image [](#image) An image: ``` ``` #### Available Props & Slots [](#available-props--slots-16) - `asset`: sets the `src` to an asset - `src`: sets the `src` - `fluid`: sets the image to be fluid width - `thumbnail`: sets the image to use thumbnail styling - `rounded`: sets the image to have rounded corners --- ### Input [](#input) A Bootstrap text input: ``` ``` #### Available Props & Slots [](#available-props--slots-17) - `label`: label to display above the input - `type`: input type e.g. `text`, `email` - `icon`: Font Awesome icon to show before input e.g. `cog`, `envelope` - `prepend`: addon to display before input, can be used via named slot - `append`: addon to display after input, can be used via named slot - `size`: Bootstrap input size e.g. `sm`, `lg` - `help`: helper label to display under the input - `model`: Livewire model property key - `debounce`: time in ms to bind Livewire data on keyup e.g. `500` - `lazy`: bind Livewire data on change --- ### Link [](#link) A hyperlink: ``` ``` #### Available Props & Slots [](#available-props--slots-18) - `icon`: Font Awesome icon to show before label e.g. `cog`, `envelope` - `label`: label to display, can also be placed in the `slot` - `route`: sets the `href` to a route - `url`: sets the `href` to a url - `href`: sets the `href` --- ### Modal [](#modal) A Bootstrap modal: ``` Modal title Modal body text goes here. Close Save changes ``` #### Available Props & Slots [](#available-props--slots-19) - `title`: modal title content - `body`: modal body content - `footer`: modal footer content - `class`: modal class e.g. `modal-lg`, `modal-dialog-centered` --- ### Nav Dropdown [](#nav-dropdown) A Bootstrap nav dropdown: ``` ``` #### Available Props & Slots [](#available-props--slots-20) - `icon`: Font Awesome icon to show before label e.g. `cog`, `envelope` - `label`: dropdown label to display, can be used via named slot - `items`: dropdown items, can also be placed in the `slot` --- ### Nav Link [](#nav-link) A Bootstrap nav link: ``` ``` #### Available Props & Slots [](#available-props--slots-21) - `icon`: Font Awesome icon to show before label e.g. `cog`, `envelope` - `label`: label to display, can also be placed in the `slot` - `route`: sets the `href` to a route - `url`: sets the `href` to a url - `href`: sets the `href` --- ### Pagination [](#pagination) Responsive Bootstrap pagination links: ``` ``` #### Available Props & Slots [](#available-props--slots-22) - `links`: paginated Laravel models - `justify`: Bootstrap justification e.g. `start`, `end` --- ### Progress [](#progress) A Bootstrap progress bar: ``` ``` #### Available Props & Slots [](#available-props--slots-23) - `label`: label to display inside the progress bar - `percent`: percentage of the progress bar - `color`: Bootstrap color e.g. `primary`, `danger`, `success` - `height`: height of the progress bar in pixels - `animated`: animate the progress bar - `striped`: use striped styling for the progress bar --- ### Radio [](#radio) A Bootstrap radio input: ``` ``` #### Available Props & Slots [](#available-props--slots-24) - `label`: label to display above the input - `options`: array of input options e.g. `['Red', 'Blue']` - `help`: helper label to display under the input - `switch`: sets the input to use a switch style - `model`: Livewire model property key - `lazy`: bind Livewire data on change --- ### Select [](#select) A Bootstrap select input: ``` @php($countries = ['Australia', 'Canada', 'USA']) ``` #### Available Props & Slots [](#available-props--slots-25) - `label`: label to display above the input - `placeholder`: placeholder to use for the empty first option - `options`: array of input options e.g. `['Red', 'Blue']` - `icon`: Font Awesome icon to show before input e.g. `cog`, `envelope` - `prepend`: addon to display before input, can be used via named slot - `append`: addon to display after input, can be used via named slot - `size`: Bootstrap input size e.g. `sm`, `lg` - `help`: helper label to display under the input - `model`: Livewire model property key - `lazy`: bind Livewire data on change --- ### Textarea [](#textarea) A Bootstrap textarea input: ``` ``` #### Available Props & Slots [](#available-props--slots-26) - `label`: label to display above the input - `icon`: Font Awesome icon to show before input e.g. `cog`, `envelope` - `prepend`: addon to display before input, can be used via named slot - `append`: addon to display after input, can be used via named slot - `size`: Bootstrap input size e.g. `sm`, `lg` - `help`: helper label to display under the input - `model`: Livewire model property key - `debounce`: time in ms to bind Livewire data on keyup e.g. `500` - `lazy`: bind Livewire data on change Traits ------ [](#traits) ### WithModel [](#withmodel) This 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. #### Getting Model Data [](#getting-model-data) Get the model data as a collection: ``` $collection = $this->model(); ``` #### Setting Model Data [](#setting-model-data) Set a single value: ``` $this->setModel('name', 'Kevin'); ``` Set values using Eloquent model data: ``` $this->setModel(User::first()); ``` Set values using an array: ``` $this->setModel([ 'name' => 'Kevin', 'email' => 'kevin@example.com', ]); ``` #### Working With Arrays [](#working-with-arrays) Add an empty array item: ``` $this->addModelItem('locations'); ``` Remove an array item by its key: ``` $this->removeModelItem('locations', 3); ``` Order an array item by its key & direction: ``` $this->orderModelItem('locations', 3, 'up'); ``` The direction should be `up` or `down`. #### Binding Model Data [](#binding-model-data) Package components work with this trait via the `model` attribute: ``` ``` #### Validating Model Data [](#validating-model-data) Use the `validateModel` method to validate model data: ``` $this->validateModel([ 'name' => ['required'], 'email' => ['required', 'email'], ]); ``` This method works just like the Livewire `validate` method, so you can specify your rules in a separate `rules` method if you prefer. Publishing Assets ----------------- [](#publishing-assets) ### Custom Views [](#custom-views) Use your own component views by publishing the package views: ``` php artisan vendor:publish --tag=laravel-bs5-components:views ``` Now edit the files inside `resources/views/vendor/bs`. The package will use these files to render the components. ### Custom Icons [](#custom-icons) Use your own font icons by publishing the package config: ``` php artisan vendor:publish --tag=laravel-bs5-components:config ``` Now edit the `icon_class_prefix` value inside `config/laravel-bs5-components.php`. The package will use this class to render the icons. ### Health Score 18 — LowBetter than 8% of packages Maintenance35 Infrequent updates — may be unmaintained Popularity11 Limited adoption so far Community9 Small or concentrated contributor base Maturity15 Early-stage or recently created project Bus Factor1 Top contributor holds 52.3% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Community Maintainers ![](https://www.gravatar.com/avatar/75e2f231035345e79c2f5c2adb775041687482669a94c290acf6c2132497743b?d=identicon)[shawe](/maintainers/shawe) --- Top Contributors [![bastinald](https://avatars.githubusercontent.com/u/82109804?v=4)](https://github.com/bastinald "bastinald (46 commits)")[![shawe](https://avatars.githubusercontent.com/u/145989?v=4)](https://github.com/shawe "shawe (42 commits)") ### Embed Badge ![Health badge](/badges/shawe-laravel-bs5-components/health.svg) ``` [![Health](https://phpackages.com/badges/shawe-laravel-bs5-components/health.svg)](https://phpackages.com/packages/shawe-laravel-bs5-components) ``` ### Alternatives [mustache/mustache A Mustache implementation in PHP. 3.3k44.6M291](/packages/mustache-mustache)[roots/acorn Framework for Roots WordPress projects built with Laravel components. 9682.1M97](/packages/roots-acorn)[whitecube/nova-flexible-content Flexible Content & Repeater Fields for Laravel Nova. 8053.0M25](/packages/whitecube-nova-flexible-content)[mopa/bootstrap-bundle Easy integration of twitters bootstrap into symfony2 7042.9M33](/packages/mopa-bootstrap-bundle)[limenius/react-bundle Client and Server-side react rendering in a Symfony Bundle 3871.2M](/packages/limenius-react-bundle)[nicmart/string-template StringTemplate is a very simple string template engine for php. I've written it to have a thing like sprintf, but with named and nested substutions. 2101.7M30](/packages/nicmart-string-template) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)