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.


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


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.

War dieser Artikel hilfreich?

1 Star2 Stars3 Stars4 Stars5 Stars
(No Ratings Yet)

Keine Kommentare vorhanden

Du hast eine Frage oder eine Meinung zum Artikel? Teile sie mit uns!

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *