Alerts

Examples

• Alert div.alert.alert-(primary|secondary|success|danger|warning|info|light|dark) Attribute
  • Accessibility attribute role="alert"
  • Any elements: e.g. heading h(1|2|3|...).alert-heading
  • Link a.alert-link
  • etc.

div.alert.alert-primary

div.alert.alert-secondary

div.alert.alert-success

div.alert.alert-danger

div.alert.alert-warning

div.alert.alert-info

div.alert.alert-light

div.alert.alert-dark

Additional content

Example using various-size headings, paragraphs, and a horizontal rule.

Dismissing

• div.alert.alert-(primary|secondary|...) Attribute
  • (Optional) fade-out effect .fade.show
  • Alert content
  • Close button button.close Attributes
    • Atrribute type="button"
    • Atrribute data-dismiss="alert"
    • Accessibility atrribute aria-label="Close"
    • For accessibility span Attribute
      • Accessibility atrribute aria-hidden="true"
      • Text ×

Badges

Examples

Used in headings

h1 Heading New

h2 Heading New

h3 Heading New

h4 Heading New

h5 Heading New

h6 Heading New

Used inside a button

Notifications5unread messages

• button.btn.btn-primary
• Text Notifications
• Badge span.badge.badge-light Attribute
  • Left margin ml-2
  • Text 5
• Optional (for accessibility) span.sr-only
  • Text unread messages

Contextual variations

span.badge.badge-(primary|secondary|success|danger|warning|info|light|dark)

Primary Secondary Success Danger Warning Info Light Dark 

Pill badges

span.badge.badge-pill.badge-(primary|secondary|success|danger|warning|info|light|dark)

Primary Secondary Success Danger Warning Info Light Dark 

Links

a.badge.badge-(primary|secondary|success|danger|warning|info|light|dark)

Primary Secondary Success Danger Warning Info Light Dark 

Breadcrumb

Breadcrumb indicates current page's location within a navigational hierarchy.

Structure

• Parent wrapper (for accessibility) nav Attribute
• Accessibility attribute aria-label="breadcrumb"
• Breadcrumb ol.breadcrumb
• Item with link li.breadcrumb-item
  • Link a Attribute
    • Attribute href="..."
    • Text e.g. Home
• Current position (last, no link) li.breadcrumb-item.active Attribute
  • Accessibility attribute aria-current="page"
  • Text e.g. Data

Examples

Changing the separator

If you want to change the separator symbol ( "/" as default), you can append a short CSS as below at the end of head block (used in this page).

.breadcrumb-item + .breadcrumb-item::before { content: "\00bb" }

(Advanced) you can also customize bootstrap.css from Sass source files. See Customizing from Sass source code for detail.

Finally, below is the real breadcrumb of this page.