Initializing help system before first use

Working with Page Layouts and Styling

The View Designer incorporates a default style sheet derived from a foundation based on Bootstrap 3.x. This arrangement inherits some rules on how you can augment the built-in styling that applies to container sizes and the horizontal spacing of elements.

Elements should be placed within a hierarchy of containers that correspond closely to similarly named container and layout classes in Bootstrap.

The Section (<vdl-section>), Row (<vdl-row>), and Column (<vdl-column>) elements correspond to container, row, and col-*-* classes in Bootstrap 3.x.

Covered Topics
  • Custom CSS Styling
    The styling that VDL applies to the elements shown in the Insight app are controlled by settings in an embedded stylesheet, which can be overridden.
  • Organize Page Content with Sections, Rows, and Columns
    Introduced in the example app earlier, Sections can help you structure and organize your page content—they correspond to the Bootstrap container class. Sections can not be nested, instead use Rows and Columns within a Section to organize your content.
  • Layout Rules
    Sections, Rows, and Columns in a VDL view abide by a set of conditional rules.
  • Creating Grid Layouts
    Use the Row element (vdl-row tag) within a section to create a grid layout.
Parent Topic Using the View Designer and VDL to Create Custom Views