Horizontal Trigger
This sets Bootstrap breakpoint at which the List Group should begin rendering at full viewport
width. You may choose:
- always
- never
- sm
- md
- lg
- xl
- xxl
Item List Area
This
is the collection of items contained in the List .
-
You may rearrange items by
using the Drag-and-drop handles on the left of each section
-
You may delete an item by
selecting its red trashcan icon
- You
may open an item for editing by selecting the > button
just to the left of its title (List Items and their controls are discussed later in this document)
Add Item button
This will add either a List Item or a nested List Group to the bottom of the Item list.
The Layout Tab

Padding
This will add space around the inside of the List Group. The following values are available:
- p-1 thru p-5: pads all sides
- py-1 thru py-5: pads the top and bottom
- pt-1 thru pt-5: pads the top
- pb-1 thru pb-5: pads the bottom
- px-1 thru px-5: pads the right and left
- ps-1 thru ps-5: pads the left
- pe-1 thru pe-5: pads the right
See the Bootstrap docs for details on spacing classes.
Margin
This will add space around the outside of the List Group. The following values are
available:
- m-1 thru m-5: pads all sides
- my-1 thru my-5: pads the top and bottom
- mt-1 thru mt-5: pads the top
- mb-1 thru mb-5: pads the bottom
- mx-1 thru mx-5: pads the right and left
- ms-1 thru ms-5: pads the left
- me-1 thru me-5: pads the right
See the Bootstrap docs for details on spacing classes.
The Style Tab

DropShadow
This will apply a drop shadow to the List Group. you may choose between: no shadow, small
shadow, default shadow or large shadow.
The List Item panel
List Items are managed using this panel

Title
The name of the item. It is the text that will be rendered in the list
Link URL
If a URL is specified, then the List Item will render as a link.
Background Color
Sets a background color for the individual item. you may choose between the standard Bootstrap Utility Color classes.