Pulse
A trace of purple
"Plus" is a simple color theme that uses purple as its primary color.
This is a theme from the Bootswatch collection for Bootstrap. The original demo is available at https://bootswatch.com/pulse/.
Featured card
Card title
Sub-title in a card
Title 1
Subtitle 3
Title 3
Subtitle 5
Title 5
Subtitle 6
Body paragraph with configured link hue, which may or
may not match the primary brand color. Inline code such
as .button.is-primary or the
--bulma-primary custom property sits within the
running text, so its chip color and padding read against real
multi-line prose rather than in isolation. Following the
third link shows whether link, hover, and
visited states share a tone.
@use ".../variables" as tBlock quotes inherit text color; links inside still follow the theme.
We never share your address.
Theme message
The .is-secondary cells below use this library's
extension colour, added on top of Bulma — see the
Color Palette
docs.
This is a box with a subtle shadow and some padding.
With media
Alice @alice 3 min
Box can wrap a media object to make a comment / user-card style block.
Colors
Sizes
States
Modifiers
.is-outlined
.is-inverted
.is-rounded
.icon + span (icon button)
.is-static
In context
.field.has-addons (icon buttons)
.field.has-addons (input + button)
.buttons.has-addons (segmented control)
.is-fullwidth
A paragraph with a link, strong,
emphasis, inline code, and
strikethrough text. Inline anchors surface the
theme's link hue (Pitfall 8) separately from the heading
color above.
Ordered list:
Unordered list:
Definition list:
A blockquote containing body text and a link inside. Block quotes inherit text color but the inner link should still pick up the theme link hue.
Code block:
function hello() {
return "world";
}
Table inside content:
| Column | Value |
|---|---|
| A | 1 |
| B | 2 |
Text with subscript and superscript.
Colors
Light
Default
| # | Name | Role |
|---|---|---|
| 1 | Alice | Designer |
| 2 | Bob | Developer |
| 3 | Carol | Product |
Modifiers
.is-striped.is-hoverable.is-fullwidth + tfoot
| # | Name | Role |
|---|---|---|
| 1 | Alice | Designer |
| 2 | Bob | Developer |
| 3 | Carol | Product |
| # | Name | Role |
.is-bordered.is-narrow.is-fullwidth
| # | Name | Role |
|---|---|---|
| 1 | Alice | Designer |
| 2 | Bob | Developer |
States
tr.is-selected (selected row)
| # | Name | Role |
|---|---|---|
| 1 | Alice | Designer |
| 2 | Bob | Developer |
| 3 | Carol | Product |
Colors
| Color | Note |
|---|---|
| Default | (no row modifier) |
| Primary | is-primary |
| Secondary | is-secondary |
| Info | is-info |
| Success | is-success |
| Warning | is-warning |
| Danger | is-danger |
| Light | is-light |
| Dark | is-dark |
In context
.input + .button inside td
| # | Name | Action |
|---|---|---|
| 1 | ||
| 2 |
Sizes
Title 1
Title 2
Title 3
Title 4
Title 5
Title 6
Subtitle sizes
Subtitle 1
Subtitle 2
Subtitle 3
Subtitle 4
Subtitle 5
Subtitle 6
Modifiers
.is-spaced on title (adds gap before following subtitle)
Spaced title
Subtitle that follows
(no modifier) (tight subtitle)
Default title
Subtitle that follows
Default
Default card
No header, no image, no footer
Modifiers
.card-header only
With header
Card with a header bar including a header icon.
.card-footer only
With footer
Action items below the body
.card-image only
With card-image
Image strip above the body
.card-image + .card-header + .card-content + .card-footer (full)
Full card
Card title
Image + header + content + footer
In context
.columns.is-one-third (3-column grid)
Card A
Inside .columns is-one-third
Card B
Beside its siblings
Card C
Third card in the row
Colors
Primary
Secondary
Info
Success
Warning
Danger
Without header
Dark
Dark
Modal title
The body of the modal. Place forms, text, or other content here.
Default
Sizes
States
.pagination-previous[disabled]
Modifiers
.is-centered
.is-right
.is-rounded
Default
Colors
Default
Modifiers
.is-boxed
.is-toggle
Colors
Sizes
States
Modifiers
.is-rounded
textarea
In context
.field with label + .control.has-icons + .help (success)
This email is available
.field with label + .control.has-icons + .help (danger)
Invalid characters in the username
.field.has-addons (select + input + button)
Colors
Sizes
States
Modifiers
.is-rounded
.is-multiple
In context
.field with label + .control.has-icons-left
.field.has-addons (select + input)