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.

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-BehaviourContinuously horizontalInitially minimized, above breakpoints horizontal
Container-WidthContainer-Width750px970px1170px
Class-Pefix.col-xs-.col-sm-.col-md-.col-lg-
Column number12
Column widthauto~62px~81px~97px
Padding width30px (15px on any side of a column)
Nestableja
Abrückungja
Column orderingja

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

Code

[row]
[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]
[/row]

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

Attribute

NameContentMeaning
classcol-sm-3Via this value you can define the width of the container.
col-sm-offset-3Via the prefix offset you can define paddings. With col-sm-offset-3 this container starts, for example, after the third column.
col-sm-push-3With 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

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 *

*
*

Choose your currency:

Close
Converted prices are for reference only - all orders are charged in € Euro (€) EUR.
  • USDUS Dollar ($)
  • EUREuro (€)
  • GBPPfund Sterling (£)
  • AUDAustralische Dollar ($)
  • BRLBrasilianischer Real (R$)
  • CADKanadischer Dollar ($)
  • CZKTschechische Krone
  • DKKDänische Krone
  • HKDHongkong Dollar ($)
  • HUFUngarischer Forint
  • ILSIsraelischer Schekel (₪)
  • JPYJapanischer Yen (¥)
  • MYRMalaysischer Ringgits
  • MXNMexikanischer Peso ($)
  • NZDNeuseeland Dollar ($)
  • NOKNorwegische Krone
  • PHPPhilipinischer Pesos
  • PLNPolnischer Zloty
  • SGDSingapur Dollar ($)
  • SEKSchwedische Krone
  • CHFSchweizer Franken
  • TWDTaiwan New Dollar
  • THBThai Baht (฿)
  • INRIndische Rupie (₹)
  • TRYTürkische Lira (₺)
  • RUBRussischer Rubel