Background

Image Background

<section
  className="wrapper image-wrapper bg-image bg-overlay text-white"
  style={{ backgroundImage: 'url(/img/photos/bg1.jpg)' }}
></section>

<section
  className="wrapper image-wrapper bg-image bg-full bg-overlay text-white"
  style={{ backgroundImage: 'url(/img/photos/bg1.jpg)' }}
></section>

Dark Background

<section className="wrapper bg-dark text-white"></section>

Gradient Background

Available options:

.gradient-1, .gradient-2, .gradient-3, .gradient-4, .gradient-5, .gradient-6, .gradient-7,

bg-gradient-primary, bg-gradient-aqua, bg-gradient-green, bg-gradient-leaf, bg-gradient-navy, bg-gradient-orange, bg-gradient-pink, bg-gradient-purple, bg-gradient-red, bg-gradient-violet, bg-gradient-yellow, bg-gradient-fuchsia, bg-gradient-sky, bg-gradient-grape, bg-gradient-reverse-primary, bg-gradient-reverse-aqua, bg-gradient-reverse-green, bg-gradient-reverse-leaf, bg-gradient-reverse-navy, bg-gradient-reverse-orange, bg-gradient-reverse-pink, bg-gradient-reverse-purple, bg-gradient-reverse-red, bg-gradient-reverse-violet, bg-gradient-reverse-yellow, bg-gradient-reverse-fuchsia, bg-gradient-reverse-sky, bg-gradient-reverse-grape.

<section className="wrapper gradient-3 text-white"></section>
<section className="wrapper bg-gradient-primary text-white"></section>
<section className="wrapper bg-gradient-reverse-primary text-white"></section>

Color Background

Available options:

bg-white, bg-primary, bg-aqua, bg-green, bg-leaf, bg-navy, bg-orange, bg-pink, bg-purple, bg-red, bg-violet, bg-yellow, bg-fuchsia, bg-sky, bg-grape.

<section className="wrapper bg-primary text-white"></section>

Soft Background

Available options:

bg-soft-primary, bg-soft-aqua, bg-soft-green, bg-soft-leaf, bg-soft-navy, bg-soft-orange, bg-soft-pink, bg-soft-purple, bg-soft-red, bg-soft-violet, bg-soft-yellow, bg-soft-fuchsia, bg-soft-sky, bg-soft-grape.

<section className="wrapper bg-soft-primary"></section>

Pale Background

Available options:

bg-pale-primary, bg-pale-aqua, bg-pale-green, bg-pale-leaf, bg-pale-navy, bg-pale-orange, bg-pale-pink, bg-pale-purple, bg-pale-red, bg-pale-violet, bg-pale-yellow, bg-pale-fuchsia, bg-pale-sky, bg-pale-grape.

<section className="wrapper bg-pale-primary"></section>

Pattern Background

<section
  className="wrapper pattern-wrapper bg-image text-white"
  style={{ backgroundImage: 'url(/img/pattern.png)' }}
></section