Bootstrap 4 Components


Colours

Primary
Secondary
Tertiary
Primary Light
Secondary Light
Tertiary Light
Primary Dark
Secondary Dark
Tertiary Dark

Blue
Indigo
Purple
Pink
Red
Orange
Yellow
Green
Teal
Cyan
100
200
300
400
500
600
700
800
900
000
Info
Success
Warning
Danger
Light
Dark
White

Alerts

Additional content

Alerts can also contain additional HTML elements like headings, paragraphs and dividers.

Dismissable Alerts


Badges

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New

Contextual Variations

Primary Secondary Success Danger Warning Info Light Dark

Pill Badges

Primary Secondary Success Danger Warning Info Light Dark

Links

Primary Secondary Success Danger Warning Info Light Dark

Buttons

Regular and Outline

Sizes, state

Active

Block level

Button Group

Nesting button groups