There are a few shortcodes which will make your experience managing the content on this site much more enjoyable and fruitful.
Always wrap columns in a [row] shortcode.
The heart of any responsive site is its grid. This one is based on Bootstrap 3. And that’s because it is flexible, powerful, and awesome.
There are four breakpoint ranges:
0 <= xs < 768 768 <= sm < 992 993 <= md < 1170 1170 <= lg
For each of these ranges, you can indicate how many columns (out of twelve) a particular [col] shortcode should take up.
You do this simply, by adding an attribute like this: sm=8
These column widths cascade UPWARD.
[col xs=6] is the same as [col xs=6 sm=6 md=6 lg=6].
[col xs=6 md=4] is the same as [col xs=6 sm=6 md=4 lg=4].
And, lastly, the default is xs=12.
[col sm=6] is the same as [col xs=12 sm=6]
To move columns to the left or right a certain number of columns, potentially even visually swapping two columns, use:
sm-pull=4: to the left (doesn’t affect other columns placement)
sm-push=4: to the right (doesn’t affect other columns placement)
sm-offset=4: add columns to the left.
hidden-sm hide only in a certain range
visible-sm show only in a certain range
align=”center”, align=”right”, align=”left” specify the text alignment of a column/section.
In a full-width template, this will
1) provide a centered container for the provided content
2) allow you to optionally add a full-width background color and/or image.
Cool! Provide a custom background color and/or image by adding these attributes
Notes on Nesting
You may place any content you want, including further rows and columns, inside of a column. However, in these nested situations, you should use [_row], [_col], and then [__row],[__col] (for two deep).
You may place any content you want, including rows and columns, inside of a section.
[text xxs=12 sm=16 md=24]Your Custom Resizing Text Here[/text]
This allows you to specify a font-size (in pixels) for each grid range. These are the same as with the [col], with one addition for super-small devices.
0 <= xxs < 480 480 <= xs < 768 768 <= sm < 992 993 <= md < 1170 1170 <= lg
The max font-size is 70px.
Simple as can be. [gap] and then an arbitrary number of pixels you want the gap to be. If this number is negative, it will produce a negative margin, moving the content below toward the content above.
Add a size: small, large
Add a color: green, pink, blue
Add a link: http://google.com
[button large pink http://test.com/#mylink ]Button Text[/button]
[button small green http://google.com]Submit[/button]
Add custom classes, to integrate with custom css: class=”my-class”