PHPackages bethuxs/blade-bootstrap-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. bethuxs/blade-bootstrap-components ActiveLibrary[Templating & Views](/categories/templating) bethuxs/blade-bootstrap-components ================================== Bootstrap 5 components for Laravel Blade 18PHPCI failing Since Mar 11Pushed 2mo ago1 watchersCompare [ Source](https://github.com/bethuxs/BladeBootstrapComponents)[ Packagist](https://packagist.org/packages/bethuxs/blade-bootstrap-components)[ RSS](/packages/bethuxs-blade-bootstrap-components/feed)WikiDiscussions main Synced 1mo ago READMEChangelogDependenciesVersions (1)Used By (0) Bethuxs Blade Bootstrap Components ================================== [](#bethuxs-blade-bootstrap-components) A lightweight and flexible library of Blade components designed to integrate seamlessly with Bootstrap 5. This library simplifies building responsive UIs in Laravel by encapsulating Bootstrap 5 components into reusable Blade templates. --- Features -------- [](#features) - ✨ Prebuilt components for common Bootstrap 5 elements - πŸ”§ Fully customizable with dynamic attributes - πŸ“¦ Easy integration with Laravel projects - β™Ώ Accessibility-first design (ARIA labels, semantic HTML) - 🌐 Internationalization (i18n) support built-in - 🎨 Supports Bootstrap's utility classes - πŸ’‘ Well-typed component props --- Installation ------------ [](#installation) ### Requirements [](#requirements) - **Laravel**: 11.x (PHP 8.0+) - **PHP**: 8.0 or higher - **Bootstrap**: 5.x ### Steps [](#steps) 1. Install the package via Composer: ``` composer require bethuxs/blade-bootstrap-components ``` 2. The components are automatically registered. No need to publish! 3. Include the Bootstrap 5 assets in your application: ``` ``` --- Components ---------- [](#components) ### Form Components [](#form-components) #### `` [](#x-bsform) Main form wrapper with automatic CSRF and method handling. ``` ``` **Props:** - `method` (string, default: `"POST"`) - HTTP method - `route` (string) - Route name for action - `submit` (string) - Submit button text (optional) --- #### `` [](#x-bsforminput) Text input with label and error handling. ``` ``` **Props:** - `name` (required) - Input name attribute - `label` (string) - Label text - `value` (mixed) - Input value - `type` (string, default: `"text"`) - Input type - `placeholder` (string) - Placeholder text --- #### `` [](#x-bsformtextarea) Multi-line text input with customizable rows. ``` ``` **Props:** - `name` (required) - Textarea name - `label` (string) - Label text - `value` (mixed) - Textarea content - `rows` (int, default: `3`) - Number of rows --- #### ` ``` **Props:** - `label` (string) - Button text - `type` (string, default: `"button"`) - Button type - `contextual` (string, default: `"primary"`) - Bootstrap color (primary, success, danger, etc.) - `size` (string) - Size (sm, lg) --- #### ` ``` **Props:** - `name` (required) - Select name - `label` (string) - Label text - `options` (array, default: `[]`) - Options key => value - `placeholder` (string) - Placeholder option text - `value` (mixed) - Selected value --- #### ` ``` **Props:** - `name` (required) - Select name - `label` (string) - Label text - `useIso` (bool, default: `false`) - Use ISO code (true) or emoji (false) - `placeholder` (string, default: `__('Select a country')`) - `value` (mixed) - Selected value --- #### ` ``` **Props:** - `name` (required) - Checkbox name - `label` (string) - Checkbox label - `value` (mixed) - Checkbox value - `checked` (bool, default: `false`) - Is checked --- #### ` ``` **Props:** - `name` (required) - Radio name - `label` (string) - Radio label - `value` (mixed, required) - Radio value - `checked` (bool) - Is checked --- #### ` ``` **Props:** - `name` (required) - Group name (stored as array) - `label` (string) - Group label - `options` (array, default: `[]`) - Options key => value - `values` (array, default: `[]`) - Selected values - `inline` (bool, default: `false`) - Display inline --- #### ` ``` **Props:** - `name` (required) - Group name - `label` (string) - Group label - `options` (array, default: `[]`) - Options key => value - `value` (mixed) - Selected value - `inline` (bool, default: `false`) - Display inline --- #### ` ``` **Props:** - `name` (required) - File input name - `label` (string) - Input label - `accept` (string) - Accepted file types - `multiple` (bool, default: `false`) - Allow multiple files --- ### Message Components [](#message-components) #### ` Your changes have been saved. ``` **Props:** - `type` (string, default: `"info"`) - Alert type (success, danger, warning, info) - `title` (string) - Alert title - `dismissible` (bool, default: `true`) - Show close button --- #### ` New ``` **Props:** - `variant` (string, default: `"primary"`) - Badge color - `pill` (bool, default: `false`) - Rounded corners --- #### ` ``` **Props:** - `value` (int, default: `0`) - Current value - `max` (int, default: `100`) - Maximum value - `variant` (string, default: `"primary"`) - Color - `striped` (bool) - Striped pattern - `animated` (bool) - Animation effect - `label` (string) - Custom label --- #### ` ``` **Props:** - `type` (string, default: `"border"`) - Type (border, grow) - `size` (string) - Size (sm, lg) - `label` (string) - Accessibility label --- ### Navigation & Layout [](#navigation--layout) #### ` ``` **Props:** - `items` (array) - Breadcrumb items with label and optional url --- #### ` Are you sure? ``` **Props:** - `id` (required) - Modal ID - `title` (string) - Modal title - `size` (string) - Size (sm, lg, xl) - `centered` (bool) - Center modal vertically - `scrollable` (bool) - Scrollable content --- #### ` @foreach($users as $user) {{ $user->name }} {{ $user->email }} @endforeach ``` --- #### ` ``` **Props:** - `viewRoute` (string) - View link (optional) - `editRoute` (string) - Edit link (optional) - `deleteRoute` (string) - Delete form action (optional, shows confirmation) --- ### Layout Components [](#layout-components) #### ` Content goes here ``` **Props:** - `title` (string) - Card title - `subtitle` (string) - Card subtitle - `footer` (string) - Footer content --- #### ` ``` **Props:** - `items` (array, required) - Tab items with id, label, content, active --- #### ` ``` **Props:** - `items` (array, required) - Accordion items with title, content, id, open - `flush` (bool, default: `false`) - Remove borders --- #### ` Detailed content here ``` **Props:** - `title` (string) - Collapse header text - `id` (string) - Unique ID --- #### ` ``` **Props:** - `label` (string, required) - Button label - `items` (array) - Menu items with label, url, divider, header - `split` (bool) - Split dropdown button --- #### ` ``` **Props:** - `items` (array) - List items with label, url, badge, id, active - `flush` (bool) - Remove borders - `active` (string) - Active item id --- #### ` ``` **Props:** - `brand` (string) - Brand name - `brandUrl` (string, default: `"/"`) - Brand link - `items` (array) - Navigation items - `dark` (bool) - Dark theme - `active` (string) - Active item id --- #### ` ``` **Props:** - `paginator` (LengthAwarePaginator) - Laravel paginator instance --- #### ` Sidebar content ``` **Props:** - `id` (required) - Unique ID - `title` (string) - Sidebar title - `placement` (string, default: `"start"`) - Position (start, end, top, bottom) - `backdrop` (bool, default: `true`) - Hide on backdrop click --- #### ` Try adjusting your search terms ``` **Props:** - `title` (string) - Empty state title --- #### ` ``` **Props:** - `height` (string, default: `"100px"`) - Skeleton height - `count` (int, default: `3`) - Number of skeletons --- Helpers ------- [](#helpers) ### CountriesHelper [](#countrieshelper) Utility class for working with country data. ``` use Bethuxs\BladeBootstrapComponents\CountriesHelper; // Get all countries $countries = CountriesHelper::all(); // Get as select options (iso => name) $options = CountriesHelper::asOptions(); // Get as emoji options $emojiOptions = CountriesHelper::asEmojiOptions(); // Find by ISO code $country = CountriesHelper::findByIso('US'); // Find by emoji $country = CountriesHelper::findByEmoji('πŸ‡ΊπŸ‡Έ'); ``` --- Complete Form Example --------------------- [](#complete-form-example) ``` ``` --- Customization ------------- [](#customization) Components follow Bootstrap 5 conventions and accept standard HTML attributes through `$attributes`. You can override individual components by creating files in your app's `resources/views/components/` directory. --- Contributing ------------ [](#contributing) Contributions are welcome! Please submit pull requests to improve components and documentation. --- License ------- [](#license) This project is open-sourced software licensed under the [MIT license](LICENSE.md). --- Changelog --------- [](#changelog) ### v1.1.0 (Current) [](#v110-current) - ✨ Added Alert component - ✨ Added Modal component - ✨ Added Badge component - ✨ Added Progress component - ✨ Added Spinner component - ✨ Added Breadcrumb component - ✨ Added CountriesHelper utility class - πŸ› Fixed countries component key mapping - βœ… Added i18n support to all components - β™Ώ Improved accessibility (ARIA labels, semantic HTML) - πŸ“ Enhanced documentation --- Acknowledgments --------------- [](#acknowledgments) Built with ❀️ for the Laravel community. Special thanks to Bootstrap for the amazing CSS framework. ### Health Score 21 β€” LowBetter than 19% of packages Maintenance58 Moderate activity, may be stable Popularity6 Limited adoption so far Community7 Small or concentrated contributor base Maturity11 Early-stage or recently created project Bus Factor1 Top contributor holds 100% 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/25f561a3fd260935cc3ea5dc049b4ff598c37408dfdbbc129d091221de6c2954?d=identicon)[alb\_be](/maintainers/alb_be) --- Top Contributors [![bethuxs](https://avatars.githubusercontent.com/u/191869?v=4)](https://github.com/bethuxs "bethuxs (30 commits)") ### Embed Badge ![Health badge](/badges/bethuxs-blade-bootstrap-components/health.svg) ``` [![Health](https://phpackages.com/badges/bethuxs-blade-bootstrap-components/health.svg)](https://phpackages.com/packages/bethuxs-blade-bootstrap-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)[symfony/ux-icons Renders local and remote SVG icons in your Twig templates. 545.8M69](/packages/symfony-ux-icons) PHPackages Β© 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)