Buttons
Forms
Alerts
Default Alert
Successful Alert
Warning Alert
Danger Alert
Alert title
Alert with a title
Lists
Description List
- Title A
- Description A
- Title B
- Description B
Horizontal Description List
- Title A
- Description A
- Title B
- Description B
List Group
- Item 1
- Item 2
-
Item 3
Item 3 - Description
List Group with Links
Panels
Panel
Normal Panel Body
Primary Panel
Primary Panel Body
Danger Panel
Danger Panel Body
Success Panel
Success Panel Body
Warning Panel
Warning Panel Body
Progress
Typography
Code
Enable JavaScript for better preview!Code with Wrapping
Enable JavaScript for better preview!Labels
Sample Text Label
Horizontal Ruler
Text Colors
Muted text
Warning text
Danger text
Success text
Centered text
Grid
There is a fixed width container (.container) and also a fluid container (.container.container-fluid).
Additional grid sizes are defined in $grid-sizes variable.
Cell 1 (1-2-1)
Cell 2 (1-2-1)
Cell 3 (1-2-1)
You can define different grids on mobile, tablet and desktop devices by combining .grid-mobile--*, .grid-tablet--* and .grid--* classes.
Cell 1 (1-1)
Cell 2 (1-1)
Dark Mode
Dark mode can only be activated automatically by activating Dark Mode in your browser or system.