PHPackages                             dft/silverstripe-bootstrap-4 - 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. dft/silverstripe-bootstrap-4

ActiveSilverstripe-theme

dft/silverstripe-bootstrap-4
============================

A simple SilverStripe theme built on bootstrap 4

1.5.1(1y ago)6242↓100%1[4 PRs](https://github.com/Dean-Forest-Tech/silverstripe-bootstrap-4/pulls)BSD-3-ClauseSchemeCI passing

Since Jan 17Pushed 1y ago5 watchersCompare

[ Source](https://github.com/Dean-Forest-Tech/silverstripe-bootstrap-4)[ Packagist](https://packagist.org/packages/dft/silverstripe-bootstrap-4)[ Docs](https://github.com/Dean-Forest-Tech/silverstripe-bootstrap-4)[ RSS](/packages/dft-silverstripe-bootstrap-4/feed)WikiDiscussions 1 Synced today

READMEChangelogDependencies (2)Versions (38)Used By (0)

Silverstripe Bootstrap4 Theme
=============================

[](#silverstripe-bootstrap4-theme)

A simple SilverStripe theme built using Bootstrap 4 and webpack and styled similarly to the default `silverstripe/simple-theme`.

Apperance
---------

[](#apperance)

[![Theme Preview](./theme-ss4-bootstrap4.png)](./theme-ss4-bootstrap4.png)

Install
-------

[](#install)

Install via composer:

```
# composer require "ilateral/silverstripe-bootstrap-4"

```

Featured Images
---------------

[](#featured-images)

All page templates support `$FeaturedImage` by default (to act as a hero image/banner).

You can either add a `FeaturedImage` to your page, or rely on a module, such as `i-lateral/silverstripe-featuredimage`

Banner Images / Titles
----------------------

[](#banner-images--titles)

This theme loads the title, breadcrumbs and any featured images into a `Banner` include. This means you can breakout and style the banner seperatly to the main site `Layout`

You can also make the banner span the full width of the site by adding `FullWidthBanner` to true in your Pages or Controllers, eg:

```
class PageController extends ContentController
{
    public function getFullWidthBanner()
    {
        return true;
    }
}
```

Page `Layout`
-------------

[](#page-layout)

As more complex websites need more sophisticated markup, the `$Layout` variable is broken out into a seperate include (called from `Page.ss` master template).

This allows the layout to be overwritten and altered without having to make changes to the core `Page.ss`master template (which allows for a slightly smoother upgrade path)

Webpack
-------

[](#webpack)

Core CSS/JS is transpiled and minified via webpack and all bootstrap classes are injected into the webpack bundle.

If you want to make use of webpack you will need to install [Yarn](https://yarnpkg.com/getting-started)

### Edit This Theme Directly

[](#edit-this-theme-directly)

If you are not using version control (eg: git) or have added this theme to your project's repo directly work with this theme. First navigate to the theme directory:

```
# cd /path/to/my/project/themes/bootstrap

```

Now install dependencies:

```
# yarn install

```

This will add `node_modules` to your theme and you can transpile dependencies using webpack:

```
# yarn dev
# yarn build

```

### Using a Sub Theme

[](#using-a-sub-theme)

As of SilverStripe 4 you can use a sub theme to extend this theme, and you can use webpack to include SCSS/JS from this theme in your own custom theme.

**Step 1: Create your theme**Start off creating a theme with this structure (you can copy package.json and webpack.\*.js out of the parent theme):

```
/themes/custom
    - src
        - javascript
            - script.js
        - scss
            - _variables.scss
            - mystyles.scss
            - bundle.scss
            - editor.scss
    - package.json
    - webpack.common.js
    - webpack.dev.js
    - webpack.prod.js

```

**Step 2: Install dependencies**As above, you must run the following:

```
# cd /path/to/project/themes/custom
# yarn install

```

**Step 3: Setup your Bundle and/or Editor**In `bundle.scss` you can import you own variable overwrites, and custom styles and bring them inline with the parent theme's by adding something like this:

`themes/custom/src/scss/bundle.scss`

```
@import "../../node_modules/bootstrap/scss/functions";

@import "global/fonts";
@import "global/variables";

/**
 * Parent theme includes. Enable, re-name as required
 * to custom parent theme
 */
//@import '../../../[THEME]/src/scss/global/variables';

@import "../../node_modules/bootstrap/scss/variables";

/**
 * Import core bootstrap modules (only two provided as an example)
 */
@import "../../node_modules/bootstrap/scss/mixins";
@import "../../node_modules/bootstrap/scss/root";

/**
 * Parent theme imports (enable, re-name as required)
 */
@import '../../../[PARENTTHEME]/src/scss/global/typography';
@import '../../../[PARENTTHEME]/src/scss/global/global';
@import '../../../[PARENTTHEME]/src/scss/global/header';
@import '../../../[PARENTTHEME]/src/scss/global/body';
@import '../../../[PARENTTHEME]/src/scss/global/footer';
@import '../../../[PARENTTHEME]/src/scss/global/misc';
@import '../../../[PARENTTHEME]/src/scss/layout/homepage';

/**
 * Import custom styles
 */
@import "mystyles.scss";
```

**NOTE You may want to also add something similar to toyr `editor.scss`**

**Step 4 (optional): Add JS**If you need to add custom Javascript, you can either add it to your theme's `script.js` or add additional JS files.

**Step 4: Check Webpack Config**The theme's webpack config wil be used to transpile and minify all the SCSS/JS.

For the most part, you shouldn't need to change this, but if you add new JS files or make more complex changes you might need to update mappings

**Step 5: Run a build**Once everything is ready, you can transpile and minify your CSS/JS. You can do this via:

```
# yarn dev

```

OR

```
# yarn build

```

`yarn dev` is quick, performs less checks and doesn't minify, good for development.

`yarn build` performs linting and also minifies compiled code.

###  Health Score

42

↑

FairBetter than 90% of packages

Maintenance45

Moderate activity, may be stable

Popularity20

Limited adoption so far

Community13

Small or concentrated contributor base

Maturity75

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 ~76 days

Recently: every ~215 days

Total

34

Last Release

480d ago

Major Versions

0.5.3 → 1.0.02018-06-20

### Community

Maintainers

![](https://www.gravatar.com/avatar/c7d4998767cb41bf0048a65158559384fbab33751b26c996d6367019c68c4f8b?d=identicon)[DFT](/maintainers/DFT)

---

Top Contributors

[![mlewis-everley](https://avatars.githubusercontent.com/u/687143?v=4)](https://github.com/mlewis-everley "mlewis-everley (75 commits)")[![Makreig](https://avatars.githubusercontent.com/u/6011781?v=4)](https://github.com/Makreig "Makreig (49 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (28 commits)")

---

Tags

bootstrap4silverstripesilverstripe-4themesilverstripethemebootstrap4

### Embed Badge

![Health badge](/badges/dft-silverstripe-bootstrap-4/health.svg)

```
[![Health](https://phpackages.com/badges/dft-silverstripe-bootstrap-4/health.svg)](https://phpackages.com/packages/dft-silverstripe-bootstrap-4)
```

###  Alternatives

[silverstripe-themes/simple

The SilverStripe simple theme (default SilverStripe 3 theme)

411.3M8](/packages/silverstripe-themes-simple)

PHPackages © 2026

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