.. _bootstrap3/grid: ======================= Bootstrap 3 Grid system ======================= In order to take full advantage of **djangocms-cascade**, you should be familiar with the concepts of the `Bootstrap Grid System`_, since all other Bootstrap components depend upon. .. _Bootstrap Grid System: http://getbootstrap.com/css/#grid Bootstrap Container =================== A **Container** is the outermost component the Bootstrap framework knows of. Here the designer can specify the breakpoints of a web page. By default, Bootstrap offers 4 breakpoints: “large”, “medium”, “small” and “tiny”. These determine for which kind of screen widths, the grid system may switch the layout. The editor window for a Container element offers the possibility to deactivate certain breakpoints. While this might make sense under certain conditions, it is safe to always keep all four breakpoints active, since this gives the designer of the web page the maximum flexibility. |edit-container| .. |edit-container| image:: /_static/edit-container.png Small devices exclusively ------------------------- If the web page shall be optimized just for small but not for large devices, then disable the breakpoints for **Large** and/or **Medium**. In the project's style-sheets, the maximum width of the container element then must be reduced to that chosen breakpoint: .. code-block:: css @media(min-width: 1200px) { .container { max-width: 970px; } } or, if you prefers the SASS syntax: .. code-block:: guess @media(min-width: $screen-lg) { .container { max-width: $container-desktop; } } Large devices exclusively ------------------------- If the web page shall be optimized just for large but not for small devices, then disable the breakpoints for **Tiny** and/or **Small**. Changing the style-sheets then is not required for this configuration setting. Fluid Container --------------- A variant of the normal Bootstrap Container is the Fluid Container. It can be enabled by a checkbox in the editors window. Fluid Containers have no hards breakpoints, they adopt their width to whatever the browser pretends and are slightly larger than their non-fluid counterpart. A fluid container makes it impossible to determine the maximum width of responsive images for the *large media breakpoint*, because it is applied whenever the browser width extends 1200 pixels, but there is no upper limit. For responsive images in the smaller breakpoints (“tiny”, “small” and “medium”) we use the width of the next larger breakpoint, but for images in the “large” media breakpoints we somehow must specify an arbitrary maximum width. The default width is set to 1980 pixels, but can be changed, to say 2500 pixels, using the following configuration in your ``settings.py``: .. code-block:: python CMSPLUGIN_CASCADE = { ... 'bootstrap3': ( ('xs', (768, 'mobile', _("mobile phones"), 750, 768)), ('sm', (768, 'tablet', _("tablets"), 750, 992)), ('md', (992, 'laptop', _("laptops"), 970, 1200)), ('lg', (1200, 'desktop', _("large desktops"), 1170, 2500)), ), } .. note:: Fluid container are specially useful for Hero images, full-width Carousels and the Jumbotron plugin. When required, add a free standing fluid container to the placeholder and as it's only child, use the picture or carousel plugin. Its content then is stretched to the browser's full width. Bootstrap Row ============= Each Bootstrap Container may contain one or more Bootstrap Rows. A row does not accept any configuration setting. However, while editing, one can specify the number of columns. When adding or changing a row, then this number of columns are added if its value exceeds the current number of columns. Reducing the number of columns does not delete any of them; they must explicitly be chosen from the context menu in structure view. |edit-row| .. |edit-row| image:: /_static/edit-row.png Horizontal Rule =============== A horizontal rule is used to separate rows optically from each other. |rule-editor| .. |rule-editor| image:: /_static/rule-editor.png Column ====== In the column editor, one can specify the width, the offset and the visibility of each column. These values can be set for each of the four breakpoints (*tiny*, *small*, *medium* and *large*), as specified by the Container plugin. At the beginning this may feel rather complicate, but consider that **Bootstrap 3 is mobile first**, therefore all column settings, *first* are applied to the narrow breakpoints, which *later* can be overridden for larger breakpoints at a later stage. This is the reason why this editor starts with the *column widths* and *column offsets* for tiny rather than for large displays. |edit-column| .. |edit-column| image:: /_static/edit-column.png .. note:: If the current column is member of a container which disables some of its breakpoints (*large*, *medium*, *small* or *tiny*), then that column editor shows up only with the input fields for the enabled breakpoints. Complete DOM Structure ====================== After having added a container with different rows and columns, you may add the leaf plugins. These hold the actual content, such as text and images. |structure-container| .. |structure-container| image:: /_static/structure-container.png By pressing the button **Publish changes**, the single blocks are regrouped and displayed using the Bootstrap's grid system. Adding Plugins into a hard coded grid ===================================== Sometimes the given Django template already defines a Bootstrap Container, or Row inside a Container element. Example: .. code-block:: html