Logo
Icon
Lockup
Runnabear
Full Image
![Basic Bear](images/bears/basic-bear.png)
![Coffee Bear](images/bears/RGB/coffee-bear.png)
![Cyborg Bear](images/bears/cyborg-bear.png)
![Doctor Bear](images/bears/RGB/doctor-bear.png)
![Error Bear](images/bears/RGB/error-bear.png)
![Basic Bear Head](images/bears/RGB/basic-bear-head.png)
![Cyborg Bear Head](images/bears/RGB/cyborg-bear-head.png)
![Error Bear Head](images/bears/RGB/error-bear-head.png)
![Docker Bear 1](images/bears/RGB/docker-bear-1.png)
![Docker Bear 2](images/bears/RGB/docker-bear-2.png)
![Signup Bear 1](images/bears/RGB/signup-bear-1.png)
![Signup Bear 2](images/bears/RGB/signup-bear-2.png)
![Signup Bear 3](images/bears/RGB/signup-bear-3.png)
Avatars
![Basic Bear Avatar](images/avatars/RGB/basic-bear-avatar.png)
![Basic Bear (Alt)](images/avatars/RGB/basic-bear-avatar-alt.png)
![Coffee Bear Avatar](images/avatars/coffee-bear-avatar.png)
![Cyborg Bear Avatar](images/avatars/RGB/cyborg-bear-avatar.png)
![Cyborg Bear (Alt)](images/avatars/RGB/cyborg-bear-avatar-alt.png)
![Doctor Bear Avatar](images/avatars/RGB/doctor-bear-avatar.png)
![Hugging Bear Avatar](images/avatars/RGB/hugging-bear-avatar.png)
Colors
#000
#fff
#f7f7f7
#f0f0f0
#dbdbdb
#bbb
#888
#555
#333
#e8ffed
#2bd94f
#3ccb5a
#31b74d
#2a9f43
#09200e
#eee1f7
#b6a6bd
#834fab
#5b3777
#402754
#261731
#1b0f24
#fffbf5
#f7c457
#f9b548
#f2ae24
#db970d
#cd8d0c
#3d2b05
#fde6e9
#ef737f
#f25058
#f5fcff
#8bd5f9
#0ca6f2
#1e7daf
Themes
Logs & Terminals
BOLD DIM UNDERLINE BLINK (hover) HIDDEN (hidden) BLACK BACKGROUND BLACK WHITE BACKGROUND WHITE RED BACKGROUND RED GREEN GREEN YELLOW YELLOW BLUE BLUE MAGENTA MAGENTA CYAN CYAN LIGHT GRAY LIGHT GRAY
BOLD DIM UNDERLINE BLINK (hover) HIDDEN (hidden) BLACK BACKGROUND BLACK WHITE BACKGROUND WHITE RED BACKGROUND RED GREEN GREEN YELLOW YELLOW BLUE BLUE MAGENTA MAGENTA CYAN CYAN LIGHT GRAY LIGHT GRAY
Typography
H1 60px .h1
H2 33px .h2
H3 27px .h3
Paragraph 16px default
Source Code Pro 14px .monospace
Forms
Inputs
Inputs have styles for focus, readonly, and disabled states.
<input class="input"> <input class="input focus"> <input class="input" readonly> <input class="input" disabled>
Sizes
Inputs match the height of their button size counterpart.
<input class="input input-sm"> <input class="input input-xs"> <input class="input input-xxs">
Textarea
<textarea class="textarea"></textarea>
Search
<input class="input" placeholder="Search" type="search">
Toggles
<label class="toggle-wrapper"> <input class="toggle-input type="checkbox"> <div class="toggle-group"></div> </label>
<label class="toggle-wrapper show-icon"> <input class="toggle-input type="checkbox"> <div class="toggle-group"></div> </label>
<label class="toggle-wrapper"> <input class="toggle-input type="checkbox"> <div class="toggle-group toggle-sm"></div> </label>
<label class="toggle-wrapper show-icons"> <input class="toggle-input type="checkbox"> <div class="toggle-group toggle-sm"></div> </label>
<label class="toggle-wrapper"> <input class="toggle-input type="checkbox"> <div class="toggle-group toggle-xs"></div> </label>
<label class="toggle-wrapper show-icons"> <input class="toggle-input type="checkbox"> <div class="toggle-group toggle-xs"></div> </label>
Validation
Inputs
Only inputs with the class .input-validate will show invalid states.
<input class="input input-validate">
Messages
<input class="input input-validate"> <p class="validation-message">This isn’t a valid input!
List of Requirements
<ul class="list list-bulleted list-validation> <li class="list-item"> Use letters, numbers, and hyphens (-) <li class="list-item"> Use 10 characters or less <li class="list-item"> Use a unique name </ul>
- Use letters, numbers, and hyphens (-)
- Use 10 characters or less
- Use a unique name
Spinners
Usage
Hover over a spinner to see it in animation.
<svg class="spinner" viewbox='0 0 16 16'> <circle class="path" cx="8" cy="8" r="7" stroke-linecap="round"></circle> </svg>
Colors
If no color is set, spinners will inherit their color from the text color.
<svg class="spinner spinner-blue" viewbox='0 0 16 16'>...</svg> <svg class="spinner spinner-gray" viewbox='0 0 16 16'>...</svg> <svg class="spinner spinner-green" viewbox='0 0 16 16'>...</svg> <svg class="spinner spinner-purple" viewbox='0 0 16 16'>...</svg> <svg class="spinner spinner-white" viewbox='0 0 16 16'>...</svg>
Sizes
<svg class="spinner spinner-lg" viewbox='0 0 16 16'>...</svg> <svg class="spinner spinner-md" viewbox='0 0 16 16'>...</svg> <svg class="spinner spinner-sm" viewbox='0 0 16 16'>...</svg>