Rows & Columns
Last updated
Last updated
Inside Checkout Champ, Rows and Columns are the most basic building blocks. If starting on a blank canvas you will need to drag a Column element onto the builder before adding any other elements to your page. You will place all your elements inside a column or row. You’ll notice when you drag a column onto the page, it is always inside a row. This is so that if you want to add multiple columns, they will display horizontally in-line inside a row. If you don't want the vertical design of a column, simply delete the column and you can work within our rows.
Our rows and columns rely on the Bootstrap CSS framework, a set of styles which adds structure to the page. As such, new columns will be be dragged onto the page with the Bootstrap class "col". This is the base Bootstrap CSS column class signifying "auto" width and will be automatically adjusted based on the page layout and number of columns in the row.
The proper way to size columns is by using the Bootstrap Grid System and its associated classes, as explained below. You may manually adjust column widths, but that may have unintended consequences on the responsiveness of your design and is not recommended.
A feature of CSS heavily relied upon within the Bootstrap framework is the Flexbox attribute. Flexbox is a layout that provides a more efficient way to lay out, align and distribute space among items on a page, even when their size is unknown and/or dynamic (thus the word “flex”). Understanding CSS, and how the Bootstrap framework functions will help you design in Checkout Champ, but if you don’t know anything about CSS, don’t worry!
Checkout Champ has a Flex interface built into the Advanced Styles menu.
You can adjust the Flex settings by making selections from the available options.
Alternately, you could click one of the nine options available in the Flex graph. This graph is a visual way to set the same Flex settings. Clicking the graph options will change the Flex settings accordingly.
Example
Let’s say you want your page to have two columns. You want one to take up most of the screen, and then you want a narrower side-column. In mobile, however, you want the two columns to stack vertically. No problem!
You would use Bootstap column classes to set the proper layout. When looking at the classes assigned to each column, you will notice each column comes “fk-col” and "col". Similarly, each row uses “fk-row”. Both “fk-col” and “fk-row” are class names given to all our columns and rows in Checkout Champ. These classes automatically give each row and column the default style you see.
Using these default classes, Checkout Champ rows and columns are designed to automatically resize across screens sizes and stack on top of each other on smaller screens, like different mobile devices.
On the desktop view, click in the box to "Add class here". Type your new class. In this case, type “col-lg-8” and click "Enter". Flex styling operates on fractions of Twelve, so “col-lg-8” assigns the column to span 8 horizontal fractions of the viewable screen. That is Eight-Twelfths or 2/3 of the screen size on large (lg) devices leaving 1/3 for our second column. You will then add "col-12" to make the column span full-width, all 12 spots of the 12-spot grid, and stack on top of each other on smaller, mobile screens.
Now you would add “col-lg-4” and "col-12" to Column 2's classes and click "Enter".
Your two columns are now different widths on desktop and other large screens. On smaller screens, those same two columns will take up the full-width of the page, stacking on top of each other.
To manually edit the width of your column, first delete the "col" class from the column's Classes by clicking "X" icon next to the "col" class.
Then adjust the width in the Styles menu.
Using the Styles menu, you could move the width slider to the desired width or type a numerical width. Widths can be set in pixels or percentage. To resize on its own, you could also type "auto" (without the quotation marks) rather than specific numbers. Again, manual width adjustment is not the recommended approach as it can lead to unintended consequences across your page layout.
However, if you want uniform columns and rows across all devices, you’ll want to add and edit the Bootstrap column classes. These classes are explained in detail on the Bootstrap Grid System page. Please visit the following link to read more about the Bootstrap Grid System:
But you can also control exactly where columns stack on top of one another by specifying the col classes. Let’s say you want to adjust the layout. On large mobile devices you want the two columns to stack on each other vertically. On desktop you want the two columns side-by side, with the left-hand column larger than the right. This is where we can utilize the column sizing built into the Bootstrap Grid System. (See this page for reference - )
First, let's design for mobile views. (See our article on ).
The Bootstrap Grid Systems, and its associated classes, make responsive design a breeze. Rather than specifying pixel widths for all of your columns, you only need to set the appropriate Flex classes, 1-12. Your columns will resize in each row on their own, showing the columns at the desired width across screen sizes. Again, visit the to learn more about all you can do with Column Classes and Flex settings.
