Test page
This is a template showcasing the optional theme stylesheet included in Bootstrap. Use it as a starting point to create something more unique by building on or modifying it.
Colors
Shore icons
See the complete reference here!
Usage
<i class="shore-icon-{name}"></i>
Typography
Heading 1 Secondary text
Heading 2
Heading 3 Secondary text
Heading 4
Heading 5 Secondary text
Heading 6
Contextual classes
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
Contextual backgrounds
Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
Buttons
Large
Regular
Regular disabled
Small
Extra Small
Button groups
Standalone icon buttons Shore add-on
Flew Row
with justified cells by default
with max. one spread cell
Forms
Inline form with input-group-addons
Flex inline form Shore add-on
Horizontal form
Blockquotes
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Tooltips
Static
on buttons
Popovers
Static
Popover top
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Popover right
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Popover bottom
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Popover left
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Examples
Breadcrumbs
Breadcrumb inside panel heading
Tables
Table inside panel
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
Table striped
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
Table bordered
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| Mark | Otto | @TwBootstrap | |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
Table condensed / contextual
| # | Column heading | Column heading | Column heading |
|---|---|---|---|
| 1 | active | active | active |
| 2 | regular | regular | regular |
| 3 | success | success | success |
| 4 | regular | regular | regular |
| 5 | info | info | info |
| 6 | regular | regular | regular |
| 7 | warning | warning | warning |
| 8 | regular | regular | regular |
| 9 | danger | danger | danger |
Images only use the circle style
Placeholders
Labels
Default Primary Success Info Warning Danger
Default Primary Success Info Warning Danger
Default Primary Success Info Warning Danger
Default Primary Success Info Warning Danger
Default Primary Success Info Warning Danger
Default Primary Success Info Warning Danger
Default Primary Success Info Warning Danger
Dropdown menus
Navs
Tabs
Pills
Navbars
Alerts
Progress bars
List groups
- A
- Aras justo odio
- A list group item warning
- Aapibus facilisis in
- B
- Borbi leo risus
- Borta ac consectetur ac
- C
- Cestibulum at eros
List group item heading H5 active
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
List group item heading H5
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
List group item heading H6
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Panels
Panel title - default
Panel title - primary
Panel title - success
Panel title - info
- A
- Aras justo odio
- Aapibus facilisis in
- B
- Borbi leo risus
- Borta ac consectetur ac
Panel title - warning
Panel title - danger
Panel title - default
Wells
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.