We strive to make all the row and column styles work in conjunction with each other, so take this into consideration when creating new ones.

All the below styles can be applied on top each other as they are very specif styles with only one function that do not override another. 

Animations

None

By default, Umbraco will automatically add the fade in animation setting when the column setting cog is clicked. This is fallback in case the client forgets to add it, so the sites animation style remains consistent.

There is an option to revert the setting back to "None" which will remove the animation.

Fade in

The fade in effect activates on the front-end when the element is within the viewport. This gives the effect of elements fading in as the user scrolls down the page.

Fade in left

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Fade in right

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Fade in top

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Fade in bottom

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Backgrounds

Default

Backgrounds can be applied to both the row and column in their settings.

By default the background will resize to fit the available space and position it self within the center.

Theme black

Backgrounds and themes work in conjunction with each other as the theme colour will semi-transparently overlay the background image.

Theme grey

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Theme orange

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Clickable panels

Content area widths

Default

The default content area width is defined by Bootstrap's grid system.

Full width

The full width content area width is also defined by Bootstrap's grid system.

Applying this style will span the content area across the full width of the available space. In this case, the content area will span across the full width of the viewport.

As this style is applied to the row settings, any available grid can span across the full width of the viewport.

Content placement

Default

The content placement styles define the starting position of the content within the column.

The default placement of the content is at top of the column. The corresponding class will not get injected into the HTML.

Middle

The content placement styles only work when the column also has a specific size or consistent height applied.

Bottom

The styles use flexbox which is not supported on Internet Explorer 9.

Internet Explorer also needs a height applied to the column. This is automatically applied using Javascript.

Consistent height

The consistent height style applies a consistent height between 2 or more columns.

Within Umbraco the content editor has the option to add 3 different variations of columns with consistent heights.

To apply the style, assign 2 or more columns the same consistent height value.

Javascript will then detect all the columns with the same consistent height value, detect the column with the largest height and apply the same height to the smaller columns.

The Javascript then re-fires if the viewport width changes.

Hidden elements

Default

The hidden style defines if the panel is hidden on specific devices.

By default the column is visible on all devices.

Decrease the viewport to see the style in action.

Hidden phone

This column will be hidden on viewports smaller than 767px in width.

Hidden desktop

This column will be hidden on viewports larger than 768px in width.

Predefined padding

None

The padding style adds a predefined padding around the whole of the column.

By default, no padding is added to the column.

Padding small

The padding-small style applies the smallest amount of padding to the column in comparison to the other padding styles.

Padding medium

The padding-medium style applies the middle amount of padding to the column in comparison to the other padding styles.

This is the most commonly used padding style.

Padding large

The padding-large style applies the largest amount of padding to the column in comparison to the other padding styles.

Predefined sizes

Size square

The square size applies a consistent height and width to the column.

The square size position absolutes the content, so be considerate with the amount of content the column houses as this may overflow.

Recommendations

It's recommend to only use this style in a grid of 2 or more columns otherwise a single column becomes very large at desktop. Also do not use this size when the row has the full width style applied as again, the column(s) becomes very large on desktop.

Potential issues

By default the grid columns do not get applied until the large tablet break point, so the square size is very large on small tablet. Decrease the viewport size to the small tablet to see an example of this issue.

Size medium

The size medium applies a predefined minimum height to the column.

The height of the column will increase if the content is larger than the predefined height. This removes the issue of overflowing content.

Recommendations

It's recommend to use this style in conjunction with a background image to display more of the image.

Size large

The size large applies a predefined minimum height to the column.

The height of the column will increase if the content is larger than the predefined height. This removes the issue of overflowing content.

It's recommend to use this style in conjunction with a background image to display more of the image.

Predefined spacing

None

By default, Umbraco will automatically add the spacing-bottom style when the rows setting cog is clicked. This is a fallback in case the client forgets to add it, so the sites spacing style remains consistent.

There is an option to revert the setting back to "None" which will remove all the spacing from the row.

Spacing

The spacing style can be applied to the top, bottom or both parts of the row.

The amount of spacing applied is consistent with the spacing between the columns defined by Bootstrap.

When applying spacing to a multiple of rows, try to keep to the consistent convention of applying the spacing to the bottom of the row.

The spacing-bottom style is applied to this row.

Spacing large

The spacing large does exactly the same as the spacing medium style but with an increased predefined minimum height.

Its recommend to use this style in conjunction with a background image to display more of the image.

Prominent heading

Drop shadow

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo