PHPackages tombroucke/sage-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. [Utility & Helpers](/categories/utility) 4. / 5. tombroucke/sage-bootstrap-components ActiveLibrary[Utility & Helpers](/categories/utility) tombroucke/sage-bootstrap-components ==================================== Bootstrap 4 components for Sage 4.1.0(2y ago)113.1k↓50%11MITPHP Since May 31Pushed 2y ago1 watchersCompare [ Source](https://github.com/tombroucke/sage-bootstrap-components)[ Packagist](https://packagist.org/packages/tombroucke/sage-bootstrap-components)[ Docs](https://github.com/tombroucke/sage-bootstrap-components)[ RSS](/packages/tombroucke-sage-bootstrap-components/feed)WikiDiscussions master Synced 1mo ago READMEChangelogDependencies (2)Versions (19)Used By (1) Sage 10 Bootstrap 5 Components ============================== [](#sage-10-bootstrap-5-components) Easily use Bootstrap 5 components as Sage 10 components. If you need Bootstrap 4 components, use the 3.x release. Installation ------------ [](#installation) Install the composer package (in the theme folder). ``` composer require tombroucke/sage-bootstrap-components --dev ``` Remove defaults app/View/Components/Alert.php & resources/views/components/alert.blade.php Publish the components to app/View/Components and resources/views/components. ``` wp acorn vendor:publish --tag="Bootstrap components" ``` Usage ----- [](#usage) Examples: ### Accordion [](#accordion) An accordion needs some javascript: ``` import { Collapse } from 'bootstrap'; // eslint-disable-line no-unused-vars ``` ``` First item title First item content Second item title Second item content ``` ### Alert [](#alert) ``` A simple alert ``` ### Badge [](#badge) ``` A badge, displayed as a pill ``` ### Breadcrumb [](#breadcrumb) ``` Home News ``` ### Button [](#button) ``` Button label ``` ### Button group [](#button-group) ``` Button label 1 Button label 2 ``` ### Card [](#card) ``` @slot('header') Card header @endslot @slot('slot') Card body @endslot @slot('footer') Card footer @endslot ``` ### Checkbox [](#checkbox) ``` Checkbox label Switch label ``` ### Input group [](#input-group) ``` @slot('start') $ @endslot @slot('end') .00 @endslot ``` ### List group [](#list-group) ``` List item without link List item with link ``` ### Modal [](#modal) A modal needs some javascript: ``` import { Modal } from 'bootstrap'; // eslint-disable-line no-unused-vars ``` ``` Title Content Close Save changes Trigger modal ``` ### Offcanvas [](#offcanvas) An offcanvas element needs some javascript: ``` import { Offcanvas } from 'bootstrap'; // eslint-disable-line no-unused-vars ``` ``` @slot('header') Canvas header @endslot Canvas body Trigger offcanvas ``` ### Pagination [](#pagination) ``` 1 2 3 ``` ### Radio button [](#radio-button) ``` Radio label ``` ### Spinner [](#spinner) ``` ``` ### Table [](#table) ``` Foo Bar Foo Bar Foo Bar ``` ### Tabs [](#tabs) ``` {{-- Default type is tabs --}} Home Profile Contact Home content Profile content Contact content ``` ### Toast [](#toast) A toast needs some javascript: ``` import {Toast} from 'bootstrap'; const trigger = document.getElementById('js-trigger-toast-liveToast'); trigger.addEventListener('click', function(){ const el = new Toast(document.getElementById('liveToast')); el.show(); }); ``` ``` @slot('header') Toast header @endslot Hello, world! This is a toast message. Trigger toast ``` ### Health Score 37 — LowBetter than 83% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity26 Limited adoption so far Community16 Small or concentrated contributor base Maturity72 Established project with proven stability Bus Factor2 2 contributors hold 50%+ of commits 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. ### Release Activity Cadence Every ~143 days Recently: every ~250 days Total 18 Last Release 833d ago Major Versions 0.2.0 → 1.0.02018-01-22 1.1.1 → 2.0.02019-10-19 2.1.0 → 3.0.02021-05-11 3.0.1 → 4.0.02021-09-10 PHP version history (3 changes)0.0.1PHP ^7.0 0.0.3PHP >=5.6 2.0.0PHP >=7.1 ### Community Maintainers ![](https://www.gravatar.com/avatar/4178291ccf36e3530aa8a8845124c3af1b24c064739ad98ded5b9679a4316033?d=identicon)[tombroucke](/maintainers/tombroucke) --- Top Contributors [![ovanschie](https://avatars.githubusercontent.com/u/3015449?v=4)](https://github.com/ovanschie "ovanschie (28 commits)")[![tombroucke](https://avatars.githubusercontent.com/u/24292260?v=4)](https://github.com/tombroucke "tombroucke (24 commits)")[![gizburdt](https://avatars.githubusercontent.com/u/1470623?v=4)](https://github.com/gizburdt "gizburdt (6 commits)")[![303K](https://avatars.githubusercontent.com/u/3934941?v=4)](https://github.com/303K "303K (4 commits)")[![teuunn](https://avatars.githubusercontent.com/u/17406280?v=4)](https://github.com/teuunn "teuunn (4 commits)") --- Tags tombrouckesage-bootstrap-components ### Embed Badge ![Health badge](/badges/tombroucke-sage-bootstrap-components/health.svg) ``` [![Health](https://phpackages.com/badges/tombroucke-sage-bootstrap-components/health.svg)](https://phpackages.com/packages/tombroucke-sage-bootstrap-components) ``` ### Alternatives [supermundano/sage-the-events-calendar 1724.5k](/packages/supermundano-sage-the-events-calendar)[mwdelaney/sage-fonts-preload Automatically preload fonts from the Sage mix manifest 188.3k](/packages/mwdelaney-sage-fonts-preload) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)