RetailSonar UI kit under construction
Colors
Base colors
$red$orange$blue$teal$purple$violetGradients
$red$blue$purpleGray Scale
$black$gray-dark$gray$gray-light$gray-lighter$gray-lightest$whiteSemantic Colors
$brand-primary$red$brand-success$blue$brand-info$gray-lighter$brand-warning$orange$brand-danger$gray-darkLogo Animation
Lage chained swoosh
Small chained swoosh
Typography
Location intelligence empowering your business — Nunito
Location intelligence empowering your business — Nunito
Location intelligence empowering your business — Nunito
Location intelligence empowering your business — Nunito
Location intelligence empowering your business — Nunito
Location intelligence empowering your business — Nunito
Lead text. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
Running text: Open Sans, font-size: 16px, line-height: 24px. Anchor text, Emphasized text & bold text. This can be considered as regular running text. Sed ullamcorper lacinia ullamcorper. In lacinia leo maximus dapibus hendrerit. Fusce tincidunt in urna sit amet placerat. Quisque quis molestie tellus, et mollis libero. Donec a iaculis velit. Donec viverra turpis quis.
- Unordered
- list
- item
- Ordered
- list
- item
.pb-3
.col-4
h1 Location intelligence empowering your business — Nunito
h2 Location intelligence empowering your business — Nunito
h3 Location intelligence empowering your business — Nunito
h4 Location intelligence empowering your business — Nunito
h5 Location intelligence empowering your business — Nunito
h6 Location intelligence empowering your business — Nunito
p.lead Lead text. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
p.pb-3 <strong>Running text</strong>: Open Sans, font-size: 16px, line-height: 24px. <a href="pa">Anchor text</a>, <em>Emphasized text</em> & <strong>bold text</strong>. This can be considered as regular running text. Sed ullamcorper lacinia ullamcorper. In lacinia leo maximus dapibus hendrerit. Fusce tincidunt in urna sit amet placerat. Quisque quis molestie tellus, et mollis libero. Donec a iaculis velit. Donec viverra turpis quis.
.row
.col-12.col-md-6.p-0
p
ul
li Unordered
li list
li item
.col-12.col-md-6.p-0
p
ol
li Ordered
li list
li item
Badges
new
new
new
new
new
new
new
DefaultPrimarySuccessInfoWarningDanger
DefaultPrimarySuccessInfoWarningDanger
p
h1 #[span(class="badge badge-default") new]
h2 #[span(class="badge badge-default") new]
h3 #[span(class="badge badge-default") new]
h4 #[span(class="badge badge-default") new]
h5 #[span(class="badge badge-default") new]
h6 #[span(class="badge badge-default") new]
p #[span(class="badge badge-default") new]
List Group
Regular
- List Group
- Regular
- Active
- Disabled
.row
.col-4
h5 Anchors
ul.list-group
li.list-group-item List Group
li.list-group-item Regular
li.list-group-item.active Active
li.list-group-item.disabled Disabled
Anchors
.row
.col-4
h5 Anchors
ul.list-group
a.list-group-item(href="#") List Group
a.list-group-item(href="#") Anchors
a.list-group-item.active(href="#") Active
a.list-group-item.list-group-item-action.disabled(href="#") Disabled
Buttons
.row
.col-4
h5 Anchors
ul.list-group
li.list-group-item List Group
li.list-group-item Regular
li.list-group-item.active Active
li.list-group-item.disabled Disabled
button.list-group-item.list-group-item-action(type="button") List Group
button.list-group-item.list-group-item-action(type="button") Buttons
button.list-group-item.list-group-item-action.active(type="button") Active
button.list-group-item.list-group-item-action(type="button", disabled="") Disabled
Buttons
button.btn.btn-sm.btn-primary(type="button") Primary
button.btn.btn-primary(type="button") Primary
button.btn.btn-lg.btn-primary(type="button") Primary
button.btn.btn-sm.btn-outline-primary(type="button") Primary
button.btn.btn-outline-primary(type="button") Primary
button.btn.btn-lg.btn-outline-primary(type="button") Primary
button.btn.btn-sm.btn-secondary(type="button") Secondary
button.btn.btn-secondary(type="button") Secondary
button.btn.btn-lg.btn-secondary(type="button") Secondary
button.btn.btn-sm.btn-outline-secondary(type="button") Secondary
button.btn.btn-outline-secondary(type="button") Secondary
button.btn.btn-lg.btn-outline-secondary(type="button") Secondary
button.btn.btn-sm.btn-success(type="button") Success
button.btn.btn-success(type="button") Success
button.btn.btn-lg.btn-success(type="button") Success
button.btn.btn-sm.btn-outline-success(type="button") Success
button.btn.btn-outline-success(type="button") Success
button.btn.btn-lg.btn-outline-success(type="button") Success
button.btn.btn-sm.btn-info(type="button") Info
button.btn.btn-info(type="button") Info
button.btn.btn-lg.btn-info(type="button") Info
button.btn.btn-sm.btn-outline-info(type="button") Info
button.btn.btn-outline-info(type="button") Info
button.btn.btn-lg.btn-outline-info(type="button") Info
button.btn.btn-sm.btn-warning(type="button") Warning
button.btn.btn-warning(type="button") Warning
button.btn.btn-lg.btn-warning(type="button") Warning
button.btn.btn-sm.btn-outline-warning(type="button") Warning
button.btn.btn-outline-warning(type="button") Warning
button.btn.btn-lg.btn-outline-warning(type="button") Warning
button.btn.btn-sm.btn-danger(type="button") Danger
button.btn.btn-danger(type="button") Danger
button.btn.btn-lg.btn-danger(type="button") Danger
button.btn.btn-sm.btn-outline-danger(type="button") Danger
button.btn.btn-outline-danger(type="button") Danger
button.btn.btn-lg.btn-outline-danger(type="button") Danger
button.btn.btn-sm.btn-link(type="button") Button link
button.btn.btn-link(type="button") Button link
button.btn.btn-lg.btn-link(type="button") Button link
a(href="") Regular link
button.btn.btn-primary(type="submit") Submit button
a.btn.btn-sm.btn-icon
i.icon done
a.btn.btn-icon
i.icon done
a.btn.btn-lg.btn-icon
i.icon done
a.btn.btn-sm.btn-icon.btn-rnd
i.icon done
a.btn.btn-icon.btn-rnd
i.icon done
a.btn.btn-lg.btn-icon.btn-rnd
i.icon done
Button group
.btn-group.btn-group-lg(role='group', aria-label='Basic example') // add .btn-group-vertical to make it vertical, add .btn-group-lg for big buttons and .btn-group-sm for small ones
button.btn.btn-secondary(type='button') Left
button.btn.btn-secondary(type='button') Middle
button.btn.btn-secondary(type='button') Right
.btn-group(role='group')
button#btnGroupDrop1.btn.btn-secondary.dropdown-toggle(type='button', data-toggle='dropdown', aria-haspopup='true', aria-expanded='false') Dropdown
.dropdown-menu(aria-labelledby='btnGroupDrop1')
a.dropdown-item(href='#') Dropdown link
|
a.dropdown-item(href='#') Dropdown link
Dropdowns
.dropdown
button#dropdownMenu1.btn.btn-primary.dropdown-toggle(type="button", data-toggle="dropdown", aria-haspopup="true", aria-expanded="true")
| Dropdown
span.caret
ul.dropdown-menu.dropdown-menu-primary(aria-labelledby="dropdownMenu1")
li
a(href="#") Action
li
a.disabled(href="#") Disabled action
li
a(href="#") Something else here
li.dropdown-divider(role="separator")
li
a(href="#") Separated link
.dropdown
button#dropdownMenu1.btn.btn-secondary.dropdown-toggle(type="button", data-toggle="dropdown", aria-haspopup="true", aria-expanded="true")
| Dropdown
span.caret
ul.dropdown-menu.dropdown-menu-secondary(aria-labelledby="dropdownMenu1")
li
a(href="#") Action
li
a.disabled(href="#") Disabled action
li
a(href="#") Something else here
li.dropdown-divider(role="separator")
li
a(href="#") Separated link
.dropdown
button#dropdownMenu1.btn.btn-success.dropdown-toggle(type="button", data-toggle="dropdown", aria-haspopup="true", aria-expanded="true")
| Dropdown
span.caret
ul.dropdown-menu.dropdown-menu-success(aria-labelledby="dropdownMenu1")
li
a(href="#") Action
li
a.disabled(href="#") Disabled action
li
a(href="#") Something else here
li.dropdown-divider(role="separator")
li
a(href="#") Separated link
.dropdown
button#dropdownMenu1.btn.btn-info.dropdown-toggle(type="button", data-toggle="dropdown", aria-haspopup="true", aria-expanded="true")
| Dropdown
span.caret
ul.dropdown-menu.dropdown-menu-info(aria-labelledby="dropdownMenu1")
li
a(href="#") Action
li
a.disabled(href="#") Disabled action
li
a(href="#") Something else here
li.dropdown-divider(role="separator")
li
a(href="#") Separated link
Forms
Regular Forms
Subtext
.form-group
input#exampleInputEmail1.form-control(type="email", aria-describedby="emailHelp", placeholder="Plane form with placeholder")
.form-group
label(for="exampleInputEmail1") Label
input#exampleInputEmail1.form-control(type="email", aria-describedby="emailHelp", placeholder="Form with placeholder, label and subtext")
small#emailHelp.form-text.text-muted Subtext
.form-group
label(for="exampleInputPassword1") Password
input#exampleInputPassword1.form-control(type="password", placeholder="Password")
.form-group
label(for="exampleSelect1") Select
select#exampleSelect1.form-control
option 1
option 2
option 3
option 4
option 5
.form-group
label(for="exampleSelect2") Multiple select
select#exampleSelect2.form-control(multiple=")
option 1
option 2
option 3
option 4
option 5
.form-group
label(for="exampleTextarea") Textarea
textarea#exampleTextarea.form-control(rows="3")
Validation
Success! You've done it.
Example help text that remains unchanged.
Shucks, check the formatting of that and try again.
Example help text that remains unchanged.
Sorry, that username's taken. Try another?
Example help text that remains unchanged.
.form-group.has-success
input#inputHorizontalSuccess.form-control.form-control-success(type="email", placeholder="name@example.com")
.form-control-feedback Success! You've done it.
small.form-text.text-muted Example help text that remains unchanged.
.form-group.has-warning
input#inputHorizontalWarning.form-control.form-control-warning(type="email", placeholder="name@example.com")
.form-control-feedback Shucks, check the formatting of that and try again.
small.form-text.text-muted Example help text that remains unchanged.
.form-group.has-danger
input#inputHorizontalDnger.form-control.form-control-danger(type="email", placeholder="name@example.com")
.form-control-feedback Sorry, that username's taken. Try another?
small.form-text.text-muted Example help text that remains unchanged.
Form Grid
.row.form-group
.col-12
input#example-text-input.form-control(type="text", value="col-12")
.row.form-group
.col-10
input#example-text-input.form-control(type="text", value="col-10")
.col
input#example-text-input.form-control(type="text", value="col")
.row.form-group
.col-9
input#example-text-input.form-control(type="text", value="col-9")
.col
input#example-text-input.form-control(type="text", value="col")
.row.form-group
.col-8
input#example-text-input.form-control(type="text", value="col-8")
.col
input#example-text-input.form-control(type="text", value="col")
.row.form-group
.col-7
input#example-text-input.form-control(type="text", value="col-7")
.col
input#example-text-input.form-control(type="text", value="col")
.row.form-group
.col-6
input#example-text-input.form-control(type="text", value="col-6")
.col
input#example-text-input.form-control(type="text", value="col")
.row.form-group
.col-5
input#example-text-input.form-control(type="text", value="col-5")
.col
input#example-text-input.form-control(type="text", value="col")
.row.form-group
.col-4
input#example-text-input.form-control(type="text", value="col-4")
.col
input#example-text-input.form-control(type="text", value="col")
.row.form-group
.col-3
input#example-text-input.form-control(type="text", value="col-3")
.col
input#example-text-input.form-control(type="text", value="col")
.row.form-group
.col-2
input#example-text-input.form-control(type="text", value="col-2")
.col
input#example-text-input.form-control(type="text", value="col")
Inline Forms
.form-group.row
label.col-2.col-form-label(for="example-text-input") Text
.col-10
input#example-text-input.form-control(type="text", value="Artisanal kale")
.form-group.row
label.col-2.col-form-label(for="example-search-input") Search
.col-10
input#example-search-input.form-control(type="search", value="How do I shoot web")
.form-group.row
label.col-2.col-form-label(for="example-email-input") Email
.col-10
input#example-email-input.form-control(type="email", value="bootstrap@example.com")
.form-group.row
label.col-2.col-form-label(for="example-url-input") URL
.col-10
input#example-url-input.form-control(type="url", value="https://getbootstrap.com")
.form-group.row
label.col-2.col-form-label(for="example-tel-input") Telephone
.col-10
input#example-tel-input.form-control(type="tel", value="1-(555)-555-5555")
.form-group.row
label.col-2.col-form-label(for="example-password-input") Password
.col-10
input#example-password-input.form-control(type="password", value="hunter2")
.form-group.row
label.col-2.col-form-label(for="example-number-input") Number
.col-10
input#example-number-input.form-control(type="number", value="42")
.form-group.row
label.col-2.col-form-label(for="example-datetime-local-input") Date and time
.col-10
input#example-datetime-local-input.form-control(type="datetime-local", value="2011-08-19T13:45:00")
.form-group.row
label.col-2.col-form-label(for="example-date-input") Date and time
.col-5
input#example-date-input.form-control(type="date", value="2011-08-19")
.col-5
input#example-time-input.form-control(type="time", value="13:45:00")
.form-group.row
label.col-2.col-form-label(for="example-month-input") Month
.col-10
input#example-month-input.form-control(type="month", value="2011-08")
.form-group.row
label.col-2.col-form-label(for="example-week-input") Week
.col-10
input#example-week-input.form-control(type="week", value="2011-W33")
.form-group.row
label.col-2.col-form-label(for="example-color-input") Color
.col-10
input#example-color-input.form-control(type="color", value="#563d7c")
Forms Addons
@
@example.com
$
.00
https://example.com/users/
@
@
@
+32
+32
.input-group
span#basic-addon1.input-group-addon @
input.form-control(type="text", placeholder="Username", aria-describedby="basic-addon1")
.input-group
input.form-control(type="text", placeholder="Recipient"s username", aria-describedby="basic-addon2")
span#basic-addon2.input-group-addon @example.com
.input-group
span.input-group-addon $
input.form-control(type="text", aria-label="Amount (to the nearest dollar)")
span.input-group-addon .00
label(for="basic-url") Your vanity URL
.input-group
span#basic-addon3.input-group-addon https://example.com/users/
input#basic-url.form-control(type="text", aria-describedby="basic-addon3")
.input-group.input-group-lg
span#sizing-addon1.input-group-addon @
input.form-control(type="text", placeholder="Username", aria-describedby="sizing-addon1")
.input-group
span#sizing-addon2.input-group-addon @
input.form-control(type="text", placeholder="Username", aria-describedby="sizing-addon2")
.input-group.input-group-sm
span#sizing-addon3.input-group-addon @
input.form-control(type="text", placeholder="Username", aria-describedby="sizing-addon3")
.row
.col-lg-6
span.input-group-addon
input(type="checkbox", aria-label="...")
|
input.form-control(type="text", aria-label="...", placeholder="Placeholder")
.col-lg-6
span.input-group-addon
input(type="radio", aria-label="...")
|
input.form-control(type="text", aria-label="...", placeholder="Placeholder")
.col-lg-6
.input-group
.input-group-btn
button.btn.btn-secondary.dropdown-toggle(type="button", data-toggle="dropdown", aria-haspopup="true", aria-expanded="false")
| Action
span.caret
ul.dropdown-menu
li
a(href="#") Action
li
a(href="#") Another action
li
(href="#") Something else here
li.divider(role="separator")
li
a(href="#") Separated link
|
input.form-control(type="text", aria-label="...", placeholder="Placeholder")
@
@
@
.input-group.input-group-lg
input.form-control(type='text', placeholder='Username', aria-describedby='sizing-addon1')
.input-group-btn
button.btn(type='button') Button
.input-group
input.form-control(type='text', placeholder='Username', aria-describedby='sizing-addon2')
.input-group-btn
button.btn(type='button') Button
.input-group.input-group-sm
input.form-control(type='text', placeholder='Username', aria-describedby='sizing-addon3')
.input-group-btn
button.btn(type='button') Button
.input-group.input-group-lg
span#sizing-addon1.input-group-addon @
|
input.form-control(type='text', placeholder='Username', aria-describedby='sizing-addon1')
.input-group-btn
button.btn(type='button') Button
.input-group
span#sizing-addon2.input-group-addon @
|
input.form-control(type='text', placeholder='Username', aria-describedby='sizing-addon2')
.input-group-btn
button.btn(type='button') Button
.input-group.input-group-sm
span#sizing-addon3.input-group-addon @
|
input.form-control(type='text', placeholder='Username', aria-describedby='sizing-addon3')
.input-group-btn
button.btn(type='button') Button
Miscellaneous
This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.
.form-group
label(for="exampleInputFile") File input
input#exampleInputFile.form-control-file(type="file", aria-describedby="fileHelp")
small#fileHelp.form-text.text-muted This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.
Radio Buttons
.form-check
label.form-check-label
input#optionsRadios1.form-check-input(type="radio", name="optionsRadios", value="option1", checked="")
| Checked radio button
.form-check
label.form-check-label
input#optionsRadios2.form-check-input(type="radio", name="optionsRadios", value="option2")
| Unchecked radio button
.form-check.disabled
label.form-check-label
input#optionsRadios3.form-check-input(type="radio", name="optionsRadios", value="option3", disabled="")
| Disabled radio button
.form-check.disabled
label.form-check-label
input#optionsRadios3.form-check-input(type="radio", name="optionsRadios", value="option3", disabled="", checked="")
| Disabled radio button checked
.form-check
label.custom-control.custom-radio
input#radio1.custom-control-input(name="radio", type="radio", checked)
span.custom-control-indicator
|
span.custom-control-description Checked custom radio
.form-check
label.custom-control.custom-radio
input#radio2.custom-control-input(name="radio", type="radio")
span.custom-control-indicator
|
span.custom-control-description Unchecked custom radio
.form-check
label.custom-control.custom-radio
input#radio2.custom-control-input(name="radio", type="radio", disabled)
span.custom-control-indicator
|
span.custom-control-description Disabled custom radio
.form-check
label.custom-control.custom-radio
input#radio2.custom-control-input(name="radio", type="radio", disabled, checked)
span.custom-control-indicator
|
span.custom-control-description Disabled custom radio checked
Checkboxes
.form-check
label.form-check-label
input.form-check-input(type="checkbox", checked)
| Checked checkbox
.form-check
label.form-check-label
input#checkboxSuccess.form-check-input(type="checkbox", value="option1")
| Unchecked checkbox
.form-check
label.form-check-label
input#checkboxWarning.form-check-input(type="checkbox", value="option1", disabled)
| Disabled checkbox
.form-check
label.form-check-label
input#checkboxWarning.form-check-input(type="checkbox", value="option1", disabled, checked)
| Disabled checkbox checked
.form-check
label.custom-control.custom-checkbox
input.custom-control-input(type="checkbox", checked)
span.custom-control-indicator
span.custom-control-description Checked custom checkbox
.form-check
label.custom-control.custom-checkbox
input.custom-control-input(type="checkbox")
span.custom-control-indicator
span.custom-control-description Unchecked custom checkbox
.form-check
label.custom-control.custom-checkbox
input.custom-control-input(type="checkbox", disabled)
span.custom-control-indicator
span.custom-control-description Disabled checkbox
.form-check
label.custom-control.custom-checkbox
input.custom-control-input(type="checkbox", disabled, checked)
span.custom-control-indicator
span.custom-control-description Disabled checkbox checked
.form-check.has-success
label.custom-control.custom-checkbox
input.custom-control-input(type="checkbox", checked)
span.custom-control-indicator
span.custom-control-description Success checkbox
.form-check.has-warning
label.custom-control.custom-checkbox
input.custom-control-input(type="checkbox", checked)
span.custom-control-indicator
span.custom-control-description Warning checkbox
.form-check.has-danger
label.custom-control.custom-checkbox
input.custom-control-input(type="checkbox", checked)
span.custom-control-indicator
span.custom-control-description Danger checkbox
Switches
label.switch.switch-sm
input(type='checkbox')
.switch-slider
label.switch
input(type='checkbox')
.switch-slider
label.switch.switch-lg
input(type='checkbox')
.switch-slider
label.switch.switch-yesno.switch-sm
input(type='checkbox')
.switch-slider
label.switch.switch-yesno
input(type='checkbox')
.switch-slider
label.switch.switch-yesno.switch-lg
input(type='checkbox')
.switch-slider
label.switch.switch-sm.switch-warning
input(type='checkbox')
.switch-slider
label.switch.switch-warning
input(type='checkbox')
.switch-slider
label.switch.switch-lg.switch-warning
input(type='checkbox')
.switch-slider
Icons
Check Material icons for the full reference.
businesschatlocation_onsendnetwork_wifi
i.icon.icon-large business
i.icon.icon-large chat
i.icon.icon-large location_on
i.icon.icon-large send
i.icon.icon-large network_wifi
Alerts
Text with a link
Text with a link
Text with a link
Text with a link
.alert.alert-success(role="alert") Text with a <a class="alert-link" href="#">link</a>
.alert.alert-info(role="alert") Text with a <a class="alert-link" href="#">link</a>
.alert.alert-warning(role="alert") Text with a <a class="alert-link" href="#">link</a>
.alert.alert-danger(role="alert") Text with a <a class="alert-link" href="#">link</a>
Dismissable alert with a link
Dismissable alert with a link
Dismissable alert with a link
Dismissable alert with a link
.alert.alert-success.alert-dismissible(role="alert")
button.close(type="button", data-dismiss="alert", aria-label="Close")
span(aria-hidden="true") ×
| Dismissable alert with a <a class="alert-link" href="#">link</a>
.alert.alert-info.alert-dismissible(role="alert")
button.close(type="button", data-dismiss="alert", aria-label="Close")
span(aria-hidden="true") ×
| Dismissable alert with a <a class="alert-link" href="#">link</a>
.alert.alert-warning.alert-dismissible(role="alert")
button.close(type="button", data-dismiss="alert", aria-label="Close")
span(aria-hidden="true") ×
| Dismissable alert with a <a class="alert-link" href="#">link</a>
.alert.alert-danger.alert-dismissible(role="alert")
button.close(type="button", data-dismiss="alert", aria-label="Close")
span(aria-hidden="true") ×
| Dismissable alert with a <a class="alert-link" href="#">link</a>
Progress
Modals
a.btn(href='#', data-toggle='modal', data-target='#modalID') The Basic Modal
#modalID.modal.fade(tabindex='-1', role='dialog', aria-labelledby='modalID', aria-hidden='true')
.modal-dialog // add .modal-sm for small dialogs or .modal-lg for large ones
.modal-content
.modal-header
h5#myModalLabel.modal-title Basic Modal
button.close(type='button', data-dismiss='modal', aria-hidden='true') ×
.modal-body
.container-fluid
.row
.col-6.p-0
h5 Popover in a modal
p
| This
a.btn.btn-secondary.btn-sm(data-container='body', data-toggle='popover', data-placement='top', data-content='Vivamus sagittis lacus vel augue laoreet rutrum faucibus.') button
| triggers a popover on click.
.col-6.p-0
h5 Tooltips in a modal
p
a(href='', data-toggle='tooltip', data-placement='top', title='Tooltip on top') This link
| and
a(href='', data-toggle='tooltip', data-placement='bottom', title='Tooltip on top') that link
have tooltips on hover.
.modal-footer
button.btn.btn-default(type='button', data-dismiss='modal') Close
button.btn.btn-primary(type='button') Save changes
Tooltips
a(href='', data-toggle='tooltip', data-placement='top', title='Tooltip on top') Tooltip on top
a(href='', data-toggle='tooltip', data-placement='right', title='Tooltip on right') Tooltip on right
a(href='', data-toggle='tooltip', data-placement='bottom', title='Tooltip on bottom') Tooltip on bottom
a(href='', data-toggle='tooltip', data-placement='left', title='Tooltip on left') Tooltip on left
a(href='', data-toggle='tooltip', data-html='true', title='<em>Tooltip</em> <u>with</u> <b>HTML</b>') Tooltip with HTML
Popovers
button.btn.btn-secondary(type='button', data-container='body', data-toggle='popover', data-placement='top', data-content='Vivamus sagittis lacus vel augue laoreet rutrum faucibus.') Popover on top
button.btn.btn-secondary(type='button', data-container='body', data-toggle='popover', data-placement='right', data-content='Vivamus sagittis lacus vel augue laoreet rutrum faucibus.') Popover on right
button.btn.btn-secondary(type='button', data-container='body', data-toggle='popover', data-placement='bottom', data-content='Vivamus sagittis lacus vel augue laoreet rutrum faucibus.') Popover on bottom
button.btn.btn-secondary(type='button', data-container='body', data-toggle='popover', data-placement='left', data-content='Vivamus sagittis lacus vel augue laoreet rutrum faucibus.') Popover on left
Tables
Table striped + hover
| # | First Name | Last Name |
|---|---|---|
| 1 | Mark | Otto |
| 2 | Jacob | Thornton |
| 3 | Larry | the Bird |
Table striped even + head accent + hover
| # | First Name | Last Name |
|---|---|---|
| 1 | Mark | Otto |
| 2 | Jacob | Thornton |
| 3 | Larry | the Bird |
Table inverse + hover
| # | First Name | Last Name |
|---|---|---|
| 1 | Mark | Otto |
| 2 | Jacob | Thornton |
| 3 | Larry | the Bird |
Table head inverse + hover
| # | First Name | Last Name |
|---|---|---|
| 1 | Mark | Otto |
| 2 | Jacob | Thornton |
| 3 | Larry | the Bird |
Table bordered
| # | First Name | Last Name |
|---|---|---|
| 1 | Mark | Otto |
| 2 | Jacob | Thornton |
| 3 | Larry the Bird | |
Table small
| # | First Name | Last Name |
|---|---|---|
| 1 | Mark | Otto |
| 2 | Jacob | Thornton |
| 3 | Larry the Bird | |
Table with buttons
| Name | Action | Round action | Round icon action | Square icon action |
|---|---|---|---|---|
| Mark | table button | table button | send | done |
| Jacob | table button | table button | send | done |
| 3 | table button | table button | send | done |
Table colored rows
| # | First Name | Last Name |
|---|---|---|
| 1 | Mark | Otto |
| 1 | Clear | Clear |
| 2 | Jacob | Thornton |
| 1 | Clear | Clear |
| 3 | Larry the Bird | |
| 1 | Clear | Clear |
| 3 | Larry the Bird | |
| 1 | Clear | Clear |
| 3 | Larry the Bird | |
Table colored cells
| # | First Name | Last Name |
|---|---|---|
| 1 | Mark | Otto |
| 2 | Jacob | Thornton |
| 3 | Larry the Bird | |
| 3 | Larry the Bird | |
| 3 | Larry the Bird | |
Table responsive
| # | First Name | Last Name | Larry the Bird | |
|---|---|---|---|---|
| 1 | Mark | Otto | Larry the Bird | |
| 1 | Clear | Clear | Larry the Bird | |
| 2 | Jacob | Thornton | Larry the Bird | |
| 1 | Clear | Clear | Larry the Bird | |
| 3 | Larry the Bird | Larry the Bird | ||
| 1 | Clear | Clear | Larry the Bird | |
| 3 | Larry the Bird | Larry the Bird | ||
| 1 | Clear | Clear | Larry the Bird | |
| 3 | Larry the Bird | Larry the Bird | ||
table.table // add .table-hover to add pointer actions, .table-striped for unevenly striped rows, .table-striped-even to add evenly striped rows, .table-inverse to invert the table colors, and .table-bordered to put a border around the table, and .table-responsive to make it horizontally scrollable on smaller sizes.
thead // add .thead-inverse to inverse the header,
tr
th #
th First Name
th Last Name
th Username
tbody
tr // add .table-active, .table-success, .table-warning, .table-danger, .table-info to add a color to the row
th(scope="row") 1
td Mark // add .table-active, .table-success, .table-warning, .table-danger, .table-info to add a color to the cell
td Otto
td @mdo
tr
th(scope="row") 2
td Jacob
td Thornton
td @fat
tr
th(scope="row") 3
td Larry
td the Bird
td @twitter
Pagination
nav(aria-label='Page navigation example')
ul.pagination
li.page-item.disabled
a.page-link(href='#', tabindex='-1') Previous
li.page-item
a.page-link(href='#') 1
li.page-item.active
a.page-link(href='#')
| 2
span.sr-only (current)
li.page-item
a.page-link(href='#') 3
li.page-item
a.page-link(href='#') Next
nav(aria-label='Page navigation example')
ul.pagination (+ .pagination-lg or .pagination-sm) (+ .justify-content-center or .justify-content-end)
li.page-item
a.page-link(href='#', aria-label='Previous')
span(aria-hidden='true') «
|
Previous\n"li.page-item
a.page-link(href='#') 1
li.page-item
a.page-link(href='#') 2
li.page-item
a.page-link(href='#') 3
li.page-item
a.page-link(href='#', aria-label='Next')
span(aria-hidden='true') »
|
span.sr-only Next
Grid
Three equal columns
.col-md-4 three equal columns, stacked on mobile
.col-md-4 three equal columns, stacked on mobile
.col-md-4 three equal columns, stacked on mobile
Three unequal columns
.col-md-3 two unequal columns, stacked on mobile
.col-md-9 two unequal columns, stacked on mobile
Full width, single column
No grid classes are necessary for full-width elements.
Two columns with two nested columns
.col-md-8 first row, stacked on mobile
.col-md-6 second row, stacked on mobile
.col-md-6 second row, stacked on mobile
.col-md-4 first row, stacked on mobile
Mixed: mobile and desktop
.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6
Mixed: mobile, tablet, and desktop
.col-xs-12 .col-sm-6 .col-lg-8
.col-xs-6 .col-lg-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
Offset, push, and pull resets
Reset offsets, pushes, and pulls at specific breakpoints.
.col-5
.col-5.offset-2
.col-5
.col-2.offset-sm-1.offset-md-2.offset-lg-3
.col-sm-5 .col-md-6
.col-sm-5.offset-sm-2.col-md-6.offset-md-0
.col-sm-6.col-md-5.col-lg-6
.col-sm-6.col-md-5.offset-md-2.col-lg-6.offset-lg-0