PHPackages hk2/addbootstrap5 - 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. hk2/addbootstrap5 ActiveMagento2-module[Utility & Helpers](/categories/utility) hk2/addbootstrap5 ================= Magento 2 extension that enables administrators to load Bootstrap 4 or Bootstrap 5 on the storefront without modifying theme files or creating child themes. v3.0.0(1mo ago)17941OSL-3.0PHPPHP ^8.1 || ^8.2 || ^8.3 || ^8.4CI passing Since Jun 15Pushed 3w ago2 watchersCompare [ Source](https://github.com/basantmandal/magento2-bootstrap5-module)[ Packagist](https://packagist.org/packages/hk2/addbootstrap5)[ RSS](/packages/hk2-addbootstrap5/feed)WikiDiscussions main Synced 3d ago READMEChangelog (7)Dependencies (5)Versions (12)Used By (0) [![Version](https://camo.githubusercontent.com/ea9ef426d7257249967444fc38f23d854e483b614a19030e12feb17fa0bb5ff5/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f76657273696f6e2d312e302e302d626c75653f7374796c653d666c61742d737175617265)](https://camo.githubusercontent.com/ea9ef426d7257249967444fc38f23d854e483b614a19030e12feb17fa0bb5ff5/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f76657273696f6e2d312e302e302d626c75653f7374796c653d666c61742d737175617265)[![Magento](https://camo.githubusercontent.com/cc7afc3a994043bd5e1bbe18fdecdf4377481f03e2dc7a05728c3174c7da66bf/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4d6167656e746f2d322e342e782d6639373331363f7374796c653d666c61742d737175617265266c6f676f3d6d6167656e746f266c6f676f436f6c6f723d7768697465)](https://camo.githubusercontent.com/cc7afc3a994043bd5e1bbe18fdecdf4377481f03e2dc7a05728c3174c7da66bf/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4d6167656e746f2d322e342e782d6639373331363f7374796c653d666c61742d737175617265266c6f676f3d6d6167656e746f266c6f676f436f6c6f723d7768697465)[![PHP](https://camo.githubusercontent.com/2f2d39f30d9a245b748ead3268e5de0819ddab6c31a393904a4f33652b504e79/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5048502d382e322532422d3763336165643f7374796c653d666c61742d737175617265266c6f676f3d706870266c6f676f436f6c6f723d7768697465)](https://camo.githubusercontent.com/2f2d39f30d9a245b748ead3268e5de0819ddab6c31a393904a4f33652b504e79/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5048502d382e322532422d3763336165643f7374796c653d666c61742d737175617265266c6f676f3d706870266c6f676f436f6c6f723d7768697465)[![License](https://camo.githubusercontent.com/a3fd2257982f64afbde00a66a8ab5984ee3f6e176f00eb2ec4ea61d862bc113b/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4f534c2d2d332e302d677265656e3f7374796c653d666c61742d737175617265)](https://camo.githubusercontent.com/a3fd2257982f64afbde00a66a8ab5984ee3f6e176f00eb2ec4ea61d862bc113b/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4f534c2d2d332e302d677265656e3f7374796c653d666c61742d737175617265)[![Packagist](https://camo.githubusercontent.com/05ba2b590ba75c0c6fb444afd7c2cc4bda684a7c8a0e14537cb54734cfc9c214/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f686b322f616464626f6f747374726170353f7374796c653d666c61742d737175617265)](https://packagist.org/packages/hk2/addbootstrap5) [![Website](https://camo.githubusercontent.com/48510337f411c7e193a31e9bdb6802d49664918dac999471dcc705c9a94fa031/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f576562736974652d3030303f7374796c653d666c61742d737175617265266c6f676f3d6b6f2d6669266c6f676f436f6c6f723d7768697465)](https://www.basantmandal.in/)[![LinkedIn](https://camo.githubusercontent.com/f47f622117d99af4d0fcba939449e0949d2301d48601b78a25b6e7e1cf580d3e/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c696e6b6564496e2d3041363643323f7374796c653d666c61742d737175617265266c6f676f3d6c696e6b6564696e266c6f676f436f6c6f723d7768697465)](https://www.linkedin.com/in/basantmandal/)[![Email](https://camo.githubusercontent.com/4fb7fe62859d942d68ae2f48af7c8fb6165e8f1dc236fa5bbc970e01efff28ef/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f456d61696c2d737570706f7274253430626173616e746d616e64616c2e696e2d626c75653f7374796c653d666c61742d737175617265266c6f676f3d676d61696c)](mailto:support@basantmandal.in) HK2 AddBootstrap5 - Load Bootstrap 4/5 on Magento 2 Storefront ============================================================== [](#hk2-addbootstrap5---load-bootstrap-45-on-magento-2-storefront) **HK2\_AddBootstrap5** enables administrators to load Bootstrap 4 or Bootstrap 5 CSS and JavaScript on the Magento 2 storefront from the jsDelivr CDN without modifying theme files or creating child themes. --- Overview -------- [](#overview) HK2\_AddBootstrap5 is a Magento 2 extension that injects Bootstrap CSS and JavaScript into the `after.body.start` container on all frontend pages. CSS is loaded synchronously via `Magento\Framework\View\Page\Config::addRemotePageAsset()`, while the JavaScript bundle is injected asynchronously after `window.load` with a RequireJS AMD conflict workaround. The module supports seven Bootstrap versions across the 4.x and 5.x release lines, includes a debug mode for troubleshooting, and provides a built-in demo page to verify correct loading. --- Problem Statement ----------------- [](#problem-statement) Adding Bootstrap to a Magento 2 storefront traditionally requires: - Creating or modifying a child theme to include Bootstrap CSS/JS in `default_head_blocks.xml` or a theme `requirejs-config.js`. - Manually managing CDN URLs and version updates across environments. - Handling the well-known RequireJS AMD / Bootstrap jQuery conflict where Bootstrap's UMD module definition interferes with Magento's AMD loader. - Repeating the same work for every project or when switching themes. Without a module-based solution, store owners and developers must either hardcode CDN references into theme files or allocate development time to child theme creation and maintenance. --- Solution Approach ----------------- [](#solution-approach) HK2\_AddBootstrap5 solves these problems through a declarative, configuration-driven approach: 1. **Layout-based injection** via `default.xml` -- the BootstrapAssets block is added to the `after.body.start` container across all frontend pages, with no theme file modifications required. 2. **Admin configuration** -- Bootstrap version (4/5), CDN provider, and debug mode are managed through the Magento admin panel at Stores > Configuration > HK2 > Add Bootstrap5. 3. **Safe JS loading** -- Bootstrap's JavaScript bundle is loaded asynchronously after `window.load`, with a temporary `define.amd = false` workaround that prevents RequireJS from intercepting Bootstrap's AMD-compatible UMD wrapper. AMD mode is restored on script `onload`. 4. **CDN flexibility** -- CSS loads via `addRemotePageAsset()` for standard Magento asset management. The CDN provider model is extensible (future providers planned), and CSP whitelisting covers jsDelivr, cdnjs, and unpkg domains. --- Alternatives Considered ----------------------- [](#alternatives-considered) AlternativeLimitationManual child theme modificationRequires developer effort per project; version updates need code changes; no admin UIComposer-based Bootstrap packageAdds node\_modules/build step overhead; conflicting Bootstrap versions across modulesCopying Bootstrap files to `pub/static`Bypasses CDN performance benefits; manual cache managementMagento UI library (Less)Bootstrap 5 dropped Less support; requires migration to SCSS; no JS components--- Who is this for? ---------------- [](#who-is-this-for) - **Magento 2 store owners** who want Bootstrap-powered frontend without hiring a developer for theme work. - **Frontend developers** who need Bootstrap available globally on the storefront without child theme overhead. - **Agencies** deploying Magento stores who want a repeatable, configurable Bootstrap integration across client projects. - **Theme builders** who want to decouple Bootstrap loading from theme logic. --- Use Cases --------- [](#use-cases) Use CaseDescription**Quick Bootstrap integration**Enable the module in admin, select a version, and Bootstrap loads on every page. No theme files touched.**Version switching**Switch between Bootstrap 4.6.2 and 5.3.8 at any time via the admin dropdown -- instantly propagate the change across the entire storefront.**Debugging CDN issues**Enable debug mode to print the loaded Bootstrap version and CDN provider to the browser console.**Demo / testing**Visit `/addbootstrap5/demo` to verify Bootstrap is loading correctly with a showcase of alerts, cards, forms, accordions, and grid components.--- Key Features ------------ [](#key-features) - **CDN-based loading** -- Bootstrap CSS and JS are served from the jsDelivr CDN (`cdn.jsdelivr.net`), ensuring fast, globally distributed delivery with no local asset compilation. - **Version selection (4.x / 5.x)** -- Choose from 7 supported versions: 4.4.1, 4.5.3, 4.6.2, 5.0.2, 5.1.3, 5.2.3, 5.3.8. - **No theme modification required** -- Assets are injected via layout XML, not theme files. Works with any Magento 2 theme out of the box. - **Debug mode** -- When enabled, writes the active Bootstrap version and CDN provider to the browser console via `bootstrap-debug.js`. - **Demo page** -- A built-in reference page at `/addbootstrap5/demo` demonstrates Bootstrap components (alerts, buttons, cards, forms, accordions, grid) for both v4 and v5. - **RequireJS AMD conflict workaround** -- Bootstrap's UMD module definition is temporarily disabled during load to prevent interference with Magento's AMD loader. - **CSP whitelisting** -- Pre-configured `csp_whitelist.xml` covers jsDelivr, cdnjs, and unpkg for both `script-src` and `style-src` policies. - **i18n support** -- Translation files for English (`en_US`), Hindi (`hi_IN`), and Russian (`ru_RU`). --- Architecture Overview --------------------- [](#architecture-overview) ``` HK2_AddBootstrap5 (this module) │ ├── Block/ │ └── Bootstrap/ │ └── BootstrapAssets.php ← Block that adds CSS via PageConfig + renders JS template │ ├── Controller/ │ └── Demo/ │ └── Index.php ← Frontend route /addbootstrap5/demo │ ├── Model/ │ └── Config/ │ ├── BootstrapVersion.php ← Source model for version dropdown │ └── CdnProvider.php ← Source model for CDN provider dropdown │ ├── view/ │ └── frontend/ │ ├── layout/ │ │ ├── default.xml ← Injects BootstrapAssets into after.body.start │ │ └── addbootstrap5_demo_index.xml ← Demo page layout │ ├── templates/ │ │ ├── bootstrap/ │ │ │ └── include.phtml ← AMD-safe async JS loading + debug init │ │ └── demo/ │ │ └── index.phtml ← Demo page markup (alerts, cards, forms, etc.) │ └── web/ │ └── js/ │ └── bootstrap-debug.js ← Console logger (version + CDN) │ ├── etc/ │ ├── module.xml ← Sequences on HK2_Core, Magento_Backend, Config, Store │ ├── config.xml ← Default config (enabled, v5.3.8, jsDelivr) │ ├── csp_whitelist.xml ← CSP hosts for CDN resources │ ├── acl.xml ← ACL resource for admin settings │ ├── adminhtml/ │ │ ├── system.xml ← Configuration fields under HK2 tab │ │ ├── menu.xml ← Menu item under System > HK2 │ │ └── routes.xml ← Admin route registration │ └── frontend/ │ └── routes.xml ← Frontend route for demo page │ ├── i18n/ │ ├── en_US.csv │ ├── hi_IN.csv │ └── ru_RU.csv │ └── registration.php ← Magento component registration ``` ### Asset Loading Flow [](#asset-loading-flow) ``` 1. Request -> Magento layout loads default.xml 2. BootstrapAssets block (_prepareLayout) checks if module is enabled 3. If enabled: adds CSS via PageConfig::addRemotePageAsset() -> https://cdn.jsdelivr.net/npm/bootstrap@{version}/dist/css/bootstrap.min.css 4. Block renders include.phtml template in after.body.start 5. Template outputs an inline that waits for window.load 6. On load: temporarily sets define.amd = false, appends JS to body -> https://cdn.jsdelivr.net/npm/bootstrap@{version}/dist/js/bootstrap.bundle.min.js 7. On script load: restores original define.amd value 8. If debug enabled: x-magento-init loads bootstrap-debug.js -> console.log ``` --- System Requirements ------------------- [](#system-requirements) ### Supported Magento Versions [](#supported-magento-versions) - Magento **2.4.x** (Open Source / Commerce / Cloud) - `magento/framework` **^103.0.0** ### Supported PHP Versions [](#supported-php-versions) PHP VersionCompatibility8.1Fully supported8.2Fully supported8.3Fully supported8.4Fully supported### Supported Bootstrap Versions [](#supported-bootstrap-versions) BootstrapVersions4.x4.4.1, 4.5.3, 4.6.25.x5.0.2, 5.1.3, 5.2.3, 5.3.8### Platform [](#platform) - Magento 2 instance (any edition) running on a standard LAMP/LEMP stack - Composer 2.x for installation ### Dependencies [](#dependencies) - **hk2/core** ^1.0 -- Provides the shared HK2 admin tab, menu parent, and module header block. - **magento/framework** ^103.0.0 -- Core Magento framework. --- Installation ------------ [](#installation) ### Composer [](#composer) ``` composer require hk2/addbootstrap5 ``` ### Magento CLI [](#magento-cli) ``` bin/magento module:enable HK2_AddBootstrap5 bin/magento setup:upgrade bin/magento setup:di:compile bin/magento cache:flush ``` ### Verification [](#verification) 1. Log in to the Magento admin panel. 2. Navigate to **Stores > Settings > Configuration > HK2 > Add Bootstrap5**. 3. Confirm the "Enable Extension" field is set to **Yes** (default). 4. Visit any storefront page and inspect the HTML `` -- you should see a `` to `cdn.jsdelivr.net/npm/bootstrap@{version}/dist/css/bootstrap.min.css`. 5. Visit `/addbootstrap5/demo` -- the demo page should render with full Bootstrap styling. See [docs/installation.md](docs/installation.md) for detailed steps and troubleshooting. --- Configuration ------------- [](#configuration) ### Admin Panel Path [](#admin-panel-path) **Stores > Settings > Configuration > HK2 > Add Bootstrap5** ### Fields [](#fields) FieldConfig PathTypeDefaultDescriptionEnable Extension`hk2_addbootstrap5_enable`Yes/NoYesEnable or disable Bootstrap loading on the storefrontSelect Bootstrap Version`hk2_addBootstrap5_select_bootstrap_version`Select5.3.8Choose from 7 Bootstrap versions (4.4.1, 4.5.3, 4.6.2, 5.0.2, 5.1.3, 5.2.3, 5.3.8)Select CDN Provider`hk2_addbootstrap5_select_cdn`SelectjsDelivrCurrently supports jsDelivr; cdnjs and unpkg are prepared for future expansionEnable Debug Mode`hk2_addbootstrap5_debug`Yes/NoNoWhen enabled, logs the active Bootstrap version and CDN provider to the browser console### Menu Path [](#menu-path) **System > HK2 > Add Bootstrap 5** --- Demo Pages ---------- [](#demo-pages) The module ships with a built-in demo page for quick verification: VersionURLBootstrap 5 (default)`/addbootstrap5/demo`Bootstrap 4`/addbootstrap5/demo?version=4`The demo page showcases: - Alerts (primary, success, danger) - Striped table - Accordion component (v4 card-based, v5 accordion-based) - Button variants (primary through dark) - 3-column grid system - Cards with headers and body content - Form elements (email, password, select, checkbox) --- Content Security Policy (CSP) ----------------------------- [](#content-security-policy-csp) The module ships with a pre-configured `etc/csp_whitelist.xml` that whitelists the following hosts: PolicyHostPurpose`script-src``cdn.jsdelivr.net`Bootstrap JS bundle`script-src``cdnjs.cloudflare.com`Prepared for future CDN expansion`script-src``unpkg.com`Prepared for future CDN expansion`style-src``cdn.jsdelivr.net`Bootstrap CSS`style-src``cdnjs.cloudflare.com`Prepared for future CDN expansion`style-src``unpkg.com`Prepared for future CDN expansion`img-src``www.basantmandal.in`Author website imagesThese whitelist entries are automatically applied when Magento's CSP module is enabled. No manual CSP configuration is required. --- Privacy & GDPR ------------------ [](#privacy--gdpr) - **No data collection** -- HK2\_AddBootstrap5 does not collect, store, or transmit any personal data. - **No cookies** -- The module sets no cookies, session data, or tracking mechanisms. - **No third-party analytics** -- The CDN-hosted Bootstrap files are pure CSS/JS assets; they contain no tracking, analytics, or telemetry. - **No user data processing** -- The module executes no observers, plugins, or scheduled tasks that handle customer or admin personally identifiable information (PII). - **External CDN requests** -- When the module is enabled, the browser makes requests to `cdn.jsdelivr.net` to fetch Bootstrap files. These are standard static asset requests. The jsDelivr CDN is a public open-source CDN; see [jsDelivr privacy policy](https://www.jsdelivr.com/terms/privacy-policy) for details on their data handling. --- Documentation ------------- [](#documentation) DocumentDescription[Installation Guide](docs/installation.md)Composer installation, Magento CLI commands, and verification[Usage Guide](docs/usage.md)Complete walkthrough of admin configuration, demo pages, and debug mode[Compatibility Matrix](docs/compatibility.md)Supported Magento, PHP, and Bootstrap versions[CHANGELOG](CHANGELOG.md)Version history and release notes[SECURITY](SECURITY.md)Vulnerability reporting and disclosure policy--- Known Limitations ----------------- [](#known-limitations) - **Single CDN provider** -- The CDN provider dropdown currently offers jsDelivr only. cdnjs and unpkg are whitelisted in the CSP and present in the source model structure, but the module has not yet implemented the provider selection logic to switch CDN URLs. This is planned for a future release. - **Global scope, no per-page toggle** -- When enabled, Bootstrap loads on every frontend page. There is no per-page, per-route, or per-category toggle to selectively disable Bootstrap on specific pages. - **No store-scope override** -- Configuration fields are scoped to Default (`showInStore="0"`, `showInWebsite="0"`). Multi-store instances cannot configure different Bootstrap versions or enable/disable the module per store view or website. - **Bootstrap jQuery dependency** -- Bootstrap 4 relies on jQuery for its JavaScript components. Magento 2 ships with jQuery by default, so this is not a practical limitation, but store owners on Bootstrap 4 should be aware that `bootstrap.bundle.min.js` includes Popper.js but not jQuery. --- Contributing ------------ [](#contributing) Contributions are welcome! Please follow these guidelines: 1. **Bug reports** -- Open a GitHub issue with a clear description, reproduction steps, and environment details. 2. **Pull requests** -- Fork the repository, create a feature branch, and submit a PR against `main`. Ensure commits follow [Conventional Commits](https://www.conventionalcommits.org/) (`feat:`, `fix:`, `docs:`, etc.). 3. **Code style** -- Run `./vendor/bin/phpcs --standard=phpcs.xml .` before submitting. This module follows the Magento 2 coding standard with PSR12. 4. **No test infrastructure** -- This module currently has no test suite (no `phpunit.xml`, no `tests/` directory). If you add tests, please ensure they pass. By contributing, you agree that your contributions will be licensed under the OSL-3.0 license. --- License ------- [](#license) **Open Software License (OSL 3.0)** Copyright (c) 2023-2026 Basant Mandal (Hash Tag Kitto) (HK2) This software is licensed under the Open Software License version 3.0. A copy of the license is included in [`LICENSE.txt`](LICENSE.txt). The AFL-3.0 license also applies as a secondary license for specific distribution channels (e.g., Magento Marketplace). For details, see the full license text. --- Disclaimer ---------- [](#disclaimer) This software is provided "as is", without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose, and non-infringement. In no event shall the authors or copyright holders be liable for any claim, damages, or other liability, whether in an action of contract, tort, or otherwise, arising from, out of, or in connection with the software or the use or other dealings in the software. The logo, branding, and trademark "HK2" and "Hash Tag Kitto" are the property of Basant Mandal. This module is not affiliated with, endorsed by, or sponsored by Adobe Inc. or any of its subsidiaries. ### Health Score 53 — FairBetter than 96% of packages Maintenance93 Actively maintained with recent releases Popularity20 Limited adoption so far Community11 Small or concentrated contributor base Maturity72 Established project with proven stability Bus Factor1 Top contributor holds 98.2% 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. ### Release Activity Cadence Every ~160 days Recently: every ~3 days Total 10 Last Release 41d ago Major Versions 1.0.0 → 2.0.02023-08-09 2.1.0 → 3.1.12026-05-11 PHP version history (3 changes)1.0.0PHP ^7.3.0|^7.4.0|^8.0|^8.1.0 2.0.0PHP ^7.3.0|^7.4.0|^8.0|^8.1.0|^8.2.0 3.1.1PHP ^8.1 || ^8.2 || ^8.3 || ^8.4 ### Community Maintainers ![](https://www.gravatar.com/avatar/ffa270f1557c4c55c55fec1ad6f2544170980c8dd7f679c10582a3736f7d3a4c?d=identicon)[basantmandal](/maintainers/basantmandal) --- Top Contributors [![basantmandal](https://avatars.githubusercontent.com/u/69835601?v=4)](https://github.com/basantmandal "basantmandal (54 commits)")[![semantic-release-bot](https://avatars.githubusercontent.com/u/32174276?v=4)](https://github.com/semantic-release-bot "semantic-release-bot (1 commits)") --- Tags bootstrapbootstrap5hk2magento2magento2-extension-freemagento2-module-freemagento2bootstrap5bootstrap4HK2magento moduleaddbootstrap5Basant Mandal ### Embed Badge ![Health badge](/badges/hk2-addbootstrap5/health.svg) ``` [![Health](https://phpackages.com/badges/hk2-addbootstrap5/health.svg)](https://phpackages.com/packages/hk2-addbootstrap5) ``` ### Alternatives [magepal/magento2-googletagmanager Google Tag Manager (GTM) for Magento 2 with Advance Data Layer 2691.6M5](/packages/magepal-magento2-googletagmanager)[run-as-root/magento2-prometheus-exporter Magento2 Prometheus Exporter 68357.9k](/packages/run-as-root-magento2-prometheus-exporter)[magepal/magento2-reindex Reindex your Magento2 store quickly and easily from backend/admin, instead of command line. 111705.0k1](/packages/magepal-magento2-reindex)[myparcelnl/magento A Magento 2 module that creates MyParcel labels 1860.2k](/packages/myparcelnl-magento)[smile/module-store-locator Smile Store Locator 50533.0k5](/packages/smile-module-store-locator)[angeo/module-llms-txt Magento 2 module for AI Engine Optimization (AEO). Generates spec-compliant llms.txt and llms-full.txt per llmstxt.org standard, plus streaming JSONL for vector indexing. Multi-store, multi-website, CLI, cron, async admin UI, Page Builder-aware sanitization, customer-group pricing, atomic writes, ETag/Cache-Control, .md mirrors. 111.1k](/packages/angeo-module-llms-txt) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)