PHPackages                             dnafactory/module-bootstrap - 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. [Framework](/categories/framework)
4. /
5. dnafactory/module-bootstrap

ActiveMagento2-module[Framework](/categories/framework)

dnafactory/module-bootstrap
===========================

Magento 2 Bootstrap source integration

0.1.16(3y ago)42.0k↓33.3%1[1 issues](https://github.com/dnafactory/magento2-bootstrap/issues)1BSD-3-ClauseSCSSPHP ^7.1|^8.1

Since Dec 3Pushed 2y ago3 watchersCompare

[ Source](https://github.com/dnafactory/magento2-bootstrap)[ Packagist](https://packagist.org/packages/dnafactory/module-bootstrap)[ RSS](/packages/dnafactory-module-bootstrap/feed)WikiDiscussions master Synced 3w ago

READMEChangelog (8)Dependencies (2)Versions (12)Used By (1)

Bootstrap source integration for Magento 2
------------------------------------------

[](#bootstrap-source-integration-for-magento-2)

[![License](https://camo.githubusercontent.com/d76db1401f48ce3b2726e4b38612edb14e8db366c02a2ddddf4d05f7c8c04fb2/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c6963656e73652d425344253230332d2d436c617573652d626c75652e7376673f7374796c653d666f722d7468652d6261646765)](https://opensource.org/licenses/BSD-3-Clause)[![Magento](https://camo.githubusercontent.com/ced6e633ac5017aa0fb6caf2c5d859de2c8af5090c60b40179d7f6e429c28bca/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f426f6f7473747261702d76342e352e332d626c756576696f6c65742e7376673f6c6f676f3d626f6f74737472617026267374796c653d666f722d7468652d6261646765)](https://github.com/twbs/bootstrap)
=======================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================

[](#)

This Magento 2 module provides a full integration of [Bootstrap 4](https://getbootstrap.com/) 's sources.

**This is not a porting!**

It uses [dnafactory/module-scss](https://github.com/dnafactory/magento2-module-scss) to integrate the official [Bootstrap 4 package](https://github.com/twbs/bootstrap)so it can be built with your Magento 2 theme configuration.

---

### Installation

[](#installation)

The extension must be installed via composer:

```
composer require dnafactory/module-bootstrap
php bin/magento module:enable DNAFactory_Bootstrap
php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy
```

### How to use CSS

[](#how-to-use-css)

By default, the extension will deploy a *DNAFactory\_Bootstrap/css/bootstrap.css* build based on all Magento .less lib values defined in your active theme. So, if you want to change some theme specific style as can be the primary color, you can do it by simply editing *@theme\_\_color\_\_primary* in your **css/sources/\_theme.less** file, as usual.

However, you can change these values or add other custom variables using one or more of the extension points provided:

- **source/scss/themes/\_extends.scss** where you can put your custom scss vars and other useful stuff, which we will cover later in this document.
- **source/scss/\_extends.scss** where you can put Bootstrap-specific customizations in scss
- **source/scss/\_extend.scss** module related extension file, for small customizations.

#### Well, what if I'm working on a custom theme?

[](#well-what-if-im-working-on-a-custom-theme)

Just put your .less theme variables file reference in **source/scss/themes/\_extends.scss**:

```
// @vars_import 'source/my_marvellous_theme/_variables.less';
```

or, when your variables file is stored in a theme-level directory (most common case):

```
//@vars_import (lib) 'relative_path_to_theme_base_css_dir/_variables.less'
```

For example, using

```
//@vars_import (lib) '../../_variables.less'
```

from **view/frontend/web/css/source/scss/themes/\_magento.scss**, it will point to **YourVendor/YourTheme/your\_locale/css/source**.

Refer to [dnafactory/module-scss's doc](https://github.com/dnafactory/magento2-module-scss), for more info about the *@vars\_import* directive.

### How to use JS

[](#how-to-use-js)

Bootstrap js plugins are designed to run on demand and they can be requested using these aliases:

- bs.alert
- bs.button
- bs.carousel
- bs.collapse
- bs.dropdown
- bs.modal
- bs.popover
- bs.scrollspy
- bs.tab
- bs.toast
- bs.tooltip

Simply add the required plugin to your module's dependencies.

### Note for Developers

[](#note-for-developers)

To update one or more dependencies (as Bootstrap or popper.js) to the latest one, just use npm as needed and then run:

```
npm run update-src
```

*Happy Coding*

###  Health Score

30

—

LowBetter than 62% of packages

Maintenance15

Infrequent updates — may be unmaintained

Popularity23

Limited adoption so far

Community13

Small or concentrated contributor base

Maturity59

Maturing project, gaining track record

 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.

###  Release Activity

Cadence

Every ~84 days

Recently: every ~103 days

Total

10

Last Release

1272d ago

PHP version history (2 changes)0.1.1PHP ~7.1|~7.2

0.1.15PHP ^7.1|^8.1

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/65351006?v=4)[DNAFactory](/maintainers/dnafactory)[@dnafactory](https://github.com/dnafactory)

![](https://avatars.githubusercontent.com/u/5919607?v=4)[Ciro Arcadio](/maintainers/ciroarcadio)[@ciroarcadio](https://github.com/ciroarcadio)

---

Top Contributors

[![ciroarcadio](https://avatars.githubusercontent.com/u/5919607?v=4)](https://github.com/ciroarcadio "ciroarcadio (12 commits)")

---

Tags

bootstrapmagento2

### Embed Badge

![Health badge](/badges/dnafactory-module-bootstrap/health.svg)

```
[![Health](https://phpackages.com/badges/dnafactory-module-bootstrap/health.svg)](https://phpackages.com/packages/dnafactory-module-bootstrap)
```

###  Alternatives

[yiisoft/yii2-bootstrap

The Twitter Bootstrap extension for the Yii framework

19720.0M1.0k](/packages/yiisoft-yii2-bootstrap)[friendsofcake/bootstrap-ui

Bootstrap front-end framework support for CakePHP

3502.1M38](/packages/friendsofcake-bootstrap-ui)[yiisoft/yii2-bootstrap4

The Twitter Bootstrap extension for the Yii framework

2173.4M189](/packages/yiisoft-yii2-bootstrap4)[magewirephp/magewire

A framework that makes building reactive and dynamic interfaces simple in Magento 2

2601.4M38](/packages/magewirephp-magewire)[clevertech/yii-booster

Widget toolkit for Yii 1.1 framework

541246.7k3](/packages/clevertech-yii-booster)[slywalker/boost_cake

BoostCake is a plugin for CakePHP using Bootstrap

277516.5k1](/packages/slywalker-boost-cake)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)