The container is the area that a widget is contained in. While the styles for your website was developed as it was created, the container allows for additional customization of individual widgets. These settings can have unexpected results site wide so we recommend only administrators and those with knowledge in CSS changing these settings.


The fields that can be filled out and their descriptions are listed below;

  • Custom Class Name - If you need to target the container with a custom style you would enter the class name into this field.
  • Background Color - Apply a predefined background color to the container. The options that are available are the following; None, Primary, Secondary, Tertiary, Accent, Info, Gray, Dark and Light.
  • Background Image - To place an image in the background of a container you would customize the settings located here. This section lets you to choose an image, the size of the image with Background size (cover or contain), if the background should repeat with Background repeat (default is NO Repeat) and finally Background position (default is top, left) which will set the position of the image.
  • Border - This section of the Container settings allows you to customize the border of the container. The options for Border width are none which is the default, small, medium, large and extra large. Below that is Border color which has the following options; None, Primary, Secondary, Tertiary, Accent, Info, Gray, Dark and Light and Style. Finally you can choose the Border Style with the following settings available; none (default), dashed, dotted, solid, double, ridge, inset and outset. For additional control of the borders check Advanced container border style control, this allows you to set the styes for each of the container's sides.
  • Padding - Padding is the amount of white space on all sides of the inside the container's border and can be customized in this section. The options available are; extra small, small, medium, large and extra large. To customize the padding for each side of the container check Advanced container padding control.
  • Margin - This allows you to set the size of the white space on all sides of the outside of the border of the container. The following options are available; extra small, small, medium, large and extra large. To have more control of the margins check Advanced container margin control, this allows you to set the margins for each of the container's sides.
  • HTML ID- Allows you to assign a unique ID to the container. The ID can be used to point to a custom style and by Javascript to manipulate the container with the specific ID.