Value: {{ value }}
Text (default)
Avatar
Input
Button
Wave (default)
Fade
Throb
None
Popover
Form
Form Input
Form Input Types
type text
type number
type email
type password
type search
type url
type tel
type date
type time
type range
value : {{ formInputRangeValue }}
type color
plaintext
Disabled
Form Input Sizes
small
large
Form Input Contextual states
null
true
false
Form Floating Label
@
.00
Form Checkbox
Simple
State:
{{ checkboxes.status }}
array with uncheckedValue
State:
{{ checkboxes.statusArray }}
Individual
Checked: {{ checkedDefault }}
Checked: {{ checkedButton }}
Checked: {{ checkedRequired }}
Checked: {{ checkedIndeterminate }}
Checked: {{ checkedPlain }}
Checkbox bound to array
Select some cars
Selected cars
- {{ car }}
Form Checkbox Group
With options
With slots
Orange
Apple
Pineapple
Object
Grapess
Orange only
Grape only
With slots
Selected:
{{ checkboxes.selected }}
Form Radio
Individual
Checked: {{ radioDefault }}
Checked: {{ radioButton }}
Checked: {{ radioRequired }}
Checked: {{ radioIndeterminate }}
Value: {{ radioString }}
Checked: {{ radioPlain }}
Individual radios grouped
Selected:
{{ radioSelected }}
Radio bound to array
Select some cars
Selected cars
- {{ car }}
Grouped (with options or slots)
Selected:
{{ radios.ex1.selected }}
Changing the option field names
Selected:
{{ radios.ex2.selected }}
Button styles radios
Selected:
{{ radios.ex3.selected }}
Form Select
plain
Selected:
{{ formSelectSelected }}
multiple
Selected:
{{ formSelectMultipleSelected }}
Form Textarea
Input Group
Input Group Sizes
Navigation (Links)
NB: navigation behavior depends of the usage of "vue-router"
Badge
Simple
Example heading
New
Example heading
New
Example heading
New
Example heading
New
Example heading
New
Pill badges with color variant
Actionable badges
Dropdown
Sizes
Split & variant
Direction & variant
Flip
Misc
Block
Custom popper config
Custom Button Icon
Navigation
Cards
Hello World
Tabs
I'm the first tab
I'm the second tab
I'm a disabled tab!
I'm a disabled tab!
I'm the fifth tab
I'm a disabled tab!
Current Tab: {{ tabIndex }}
Tabs with custom title
Tab contents 1
Tab contents 2
Layout
Basic layout
Row columns
Variable width content
Alerts
Avatars
Image
Small image with
fluid:
Small image with
fluid-grow:
Rounded
true
top
right
bottom
start
circle
0
Thumbnail
Position
Blank Color
Breadcrumb
Table
Table without field definitions
Table with string field definitions
Table with object field definitions
Table: Adding additional rows to the header
Accordion
Build vertically collapsing accordions in combination with our Collapse JavaScript plugin.
.accordion-body, though the transition does limit overflow.
.accordion-body, though the transition does limit overflow.
.accordion-body, though the transition does limit overflow.
Carousel
Hello world!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eros felis, tincidunt a tincidunt eget, convallis vel est. Ut pellentesque ut lacus vel interdum.
This is the first item's accordion body. It is shown by default, until
the collapse plugin adds the appropriate classes that we use to style each element. These
classes control the overall appearance, as well as the showing and hiding via CSS
transitions. You can modify any of this with custom CSS or overriding our default
variables. It's also worth noting that just about any HTML can go within the
.accordion-body, though the transition does limit overflow.
Modal
Nav
Nav with a dropdown
Nav with a dropdown and a custom Button Icon
Tooltip
Popover
Pagination
Overlay
List Group
Pressed State: {{ buttonIsPressed }}
Handle Visible Test
This should only show if handleVisible was triggered