Patterns
UI list
UI lists are used to represent lists of UI elements, like workers or gigs.
A UI list is created using two Bootstrap components:
cards and
list groups. Use .p-24 spacing
for the card and .list-group-flush styling for the list group.
Flex utilities are helpful for creating left
and right aligned content that changes layout at smaller responsive sizes.
The list group items can contain other types of Bootstrap components. A useful combination is the media object , to show an avatar along the left side of the content.
Sidebar sections
Sidebars are sections that show up in the third column (on the right). Sidebar sections are used for a variety of non-essential UI elements, like product marketing, widgets to promote new features, announcements, etc.
To create these sections, use standard
Bootstrap cards with .p-16 spacing on the card body. The color of the section can be controlled using
Bootstrap color utilities like
.bg-info.
In two-column layouts (tablet size), the sidebar moves below the main content, so it actually becomes wider than at desktop sizes. Use Bootstrap flex to adjust the layout for the responsive sizes. For example, the "recommended professionals" widget moves the button to a horizontal layout when space permits.
Instaworkers you rate 4 and 5 stars are added to your favorites Request your favorite workers for specific gigs You can browse Instaworkers and add the ones you like to your favoritesManage your staff with gigs
Add your staff and give them exclusive access to your gigs.
Manage your staff with gigs
Add your staff and give them exclusive access to your gigs.
Multi-step forms
Multi-step forms should be constructed from standard Bootstrap components:
cards for sections and sub-sections,
breadcrumbs for step navigation, and
custom form inputs for the
inputs. Use .p-24 for the card body padding and for sub-section padding.
As with other patterns, pay attention to the layout at mobile responsive sizes. It's easier to design the form at mobile sizes first, and then add responsive classes for larger widths. This form below makes use of several responsive helpers:
- Responsive columns to change from 4 columns in a row to 2 columns:
col-6 col-md-6 -
Responsive display utilities hide the header labels and show the labels for each input at smaller sizes:
d-md-none visibleandinvisiblehelpers to show/hide the close buttons next to rows
What kind of staff do you need?
Interactive cards
Interactive cards can be used in two ways. The first is as clickable options for selection.
1 Line Cook
1 Retail Merchandiser
1 Barback Guy
Godlike Artist
The other use case is as containers for form fields. In this case, the card takes on the error state of the field.
Full Bleed Interactive cards
Interactive cards can be used in two ways. The first is as clickable options for selection.
1 Line Cook
