Buttons
Use TODC Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
Legacy
For additional flexibility, we’ve also included the button style from v3 of TODC Bootstrap.
<button type="button" class="btn btn-legacy-primary">Primary</button>
<button type="button" class="btn btn-legacy-secondary">Secondary</button>
<button type="button" class="btn btn-legacy-success">Success</button>
<button type="button" class="btn btn-legacy-danger">Danger</button>
<button type="button" class="btn btn-legacy-warning">Warning</button>
<button type="button" class="btn btn-legacy-info">Info</button>
<button type="button" class="btn btn-legacy-light">Light</button>
<button type="button" class="btn btn-legacy-dark">Dark</button>Raised
<button type="button" class="btn btn-raised-primary">Primary</button>
<button type="button" class="btn btn-raised-secondary">Secondary</button>
<button type="button" class="btn btn-raised-success">Success</button>
<button type="button" class="btn btn-raised-danger">Danger</button>
<button type="button" class="btn btn-raised-warning">Warning</button>
<button type="button" class="btn btn-raised-info">Info</button>
<button type="button" class="btn btn-raised-light">Light</button>
<button type="button" class="btn btn-raised-dark">Dark</button>Flat
In need of a button, but you’d like something flatter? Replace the default modifier classes with the .btn-flat-* ones to remove all background images, borders, and colors on any button.
<button type="button" class="btn btn-flat-primary">Primary</button>
<button type="button" class="btn btn-flat-secondary">Secondary</button>
<button type="button" class="btn btn-flat-success">Success</button>
<button type="button" class="btn btn-flat-danger">Danger</button>
<button type="button" class="btn btn-flat-warning">Warning</button>
<button type="button" class="btn btn-flat-info">Info</button>
<button type="button" class="btn btn-flat-light">Light</button>
<button type="button" class="btn btn-flat-dark">Dark</button>Pill
In need of a pill shaped button? Use the .btn-pill modifier class
with the .btn, .btn-*, .btn-outline-*, or
.btn-flat-* classes.
<button type="button" class="btn btn-pill">Button</button><button type="button" class="btn btn-primary btn-pill">Primary</button>
<button type="button" class="btn btn-secondary btn-pill">Secondary</button>
<button type="button" class="btn btn-success btn-pill">Success</button>
<button type="button" class="btn btn-danger btn-pill">Danger</button>
<button type="button" class="btn btn-warning btn-pill">Warning</button>
<button type="button" class="btn btn-info btn-pill">Info</button>
<button type="button" class="btn btn-light btn-pill">Light</button>
<button type="button" class="btn btn-dark btn-pill">Dark</button><button type="button" class="btn btn-outline-primary btn-pill">Primary</button>
<button type="button" class="btn btn-outline-secondary btn-pill">Secondary</button>
<button type="button" class="btn btn-outline-success btn-pill">Success</button>
<button type="button" class="btn btn-outline-danger btn-pill">Danger</button>
<button type="button" class="btn btn-outline-warning btn-pill">Warning</button>
<button type="button" class="btn btn-outline-info btn-pill">Info</button>
<button type="button" class="btn btn-outline-light btn-pill">Light</button>
<button type="button" class="btn btn-outline-dark btn-pill">Dark</button><button type="button" class="btn btn-flat-primary btn-pill">Primary</button>
<button type="button" class="btn btn-flat-secondary btn-pill">Secondary</button>
<button type="button" class="btn btn-flat-success btn-pill">Success</button>
<button type="button" class="btn btn-flat-danger btn-pill">Danger</button>
<button type="button" class="btn btn-flat-warning btn-pill">Warning</button>
<button type="button" class="btn btn-flat-info btn-pill">Info</button>
<button type="button" class="btn btn-flat-light btn-pill">Light</button>
<button type="button" class="btn btn-flat-dark btn-pill">Dark</button>Floating Action
A floating action button is used for a promoted action.
Shaped like a circled icon floating above the UI, it changes color upon focus and lifts upon selection. When pressed, it may contain more related actions.
Usage
Only one floating action button is recommended per screen to represent the most common action.
<button type="button" class="btn btn-fab-primary"><span class="material-icons">add</span></button>
<button type="button" class="btn btn-fab-secondary"><span class="material-icons">add</span></button>
<button type="button" class="btn btn-fab-success"><span class="material-icons">add</span></button>
<button type="button" class="btn btn-fab-danger"><span class="material-icons">add</span></button>
<button type="button" class="btn btn-fab-warning"><span class="material-icons">add</span></button>
<button type="button" class="btn btn-fab-info"><span class="material-icons">add</span></button>
<button type="button" class="btn btn-fab-light"><span class="material-icons">add</span></button>
<button type="button" class="btn btn-fab-dark"><span class="material-icons">add</span></button>Heads up! The Material Icons are not included in the project. Please read the Material Icons Guide for an overview and how to include them with your project.
Sizes
Fancy smaller buttons? Add .btn-sm.
Heads up! Floating Action Buttons do not support .btn-lg.
<button type="button" class="btn btn-fab-primary"><span class="material-icons">add</span></button>
<button type="button" class="btn btn-fab-primary btn-sm"><span class="material-icons">add</span></button>Disabled
No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does not perform an action, you should also present an explanation to the user.
Icon
<button type="button" class="btn btn-icon-primary"><span class="material-icons">close</span></button>
<button type="button" class="btn btn-icon-secondary"><span class="material-icons">close</span></button>
<button type="button" class="btn btn-icon-success"><span class="material-icons">close</span></button>
<button type="button" class="btn btn-icon-danger"><span class="material-icons">close</span></button>
<button type="button" class="btn btn-icon-warning"><span class="material-icons">close</span></button>
<button type="button" class="btn btn-icon-info"><span class="material-icons">close</span></button>
<button type="button" class="btn btn-icon-light"><span class="material-icons">close</span></button>
<button type="button" class="btn btn-icon-dark"><span class="material-icons">close</span></button>Sizes
Fancy larger or smaller buttons? Add .btn-lg or .btn-sm for additional sizes.
<button type="button" class="btn btn-icon-primary btn-lg"><span class="material-icons">menu</span></button>
<button type="button" class="btn btn-icon-secondary btn-lg"><span class="material-icons">menu</span></button><button type="button" class="btn btn-icon-primary btn-sm"><span class="material-icons">menu</span></button>
<button type="button" class="btn btn-icon-secondary btn-sm"><span class="material-icons">menu</span></button>