Columns

The main Theme Layout is built using Bootstrap's 12 Column Grid; however, our internal columns uses a different format. Hint: After your last colum set, you should include the [clear] shortcode to "clear" any floats.

[one_third][one_third]

[one_third][one_third]

[one_third last][one_third]

[two_third][two_third]

[one_third last][one_third]

[one_fourth][one_fourth]

[one_fourth][one_fourth]

[one_fourth][one_fourth]

[one_fourth last][one_fourth]

[one_half][one_half]

[one_fourth][one_fourth]

[one_fourth last][one_fourth]

[one_fifth][one_fifth]

[one_fifth][one_fifth]

[one_fifth][one_fifth]

[one_fifth][one_fifth]

[one_fifth last][one_fifth]

[two_fifth][two_fifth]

[three_fifth last][three_fifth]

[one_sixth][one_sixth]

[one_sixth][one_sixth]

[one_sixth][one_sixth]

[one_sixth][one_sixth]

[one_sixth][one_sixth]

[one_sixth last][one_sixth]

Bootstrap Columns

With v1.5.6 of Sweetness, we've incorporated Bootstraps columns within the shortcode API. The way it works is that a set of columns, called a row, must be wrapped in [row] shortcode. Then the inner columns are built using the [column] shortcode.

Basic syntax

[row]
[column size="1/2" stack="sm"]...[/column]
[column size="1/2" stack="sm"]...[/column]
[/row]

What is important is that the total number of columns must equal to 1. In the example above 1/2 + 1/2 equals one or 1/1.

In addition to the size option, stack represents when the columns will collapse based on the screen width. If you need a complex stack layout based on screen sizes, pull, push, etc, size can be omitted, in this case you would apply the grid classes to the class option for the [column] shortcode.

Row Options

Column Options