Bootstrap Polaris
A themed verison of bootstrap to appear and act like Shopify Polaris
Product Page Example Order Page Example Bulk Edit LayoutBase Styles and Bootstrap Components
h1. Bootstrap heading
h2. Bootstrap heading
h3. Bootstrap heading
h4. Bootstrap heading
h5. Bootstrap heading
h6. Bootstrap heading
Fancy display heading With faded secondary text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor leo a mollis ultrices. Quisque consequat rhoncus iaculis. Etiam scelerisque dictum turpis. Vestibulum at placerat nunc. In et malesuada mauris. Pellentesque rutrum in libero at aliquet. Integer mi orci, ultricies vel dictum sit amet, pulvinar sit amet leo. Quisque ut purus facilisis, blandit orci ac, vestibulum sem.
Proin feugiat nibh sem, et dignissim purus fermentum ac. Sed convallis blandit eros, at semper augue tempor at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum at arcu cursus, pharetra nunc quis, hendrerit diam. Sed condimentum dui ligula, mollis tincidunt leo vehicula eu. Quisque posuere nec dolor quis iaculis. Vestibulum laoreet ac tortor sit amet condimentum. Pellentesque non cursus ante, non lacinia nibh. Maecenas non consequat justo. Maecenas sagittis, lorem nec congue interdum, lacus risus tempor lectus, ac laoreet velit est placerat tellus. Nulla ornare risus a eros accumsan rutrum. Nulla congue quam ut sapien pretium blandit. Duis tincidunt sapien mattis massa vulputate, a luctus nisl ullamcorper. Phasellus aliquam non justo id semper. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Card Layout Polaris usage guide
Quick actions
Select an option for a quick export
Actions
There are five tiers to the Bootstrap grid system, one for each range of devices we support. Each tier starts at a minimum
Quick actions
Select an option for a quick export
Custom Export
Card body sections
Multiple card bodies in one card
There are five tiers to the Bootstrap grid system, one for each range of devices we support. Each tier starts at a minimum
There are five tiers to the Bootstrap grid system, one for each range of devices we support. Each tier starts at a minimum
There are five tiers to the Bootstrap grid system, one for each range of devices we support. Each tier starts at a minimum
Resource List Polaris usage guide
-
Derek Morash
NS, Canada
-
Able Sense
NS, Canada
6461 Quinpool Road Halifax, NS B3L 1B1
Derek Morash
- First Name
- Last Name
- Address
- Phone
Derek Morash
- First Name
- Last Name
- Address
- Phone
- First Name
- Last Name
- Address
- Phone
Scrollable Polaris usage guide
Action
There are five tiers to the Bootstrap grid system, one for each range of devices we support. Each tier starts at a minimum
There are five tiers to the Bootstrap grid system, one for each range of devices we support. Each tier starts at a minimum
There are five tiers to the Bootstrap grid system, one for each range of devices we support. Each tier starts at a minimum
There are five tiers to the Bootstrap grid system, one for each range of devices we support. Each tier starts at a minimum. There are five tiers to the Bootstrap grid system, one for each range of devices we support. Each tier starts at a minimum
There are five tiers to the Bootstrap grid system, one for each range of devices we support. Each tier starts at a minimum. There are five tiers to the Bootstrap grid system, one for each range of devices we support. Each tier starts at a minimum
There are five tiers to the Bootstrap grid system, one for each range of devices we support. Each tier starts at a minimum. There are five tiers to the Bootstrap grid system, one for each range of devices we support. Each tier starts at a minimum
Card Prompt
Accept debit, credit, and tap payments with Shopify POS
Connect the Moneris iPP320 terminal with Shopify POS and accept debit and tap payments in your retail store.
Form Polaris usage guide
Form Elements
Modifiers
Incorrect password Invalid SelectionForm Layout Bootstrap usage guide
Form Components
Polaris Checkboxes and Radio Buttons
Buttons Polaris usage guide
Button Group Polaris usage guide
Keyboard Keys Polaris usage guide
Ctr+ alt+ delete
Badges Polaris usage guide
Fulfilled IncompleteFulfilled PartialFulfilled CompleteFulfilledPublished IncompletePublished PartialPublished CompletePublished
Info IncompleteInfo PartialInfo CompleteInfo
Attention IncompleteAttention PartialAttention CompleteAttention
Warning IncompleteWarning PartialWarning CompleteWarning
Display Text Polaris usage guide
Display 1
Display 2
Display 3
Display 4
Heading Polaris usage guide
Online store dashboard
Text Styles Polaris usage guide
Positive Text
Negative Text
Subdued Text
Strong Text
Polaris Components Polaris usage guide
Banner
Toast Polaris usage guide
Basic Toast
Footer Help
Tables Example page with tables
| # | First Name | Last Name | Username | |
|---|---|---|---|---|
| 1 | Mark | Otto | @mdo | me@me.ca |
| 2 | Jacob | Thornton | @fat | me@me.ca |
| 3 | Larry | the Bird | me@me.ca |
| # | First Name | Last Name | Username | |
|---|---|---|---|---|
| 1 | Mark | Otto | @mdo | me@me.ca |
| 2 | Jacob | Thornton | @fat | me@me.ca |
| 3 | Larry | the Bird | me@me.ca |
Todays Orders
| Order | Date | Customer | Payment Status | Fulfillment Status | Total |
|---|---|---|---|---|---|
| #1001 | Yesterday, 4:06pm | Derek morash | Authorized | Unfulfilled | $19.16 |
| #1001 | Yesterday, 4:06pm | Derek morash | Authorized | Unfulfilled | $19.16 |
| #1001 | Yesterday, 4:06pm | Derek morash | Paid | Fulfilled | $19.16 |
Yesterdays Orders
| Order | Date | Customer | Payment Status | Fulfillment Status | Total |
|---|---|---|---|---|---|
| #1001 | Yesterday, 4:06pm | Derek morash | Authorized | Unfulfilled | $19.16 |
| #1001 | Yesterday, 4:06pm | Derek morash | Authorized | Unfulfilled | $19.16 |
| #1001 | Yesterday, 4:06pm | Derek morash | Paid | Fulfilled | $19.16 |
No Resource State
No orders found
You can find orders by changing your search or filtering options
Pagination
Pagination using links
Disabled buttons use a class of .disabled and tab-index="-1" on the button or anchor.
Pagination using buttons
Disabled buttons use a class of .disabled on the list item and the disabled attribute on the button element
Spinner Polaris usage guide
Progress Bar Polaris usage guide
Defaut
Small
Large
Lists Bootstrap usage guide
- Yellow shirt
- Red shirt
- Green shirt
- Yellow shirt
- Red shirt
- Green shirt
- Logistics
- The management of products or other resources as they travel between a point of origin and a destination.
- Sole proprietorship
- A business structure where a single individual both owns and runs the company.
- Discount code
- A series of numbers and/or letters that an online shopper may enter at checkout to get a discount or special offer.
Bootstrap grid examples Bootstrap usage guide
Basic grid layouts to get you familiar with building within the Bootstrap grid system.
Five grid tiers
There are five tiers to the Bootstrap grid system, one for each range of devices we support. Each tier starts at a minimum viewport size and automatically applies to the larger devices unless overridden.
Three equal columns
Get three equal-width columns starting at desktops and scaling to large desktops. On mobile devices, tablets and below, the columns will automatically stack.
Three unequal columns
Get three columns starting at desktops and scaling to large desktops of various widths. Remember, grid columns should add up to twelve for a single horizontal block. More than that, and columns start stacking no matter the viewport.
Two columns
Get two columns starting at desktops and scaling to large desktops.
Full width, single column
No grid classes are necessary for full-width elements.
Two columns with two nested columns
Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you two columns starting at desktops and scaling to large desktops, with another two (equal widths) within the larger column.
At mobile device sizes, tablets and down, these columns and their nested columns will stack.
Mixed: mobile and desktop
The Bootstrap v4 grid system has five tiers of classes: xs (extra small), sm (small), md (medium), lg (large), and xl (extra large). You can use nearly any combination of these classes to create more dynamic and flexible layouts.
Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs.