Skip to main content

NIM

Step 17: Add buttons in a nested grid (tutorial)

In this step, we'll add Add and Remove buttons to this form.

  1. Drag a Button item to the green drop zone next to the grid, but press and hold the Ctrl key as you drop it. This inserts the button inside a nested Bootstrap grid. This is necessary to vertically stack both of our buttons beside our remove_memberships grid item.

    2023-10-23_11-24-40.jpg

    Tip

    If we don't hold Ctrl to create a nested grid, it won't be possible to place a second button below the first one.

    2023-10-26_15-00-44.jpg
  2. Set the button's properties as follows:

    2023-10-23_11-30-11.jpg
    • button text: Add

    • column width parent: 2

    • fit column: yes

    • icon right: angle-right

    • margin trbl: __3_

  3. Drag and drop another button below the Add button, and set its properties as follows:

    2023-10-23_11-33-35.jpg
    • button text: Remove

    • fit column: yes

    • icon left: angle-left

  4. We'll click Save to save our progress so far.

Next: Step 18: Grid items, cont'd