Default Buttons
Buttons Rounded
Buttons Raised
Buttons outline
Buttons block
Large & Small Buttons
Buttons Ripple
Basic Modal
Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.
Scrolling long content
When modals become too long for the user’s viewport or device, they scroll independent of the page itself.
Vertically centered
Add .modal-dialog-centered to .modal-dialog to vertically center the modal.
Optional sizes
Modals have two optional sizes, available via modifier classes to be placed on a .modal-dialog. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.
Varying modal content
Have a bunch of buttons that all trigger the same modal with slightly different contents? Use event.relatedTarget and HTML data-* attributes (possibly via jQuery) to vary the contents of the modal depending on which button was clicked.
Below is a live demo followed by example HTML and JavaScript. For more information, read the modal events docs for details on relatedTarget.
Button checkbox
Switch
Checkbox
Checkbox
Radio Checkbox Button
Radio Outline Checkbox
Loader
Ripple Spinners
Loading Spinners
Bubble Spinners
Bubble Spinners
Ladda button
Basic example
Expand left <button class="btn btn-lg btn-primary ladda-button basic-ladda-button" data-style="expand-left">Click me</button>
Button Variations
Expand left <button class="btn btn-lg btn-primary ladda-button basic-ladda-button" data-style="expand-left">Click me</button>
Button with icon
| MODULE NAME | ALL | VIEW | ADD | EDIT | DELETE |
|---|---|---|---|---|---|
| Jetfire | |||||
| Phase 1 | |||||
| Support |
| MODULE NAME | ALL | VIEW | ADD | EDIT | DELETE |
|---|---|---|---|---|---|
| Jetfire | |||||
| Phase 1 | |||||
| Support |
| MODULE NAME | ALL | VIEW | ADD | EDIT | DELETE |
|---|---|---|---|---|---|
| Jetfire | |||||
| Phase 1 | |||||
| Support |
| MODULE NAME | ALL | VIEW | ADD | EDIT | DELETE |
|---|---|---|---|---|---|
| Jetfire | |||||
| Phase 1 | |||||
| Support |
Labels
Popover
Four direcctions
Four options are available: top, right, bottom, and left aligned.
Dismiss on next click
Use the focus trigger to dismiss popovers on the user’s next click of a different element than the toggle element.
Dismissible popoverCards
New Leads
203
New Leads
203
New Leads
203
New Leads
203
New Leads
203
New Leads
203
New Leads
203
New Leads
203
New Leads
203
New Leads
203
New Leads
203
New Leads
203
New Leads
203
New Leads
203
New Leads
203
New Leads
203
New Leads
203
New Leads
203
New Leads
203
New Leads
203
New Leads
203
New Leads
203
New Leads
203
New Leads
203
New Leads
203
New Leads
203
New Leads
203
New Leads
203
New Leads
203
New Leads
203
New Leads
203
New Leads
203
New Leads
203
New Leads
203
New Leads
203
New Leads
203
Pending Task
1234
- 35% This Month
In-Process Task
1234
- 35% This Month
Completed Task
1234
- 35% This Month
Pending Task
1234
- 35% This Month
In-Process Task
1234
- 35% This Month
Completed Task
1234
- 35% This Month
Pending Task
1234
- 35% This Month
In-Process Task
1234
- 35% This Month
Completed Task
1234
- 35% This Month
Pending Task
1234
In-Process Task
1234
Completed Task
1234
Pending Task
1234
In-Process Task
1234
Completed Task
1234
Pending Task
1234
In-Process Task
1234
Completed Task
1234
New Leads
203
New Leads
203
New Leads
203
New Leads
203
New Leads
203
New Leads
203
New Leads
203
New Leads
203
New Leads
203
Popover
All Activity
Daily Completion
55%
Employee Presence
80%
Payment Dues
20%
