You are here :   Home » Display grid
    Print this page...

Display grid

Displaying boxes on a page :


The integration of Bootstrap in GuppY modifies the way to position the boxes on a page, no more question of percentage, now it will be columns!

The grid is composed of columns (.col) and rows (.row), a maximum of 12 columns in a row, and fully responsive. In no case can you exceed 12 in width but you are not obliged to use all 12 columns.
 

With a few screenshots, it will be more understandable:

bootstrap_grille_large.jpg
Here is a line of the Bootstrap grid with its 12 columns


Let's now look at the concrete application for box positioning and display on a GuppY 6 page, starting at the top of the page:

boxes_at_the_top_en.jpg
The positioning of the boxes at the top


Note: A novelty "Empty free box", this empty box is used to center the middle box or is used to keep a selected box in its place.
          Not all the lines are 12, but none of them protrude!



Let's go now to the Home page, you go to Admin/Config/Home/Blog :

boxes_in_home_page_en.jpg

The positioning of the boxes on the home page


Important:  For the demo base, we have chosen the option "without side boxes", this allows us to have the whole width, that is 12 columns,
                    If you have a side column, it will be 3 columns used, 2 side columns it will be 6 columns used, you will have 9 or 6 columns left,

The width of a side column is 3 columns and cannot be changed!

Without forgetting the Blog part, you select the boxes of the blog on the left or on the right according to your choice.
 

For the central part:

if you use a side column, you have a maximum of 9 columns for the central boxes,
if you use two side columns, you have a maximum of 6 columns for the central boxes,
if you do not use side columns, you have all 12 columns.

It's up to you to choose the layout of the boxes that suits you for the presentation of your site.

The central boxes above and below are the same width as the main box.

middle_section.jpg
The positioning of the boxes for the central part
 

Reminder: The width of a side column is 3 columns and cannot be changed!


The boxes at the bottom of the page to finish:

Always the same principle with 12 columns per row, to be used all or in part.

boxes_at_the_bottom.jpg
The positioning of the boxes at the bottom


On the second row, we use a 9-column slot and a 3-column slot,

On the third row are placed four places of 3 columns, with a customization to air the whole and you have the bottom part of this skin.


In summary:

On a line, you can never exceed 12 columns, whether at the top, in the middle or at the bottom, the side columns are fixed to 3 columns.
Now you can move on to the configuration of the pages of your site !!!


 


Creation date : 06/07/2020 @ 16:23
Category : Display - Demos
Page read 2969 times