Bootstrap Components
Wingman leverages the power of the Bootstrap 4 framework to create a robust suite of detailed, and varied pages.Pages
Components
Help
-
Alerts
Use default Bootstrap markup to display Alerts elements. See the Bootstrap documentation for a full list of options and modifiers. View Alerts on BootstrapThis is a primary alert—check it out!This is a secondary alert—check it out!This is a success alert—check it out!This is a danger alert—check it out!This is a warning alert—check it out!This is a info alert—check it out!This is a light alert—check it out!This is a dark alert—check it out!
-
Badge
Use default Bootstrap markup to display Badge elements. See the Bootstrap documentation for a full list of options and modifiers. View Badge on BootstrapBadges
Version 1.2 New
Items 4
Issue Tracking On Track
Subscription Expired
Invoice Pending
Category Pill
Indicators
On track
Needs Attention
In Danger
Additional Class Reference
.badge-indicator- Apply to
.badgeto display badge as an indicator circle
-
Breadcrumb
Use default Bootstrap markup to display Breadcrumb elements. See the Bootstrap documentation for a full list of options and modifiers. View Breadcrumb on Bootstrap
-
Buttons
Use default Bootstrap markup to display Buttons elements. See the Bootstrap documentation for a full list of options and modifiers. View Buttons on BootstrapButton Colors
Button Sizes
-
Card
Use default Bootstrap markup to display Card elements. See the Bootstrap documentation for a full list of options and modifiers. View Card on Bootstrap
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereAdded a new item A few moments ago
Kin Digital Fashion AssistantAdditional Class Reference
.card-lg- Apply to
.cardto increase padding inside the card .card-sm- Apply to
.cardto decrease padding inside the card .card-borderless- Apply to
.cardto remove default border .card-header-borderless- Apply to
.card-headerto remove bottom border .card-footer-borderless- Apply to
.card-footerto remove top border
-
Dropdowns
Use default Bootstrap markup to display Dropdowns elements. See the Bootstrap documentation for a full list of options and modifiers. View Dropdowns on BootstrapAdditional Class Reference
.dropdown-menu-sm- Apply to
.dropdown-menuto decrease padding inside the menu .dropdown-toggle-no-arrow- Apply to
.dropdown-toggleto remove default arrow icon
-
Forms
Use default Bootstrap markup to display Forms elements. See the Bootstrap documentation for a full list of options and modifiers. View Forms on BootstrapForm Group
Input Sizes
Input Group
Custom Inputs
Additional Class Reference
.form-control-borderless- Apply to
.form-controlto remove default border
-
List Group
Use default Bootstrap markup to display List Group elements. See the Bootstrap documentation for a full list of options and modifiers. View List Group on Bootstrap- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
Additional Class Reference
.list-group-lg- Apply to
.list-groupto increase the Y padding of child items .list-group-comments- Apply to
.list-groupwhen displaying a list of discussion comments for correct child formatting
-
Modal
Use default Bootstrap markup to display Modal elements. See the Bootstrap documentation for a full list of options and modifiers. View Modal on BootstrapAdditional Class Reference
.modal-header-borderless- Apply to
.modal-headerto remove border and padding from bottom .modal-footer-borderless- Apply to
.modal-footerto remove border and padding from top .modal-center-viewport- Apply to
.modal-dialogto center the modals contents vertically and horizontally within the viewport
-
Pagination
Use default Bootstrap markup to display Pagination elements. See the Bootstrap documentation for a full list of options and modifiers. View Pagination on Bootstrap
-
Progress
Use default Bootstrap markup to display Progress elements. See the Bootstrap documentation for a full list of options and modifiers. View Progress on BootstrapAdditional Class Reference
.progress-sm- Apply to
.progressto decrease the default height of the progress bar
-
Tables
Use default Bootstrap markup to display Tables elements. See the Bootstrap documentation for a full list of options and modifiers. View Tables on BootstrapName Email Location 
Daniel Cameron Product Designerdaniel.cameron@wingman.co San Francisco, USA 
Caitlyn Halsy Marketing Professionalcaitlyn.halsy@wingman.co Melbourne, AU 
Toby Marsh Developertoby.marsh@wingman.co Denver, USA 
Lucille Freebody Graphic Designerlucille.freebody@wingman.co Bathwick, UK Additional Class Reference
.table-borderless- Apply to
<table>to remove all borders from the table and its child elements .bg-white- Apply to
<tr>to format the row as a singular 'card' styled entity .table-divider- Apply to and empty
<tr>act as a spacer between two<tr>elements
-
Toasts
Use default Bootstrap markup to display Toasts elements. See the Bootstrap documentation for a full list of options and modifiers. View Toasts on Bootstrap
Andrew Smith
11 mins ago
Hello, world! This is a toast message.
-
Tooltips
Use default Bootstrap markup to display Tooltips elements. See the Bootstrap documentation for a full list of options and modifiers. View Tooltips on Bootstrap
