Rows and Columns

Basics

Bootstrap's grid system is responsive, and the columns will re-arrange depending on the screen size: On a big screen it might look better with the content organised in three columns, but on a small screen it would be better if the content items were stacked on top of each other. (Also see Page Structures).

When a page displays on a smaller screen firstly the rows are displayed in order, as you might expect. Within each row the columns are then stacked from their sequence left to right on top of each other as well. (There are other stacking possibilities but the method and use is beyond what is needed here)

Inserting Rows/Columns

The Page Editor has a button that will insert the correct code for any column combination that you want. The "Insert PyroBootstraps" button gives you a selection dialog to achieve the insertion.

Firstly you must choose if you want a row structure to enclose the columns.  Usually, you will require the row element, but if you are creating a column structure within another page structure, and the columns just form layout within that, you can choose Columns only.

Next, you can specify a gap (in pixels) under the row.  As a guide on these pages, the row height for normal text is about 22 pixels.

Finally, you give a comma separated list of column combinations.  This list, must, of course, total 12 but in any combination you want. 

Changing column combinations.

Unfortunately, there is no "one step" way to change a column width sequence.  It can be achieved however by changing the number of combined columns each container/column is using.  You must always remember that the total combination of columns has to be 12 when you have completed any change. You start by clicking into the start of the first element contained in the DIV that you will see in grey when the "Show Blocks" button is in effect. Now click again with the right mouse button, then select "Edit Div".

 

 

In the first image the cursor was placed to the left of the word Basics, which is a Heading level 3 within the Div element.  The right click there produced the context menu from which the Edit Div was selected.  Next the "Create Div Container" pop up dialog appears.  In that you will see the Stylesheet Classes entry "col-md-3".  This means that the column defined here is a combination of 3 of the 12 columns available.  Simply change the number at the end of that class name.

When you do this the display of columns in the editor may change dramatically.  If you increase the 3 column combination to 4 or more, then the total column combinations will become more than 12.  The display will then split the columns making them harder to understand the layout.  Therefore it is usually simpler to first change a column that will have a reduced number of column combinations.  That way the total stays below 12 and the display will still approximately reflect the layout you are trying to achieve.

 

Next:

Images