b2evolution includes some default CSS classes that can be applied to various Widgets and/or Short Tags in order to easily control some display aspects.

If these are not sufficient, you can also add your own classes.

For widgets

• children-widgets-inline can be used on an "Embed Sub-Container" widget so that embedded widgets <div>s display inline instead of blocks.
• widget-no-border can be used on an individual widget in order to hide border, for example, in the sidebar containers.
• alternate-left-right see: https://skins.b2evolution.net/tabs-bootstrap-home#alternating-images-in-the-secondary-area

For images

• raised will add a drop shadow on the image to make it look raised.
• noshadow remove the shadow in case there is one by default.
• border will add a 1 pixel dark grey border around the image.
• noborder will remove the border in case there is one by default.
• squared will make the corners square in case they were rounded by default.
• rounded will round the corners (4px radius)
• round will make the image round instead of square (radius 50%). Can be useful for logos, portraits, etc…

For [div:.class]

• alternate-left-right can be used to alternate teaser images of content blocks left & right like this:

  [div:.alternate-left-right]
  [include:block1:.clearfix]
  [include:block2:.clearfix]
  [include:block3:.clearfix]
  [include:block4:.clearfix]
  [/div]

Bootstrap CSS classes

Most b2evolution skins are based on Bootstrap and therefore make the default Bootstrap CSS classes and components available.

The following may be especially useful:

Buttons

• btn
• btn-default, btn-primary, btn-success, btn-info, btn-warning, btn-danger, btn-link
• btn-lg, btn-sm, btn-xs
• btn-block
• active, disabled

Images

• img-rounded, img-circle, img-thumbnail
• pull-left, pull-right (and clearfix on the parent)

Text

• text-muted, text-primary, text-success, text-info, text-warning, text-danger
• center-block
• label
• label-default, label-primary, label-success, label-info, label-warning, label-danger
• badge

For divs / [div:.class] ; can also apply to [include:...]

• clearfix to avoid that floating images go beyond the end of the div
• bg-primary, bg-success, bg-info, bg-warning, bg-danger
• jumbotron
• alert
  • alert-success, alert-info, alert-warning, alert-danger
• panel
  • panel-primary, panel-success, panel-info, panel-warning, panel-danger
  • panel-heading, panel-title, panel-body, panel-footer
• well
  • well-lg, well-sm