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. [Templating & Views](/categories/templating) 4. / 5. dft/silverstripe-bootstrap-4 ActiveSilverstripe-theme[Templating & Views](/categories/templating) dft/silverstripe-bootstrap-4 ============================ A simple SilverStripe theme built on bootstrap 4 1.5.1(1y ago)62751[4 PRs](https://github.com/Dean-Forest-Tech/silverstripe-bootstrap-4/pulls)1BSD-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 1w ago READMEChangelogDependencies (2)Versions (38)Used By (1) 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 40 — FairBetter than 86% of packages Maintenance37 Infrequent updates — may be unmaintained Popularity20 Limited adoption so far Community16 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 616d 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 [helsingborg-stad/municipio A bootstrap theme for creating municipality sites. 4028.6k10](/packages/helsingborg-stad-municipio)[pressbooks/pressbooks Pressbooks is an open source book publishing tool built on a WordPress multisite platform. Pressbooks outputs books in multiple formats, including PDF, EPUB, web, and a variety of XML flavours, using a theming/templating system, driven by CSS. 45844.8k1](/packages/pressbooks-pressbooks)[silverstripe-themes/simple The SilverStripe simple theme (default SilverStripe 3 theme) 401.3M8](/packages/silverstripe-themes-simple)[pressbooks/pressbooks-book This theme is named after Canadian media theorist Marshall McLuhan, who coined the phrase “the medium is the message.” It is designed for academic writing and is also suitable for fiction. Headings are set in Cormorant Garamond, and body type is set in Lora. 226.7k](/packages/pressbooks-pressbooks-book) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)