---json
{
    "canonical": ":dynamic:grid",
    "page_id": "3alfs88i3fkg9vwxl4ftl"
}
---

====== The Dynamic Grid System has been deprecated ======


===== About =====
The ''dynamic grid'' system is the ability to change dynamically the [[#grid size|grid size]] to a ''16 columns'' grid.


<badge>Since [[release:release|version 1.2]]</badge>

<note important>
Deprecated in Bootstrap 5 because they have introduced a new [[docs:styling:breakpoint|xxl]] breakpoint
</note>

===== Configuration =====

==== Grid size ====

<note>
This is a configuration that should be used only for Bootstrap 4. In Bootstrap 5, they have introduced a new [[docs:styling:breakpoint#bootstrap_5|bigger breakpoint called xxl]] that makes this configuration obsolete.
</note>

The default grid system of [[docs:theme:bootstrap|bootstrap]] is based on ''12 columns'' and does not really allow any space for a [[release:deprecated:sidekick_slot|second sidebar]]

''strap'' supports a ''16 columns'' grid.

To change the grid size, set the following [[docs:app:configuration|configuration]]:
  * The ''gridColumns'' number to ''16''.
  * The [[:howto:stylesheet-bootstrap|Stylesheet]] to ''bootstrap.16col.min.css''

<note important>
=== Be careful ===
''Strap'' is not controlling this values. If you choose a 16 grid with a bootstrap stylesheet of 12 columns, you may got unwanted behavior.
</note>

<note info>
=== For the geek ===
The 16 columns stylesheet set:
  *  the xl breakpoint from ''1200px'' to ''1280px''.
  * the [[docs:theme:element:container|container]] max width for the xl breakpoint from ''1140px'' to ''1280px''.
See [[docs:styling:breakpoint]]
</note>