Skip to main content

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.


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

Extra-small devices
Small devices
Middle-sized devices
Big devices
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.


[col class="col-sm-3"]The first column  has width of 25%[/col]
[col class="col-sm-3"]The second row also has a width of 25%[/col]
[col class="col-sm-6"]The third column has a width of 50%[/col]

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


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).

All classes can be completely mixed individually.

Was this article helpful?

1 Star2 Stars3 Stars4 Stars5 Stars
(No Ratings Yet)

Keine Kommentare vorhanden

You have a question or an opinion about this post? Share it with us!

Your email address will not be published. Required fields are marked *