Skip to main content

Bootstrap Grid

The Bootstrap Grid layout element is an essential tool for creating responsive and structured designs in your low-code platform. It allows users to efficiently manage and arrange interface components within a grid system. The settings for this element are configured within the nested elements, offering flexibility and precision.

Key Properties of the Bootstrap Grid Layout Element​

  1. Column Size:
    • Size: Determines the width of a column within the grid. Values range from 1 to 12, representing portions of the total available space in the row.
  2. Column Offset:
    • Provides a way to add space before a column. The maximum offset is 12, allowing you to push columns over by up to 12 column-widths.
  3. Responsive Size:
    • sm, md, lg, xl: These settings control how the layout behaves on different screen sizes. Setting these properties ensures that your layout remains functional and visually appealing across devices.
      • sm (small): For small devices like phones.
      • md (medium): For medium devices like tablets.
      • lg (large): For large devices like desktops.
      • xl (extra large): For extra large devices like large desktops.

Customizing Layout Rules​

  • Adding Rules: Click the '+' button to add a new rule for column size, offset, or responsive settings. This enables you to define specific behaviors for different viewing environments.
  • Rule Order: The order of rules is significant and should progress from smallest to largest screen size (sm to xl). This organization ensures that responsive settings are applied correctly and without conflict as screen size increases.
  • Drag and Drop: Users can intuitively arrange and reorder rules using a drag-and-drop interface. This makes it easy to prioritize and adjust settings dynamically as the design evolves.

Practical Application​

The Bootstrap Grid layout element is particularly useful for creating layouts that need to adapt to various screen sizes and orientations. By leveraging the column properties and responsive settings, users can ensure that the application interface is both flexible and user-friendly.