Bootstrap Components
Looper uses the native Bootstrap components to create a straightforward and beautiful experience.
Alerts
Use the native Bootstrap Alerts element. See the Bootstrap documentation for details.
Additional Classes
-
.has-icon - Apply to
.alertto increase padding left for icon space.
Badges
Use the native Bootstrap Badges element. See the Bootstrap documentation for details.
Number 20
Text 20+
Statuses New
Actions +6
Removed 4
Additional Classes
-
.badge-subtle - Apply to
.badgeto use light background and dark text.
Breadcrumb
Use the native Bootstrap Breadcrumb element. See the Bootstrap documentation for details.
Buttons
Use the native Bootstrap Buttons element. See the Bootstrap documentation for details.
Additional Classes
-
.btn-subtle-{context} - Apply to
.btnto add subtle context color. -
.btn-icon - Apply to
.btnto make a circle button.
Cards
Use the native Bootstrap Cards element. See the Bootstrap documentation for details.
Special title treatment
Support card subtitle
Blanditiis architecto quaerat fugit sit ab veritatis ipsam assumenda doloremque repellendus expedita. @stilearningTwit . #looper #admin
Additional Classes
-
.card-reflow - Apply to
.cardto remove background color, shadow and margin bottom. -
.card-fluid - Apply to
.cardto remove border radius on small screen. -
.card-inverse - Inverse text within a card for use with dark backgrounds.
Dropdowns
Use the native Bootstrap Dropdowns element. See the Bootstrap documentation for details.
Additional Element
-
.dropdown-arrow - Apply
<div>inside.dropdown-menuto add arrow of dropdown menu. -
.dropdown-arrow-{left/right} - Apply to
.dropdown-arrowto positioning the arrow to left/right. -
.dropdown-menu-rich - Apply to
.dropdown-menuto remove padding & give 20rem static width. -
.dropdown-menu-md - Apply to
.dropdown-menuto give 18rem min width. -
.dropdown-menu-lg - Apply to
.dropdown-menuto give 24rem min width. -
.dropdown-menu-xl - Apply to
.dropdown-menuto give 30rem min width. -
.dropdown-menu-sheet - Apply to
.dropdown-menu-richto support 3 column layout inside dropdown.
Forms
Use the native Bootstrap Forms element. See the Bootstrap documentation for details.
Additional Classes
-
.form-control-reflow - Apply to
.form-controlto remove background color and border. -
.input-group-plaintext - Apply to
.input-groupto make your input group styled as plain text. -
.custom-label-hint - Apply in
.custom-controlto visible content when the input (checkbox & radio) has checked states.
List Group
Use the native Bootstrap List Group element. See the Bootstrap documentation for details.
Additional Classes
-
.list-group-media - Apply to
.list-groupto construct highly repetitive components like Media Object. -
.list-group-reflow - Apply to
.list-groupto remove background color and shadow. -
.list-group-bordered - Apply to
.list-groupto add border between list group item. -
.list-group-divider - Apply to
.list-groupto add alternative border style.
Modal
Use the native Bootstrap Modal element. See the Bootstrap documentation for details.
Additional Classes
-
.modal-alert - Apply to
.modalto add alert state animation. -
.modal-dialog-scrollable - Apply to
.modal-dialogto add scroll on modal dialog. -
.modal-drawer - Apply to
.modalto add scroll on modal dialog. -
.modal-drawer-right - Apply to
.modal-dialogto put.modal-draweron the right position. -
.modal-drawer-left - Apply to
.modal-dialogto put.modal-draweron the left position. -
.modal-docked - Apply to
.modalto put.modalon the bottom left position (like chat widget).
Navbar
Use the native Bootstrap Navbar element. See the Bootstrap documentation for details.
Navs
Use the native Bootstrap Navs element. See the Bootstrap documentation for details.
Horizontal
Vertical
Tabs
Paginations
Use the native Bootstrap Paginations element. See the Bootstrap documentation for details.
Popovers
Use the native Bootstrap Popovers element. See the Bootstrap documentation for details.
Click buttons below to see Popover.
Progress
Use the native Bootstrap Progress element. See the Bootstrap documentation for details.
Additional Classes
-
.progress-lg - Apply to
.progressto increase the progress height large size. -
.progress-sm - Apply to
.progressto decrease the progress height small size. -
.progress-xs - Apply to
.progressto decrease the progress height extra small size. -
.progress-animated - Apply to
.progressto animated progress bar on browser load.
Spinners
Indicate the loading state of a component or page.
Toasts
Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.
Bootstrap toast
Tables
Use the native Bootstrap Tables element. See the Bootstrap documentation for details.
| Task | Due Date | Estimate | Worked |
|---|---|---|---|
| OS Ride a roller coaster | Tomorrow | 48:00 | 50:02 |
| OS Have a picnic in the park | In 2 days | 12:00 | 08:36 |
| SP Dangle your feet off a dock | Apr 07 | 6:00 | 03:11 |
Tooltips
Use the native Bootstrap Tooltips element. See the Bootstrap documentation for details.
Hover on buttons below to see tooltips.