PHPackages johannessteu/bootstrap-gridsystem - 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. johannessteu/bootstrap-gridsystem ActiveNeos-package[Utility & Helpers](/categories/utility) johannessteu/bootstrap-gridsystem ================================= Neos CMS package to wrap bootstraps grid system 3.0.0(10y ago)31.7k31GPL-3.0+PHP Since Nov 18Pushed 9y ago1 watchersCompare [ Source](https://github.com/johannessteu/JohannesSteu.Bootstrap.GridSystem)[ Packagist](https://packagist.org/packages/johannessteu/bootstrap-gridsystem)[ RSS](/packages/johannessteu-bootstrap-gridsystem/feed)WikiDiscussions master Synced today READMEChangelog (2)Dependencies (1)Versions (10)Used By (1) JohannesSteu.Bootstrap.GridSystem ================================= [](#johannessteubootstrapgridsystem) This packages provides some new NodeTypes to add versatile grid system. All default class names are made for usage with bootstrap (). This package does not provide any CSS. You can you use your custom stylesheets or include the bootstrap CSS within your site package. It's also possible to configure all class names to you needs. With this package you will get this NodeTypes **Predefined grids (with layout options):** - 2 Columns (50/50; 25/75; 75/25; 33/66; 66/33; 20/80; 80/20) - 3 Columns (33/33/33; 25/50/25) - 4 Columns (25/25/25/25) Those NodeTypes will provide a basic grid system. Each grid has several layout-options. **Some more NodeTypes to create custom grids:** - Container (fixed or fluid width) - Row - Grid Installation ------------ [](#installation) Install it via composer. There are currently older versions available. For the latest version use >3.0.0 The 1.2 branch is made for Neos 1.2 and includes the custom grid functionality. Version 1.0 is made vor Neos >= 1.1 3.0 is tested with Neos >= 2.1 ``` composer require johannessteu/bootstrap-gridsystem ``` or just copy this package in YOUR\_ROOT/Plugins/JohannesSteu.Bootstrap.GridSystem Afterwards the Root.ts2 will be auto-included in your main TypoScript. Otherwise use ``` include: resource://JohannesSteu.Bootstrap.GridSystem/Private/TypoScript/Root.ts2 ``` in your Root.ts2. Inside your Template you need to load some stylesheets. If you go for bootstrap this you can do so with ``` ``` inside your head-Section if there is the `TYPO3.Twitter.Bootstrap package` installed. Usage ----- [](#usage) To use this plugin just create a new ContentElement inside your page and choose one of the new types. The Inspector-Pane will give you access to all different layouts and settings. In Neos 1.2 and higher you will notice a new tab with some options as well. Breakpoints ----------- [](#breakpoints) You can configure all breakpoints for all predefined columns. If you are not familiar which classes are used to configure the breakpoints check this out: . To Override the default breakpoints you just have to override the settings in your Site's Settings.yaml. Make sure that this package is not required after your Sites package. Best practice would be to require this plugin inside your Sites composer.json If you e.g. would like to break the 50-50 layout also at size xs in a 50-50 layout you have to add this in Packages/Sites/YourVendor.SiteKey/Configuration/Settings.yaml ``` JohannesSteu: Bootstrap: GridSystem: Layouts: '50-50': 'col-1': 'col-xs-6' 'col-2': 'col-xs-6' '25-50-25': 'col-1': 'col col-xs-12 col-sm-3' 'col-2': 'col col-xs-12 col-sm-6' 'col-3': 'col col-xs-12 col-sm-3' '25-25-25-25': 'col-1': 'col col-xs-12 col-sm-3' 'col-2': 'col col-xs-12 col-sm-3' 'col-3': 'col col-xs-12 col-sm-3' 'col-4': 'col col-xs-12 col-sm-3' ``` Custom Grids ------------ [](#custom-grids) To create custom grids first you add a new "Custom row". In this row you can add multiple nodes of type `Column`. For each Column you can set: - size XS to LG - visiblity - hidden - offset sm-lg - ordering pull sm-lg - ordering push sm-lg ### Health Score 34 — LowBetter than 77% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity21 Limited adoption so far Community11 Small or concentrated contributor base Maturity69 Established project with proven stability 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 ~67 days Recently: every ~96 days Total 9 Last Release 3650d ago Major Versions 1.2.5 → 2.0.02016-01-25 2.1.x-dev → 3.0.02016-05-11 ### Community Maintainers ![](https://avatars.githubusercontent.com/u/769789?v=4)[Johannes Steu](/maintainers/johannessteu)[@johannessteu](https://github.com/johannessteu) --- Top Contributors [![johannessteu](https://avatars.githubusercontent.com/u/769789?v=4)](https://github.com/johannessteu "johannessteu (108 commits)") --- Tags custom-gridsflowframeworkneoscmsnodetypes ### Embed Badge ![Health badge](/badges/johannessteu-bootstrap-gridsystem/health.svg) ``` [![Health](https://phpackages.com/badges/johannessteu-bootstrap-gridsystem/health.svg)](https://phpackages.com/packages/johannessteu-bootstrap-gridsystem) ``` ### Alternatives [shipmonk/name-collision-detector Simple tool to find ambiguous classes or any other name duplicates within your project. 362.1M34](/packages/shipmonk-name-collision-detector)[bostondv/bootstrap-ninja-forms Adds Bootstrap classes to Ninja Forms 222.2k](/packages/bostondv-bootstrap-ninja-forms) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)