Grid (Dokumentation » Shortcodes)

The grid system was mentioned earlier. You can find an extensive explanation here.

For any questions you can use our support-forum. If necessary, we will expand on this topic.

Within a page or a post you can use this grid-system via a shortcode, in order to, for example, display two text-areas side by side.

Gridoptions

Before we start with the actual shortcode, here again a little explanation of the grid-system.

	Extra-small devices Smartphones (<768px)	Small devices Tablets (≥768px)	Middle-sized devices Desktop-PCs (≥992px)	Big devices Desktop-PCs (≥1200px)
Grid-Behaviour	Continuously horizontal	Initially minimized, above breakpoints horizontal
Container-Width	Container-Width	750px	970px	1170px
Class-Pefix	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
Column number	12
Column width	auto	~62px	~81px	~97px
Padding width	30px (15px on any side of a column)
Nestable	ja
Abrückung	ja
Column ordering	ja

Note: In our example we work with the prefix „col-sm-3”. Obviously this value has to be adjusted to the desired size.

Code

[pastacode lang=”php” manual=”%26%2391%3Brow%26%2393%3B%0A%26%2391%3Bcol%20class%3D%22col-sm-3%22%26%2393%3BThe%20first%20column%20%20has%20width%20of%2025%25%26%2391%3B%2Fcol%26%2393%3B%0A%26%2391%3Bcol%20class%3D%22col-sm-3%22%26%2393%3BThe%20second%20row%20also%20has%20a%20width%20of%2025%25%26%2391%3B%2Fcol%26%2393%3B%0A%26%2391%3Bcol%20class%3D%22col-sm-6%22%26%2393%3BThe%20third%20column%20has%20a%20width%20of%2050%25%26%2391%3B%2Fcol%26%2393%3B%0A%26%2391%3B%2Frow%26%2393%3B” message=”” highlight=”” provider=”manual”/]

IMPORTANT: Around the listing of the individual col-tags, there always has to be a row-shortcode.

Attribute

Name	Content	Meaning
class	col-sm-3	Via this value you can define the width of the container.
	col-sm-offset-3	Via the prefix offset you can define paddings. With col-sm-offset-3 this container starts, for example, after the third column.
	col-sm-push-3	With the help of push and pull you can move columns to the left/right, or rearrange them. By doing this you can, for example, display the sidebar on the left on a desktop device and still load it in on a smartphone after the content (effectively on the right).
	col-sm-pull-3