Fhenix Africa - Modern & Multipurpose Bootstrap 5 Template

Image Background

Content goes here

.image-wrapper class enables background-attachment: fixed; to disable image from scrolling with the page; along with background-size: cover; which scales the image as large as possible to fill the container. You can use the following classes along with .image-wrapper to change these behaviors:

.bg-auto Disables fixed background, changes background-size to auto.
.bg-full Disables fixed background, changes background-size to 100%.
.bg-cover Disables fixed background, but keeps background-size as cover.

To add overlay on the background images use .bg-overlay class:

.bg-overlay Adds 50% overlay.
.bg-overlay.bg-overlay-300 Adds 30% overlay.
.bg-overlay.bg-overlay-400 Adds 40% overlay.

View example's code

<section class="wrapper image-wrapper bg-image bg-overlay text-white" data-image-src="./assets/img/photos/bg1.jpg"></section>
  
<section class="wrapper image-wrapper bg-image bg-full bg-overlay text-white" data-image-src="./assets/img/photos/bg1.jpg"></section>

Dark Background

Content goes here

View example's code

<section class="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.

Content goes here

View example's code

<section class="wrapper gradient-3 text-white"></section>
  
<section class="wrapper bg-gradient-primary text-white"></section>
  
<section class="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.

Content goes here

View example's code

<section class="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.

Content goes here

View example's code

<section class="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.

Content goes here

View example's code

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

Pattern Background

Content goes here

View example's code

<section class="wrapper pattern-wrapper bg-image text-white" data-image-src="./assets/img/pattern.png"></section>

Video Background

Content goes here

View example's code

<section class="video-wrapper bg-overlay ratio ratio-16x9">
  <video poster="./assets/img/photos/movie2.jpg" src="./assets/media/movie2.mp4" autoplay loop playsinline muted></video>
  <div class="video-content">
    <div class="container text-center">
      <h2 class="display-5 mb-0 text-white text-center">Content goes here</h2>
    </div>
    <!-- /.container -->
  </div>
  <!-- /.video-content -->
</section>

Usage

Styleguide

Elements

Background

Image Background

Content goes here

Dark Background

Content goes here

Gradient Background

Content goes here

Content goes here

Color Background

Content goes here

Soft Background

Content goes here

Pale Background

Content goes here

Pattern Background

Content goes here

Video Background

Content goes here

Think unique and be creative. Make a difference with Fhenix Africa.