Vitality is a one page website theme built on the Bootstrap framework.

Thank you for purchasing Vitality! These docs provide usage instructions for the various components built into the theme. If you run into any other problems with the theme, or encounter any bugs, please contact Start Bootstrap Themes directly through the contact form on our profile page at WrapBootstrap here:

What's Included

Vitality comes with five different prebuilt sample pages for various types of websites along with ten color schemes.

Vitality is a flexible theme and comes with five different website samples and ten color schemes to start with. The theme also includes LESS files for deeper customization, a working contact form, and a variety of powerful jQuery plugins.


The following plugins are used in the Vitality theme. For more detailed usage instructions for each plugin, please visit the plugin website using the links provided below.

A CSS plugin for CSS animations.
Bootstrap 4
Bootstrap is the most popular HTML, CSS, and JS framework in the world for building responsive, mobile-first projects on the web.
Font Awesome
The iconic font and CSS toolkit.
Magnific Popup
A responsive lightbox & dialog script with focus on performance and providing best experience for user with any device.
A high-performance, dependency-free library for animated filtering, sorting, insertion, removal and more...
Owl Carousel (Legacy Version)
A touch enabled jQuery plugin that lets you create beautiful responsive carousel sliders.
jq Bootstrap Validation
A jQuery valdiation plugin for Bootstrap forms.
Easy as hell jQuery plugin for video backgrounds.
A jQuery plugin for reveal animations when you scroll.

Updating Plugins

Updating a plugin to a newer version may causes some elements in the theme to malfunction. Please contact Start Bootstrap Themes if you are having a problem updating a plugin and we will update the theme.

Color Schemes

Vitality comes built with 10 different color schemes. Each color scheme has it's own CSS file associated with it. After you've picked a color scheme, make sure to uncomment it within the <head> tag. You can use any of the following color schemes:

  • <link href="css/vitality-red.css" rel="stylesheet" type="text/css">
  • <link href="css/vitality-aqua.css" rel="stylesheet" type="text/css">
  • <link href="css/vitality-blue.css" rel="stylesheet" type="text/css">
  • <link href="css/vitality-green.css" rel="stylesheet" type="text/css">
  • <link href="css/vitality-orange.css" rel="stylesheet" type="text/css">
  • <link href="css/vitality-pink.css" rel="stylesheet" type="text/css">
  • <link href="css/vitality-purple.css" rel="stylesheet" type="text/css">
  • <link href="css/vitality-tan.css" rel="stylesheet" type="text/css">
  • <link href="css/vitality-turquoise.css" rel="stylesheet" type="text/css">
  • <link href="css/vitality-yellow.css" rel="stylesheet" type="text/css">

Use Only One Stylesheet

Make sure to only use one of the 10 available stylesheets available!


The Vitality header comes with two options. You can either use a background image or a background video.

Background Image

The first option for the Vitality header is the use of a background image. The header background image in the sample templates are set using inline CSS directly in the document.

To edit the header image, change the path of the background image in the <header> tag. Make sure your image path is correct.

Example: <header style="background-image: url('img/agency/backgrounds/bg-header.jpg')">.

Background Image Style & Dimensions

All of the images in the theme samples were edited in Photoshop to have a dark overlay. For optimial legibility on the foreground content, we recommend giving all background images a 50% opacity, black overlay or decreasing the brightness on the image.

Our recommended image dimensions for background images is 1500x1000 pixels.

Background Video

To configure a background video for your header you will need to configure the Vide JS plugin in the vitality.js file. You must also be using the header structure used in the video.html sample file which adds a special class to the header element. You will also want to edit the file path of the mobile fallback image.

Example: Edit the poster and mp4 file paths in the vitality.js file. Supported file formats are mp4, ogg, and webm. For more information on using the Video JS plugin, visit

// Vide - Video Background Settings
    mp4: "mp4/camera.mp4",
    poster: "img/agency/backgrounds/bg-mobile-fallback.jpg"
}, {
    posterType: 'jpg'

Video Compression Tip

When you're using a background video for your header, you want to keep the file size as small as possible so you don't have pauses or stuttering in your video as it plays in the background. A great, open source tool you can use is a program called Handbrake. To compress your video, download Handbrake and run your video through the program with the "Web Optimized" box checked. It can convert a 20MB mp4 video file down to 2MB without quality loss!

Contact Form

Vitality includes a working contact form. All of the sample pages, except for the culinary.html sample, include a contact form. In order to activate the form, follow these directions:

  • Open the mail/contact_me.php file.
  • On line 19, enter the email address you want mail sent to. $to = ''; // *REPLACE WITH THE EMAIL ADDRESS YOU WANT THE FORM TO SEND MAIL TO*
  • On line 22, enter the email address you want messages sent to you to be from. $headers = "From:\n"; // *REPLACE WITH THE EMAIL ADDRESS YOU WANT THE MESSAGE TO BE FROM*. Typically, an email address like will work here.
  • Save, and upload the file.

Adding Fields to the Contact Form

If you want to add fields to the contact form, you will need to edit the mail/contact_me.php file as well as the js/contact_me.js file. Requires basic working knowledge of PHP and JavaScript.

If Your Form Isn't Working

If you have followed the instructions above, and uploaded your website to a live server and the form is still not working then it is likely that your web host is blocking the form from sending messages. In order to troubleshoot form functionality after it's been uploaded it is best to contact your server administrator or web host to see if there are permissions or security features preventing the form from sending, or if the version of PHP on your web server is not compatible with the form scripts.

MailChimp Signup Form

Vitality now comes with a call to action box that has a built-in MailChimp signup form. All you need to do in order to activate this feature is include your MailChimp form action within the template! Below are the steps on how to do this.

  1. Log into your MailChimp account.
  2. Go to your lists. This is usually a link on the top menu bar called "Lists"
  3. You will now see your subscriber lists on the screen. On the right hand side of the list there will be a button that says "Stats" and a dropdown arrow. Click on the dropdown arrow to open a menu and select "Signup forms."
  4. Click on the second option that says "Embedded forms"
  5. The embedded forms has multiple formats, but we only need the form action! To get the form action select the "Naked" form option. The other options are Classic, Super Slim, and Advanced.
  6. Once you see the "Naked" form option you will see a preview and an embed code. Copy the embed code and paste it into a blank Notepad or text editor document. The code will have a <form action="...">. Copy the contents of the form action that is between the quotations, and drop the form action URL into the Vitality template you're using!
  7. Now the form should be working. You can test it by entering an email address and hitting the subscribe button. It should take you to a new window notifying you that you've signed up for the mailing list.

Not Using MailChimp?

If you aren't using MailChimp you can still use the signup form HTML. Just delete references to the MailChimp scripts and use the remaining HTML as a template for your different signup method!

Smooth Page Scrolling

As a one page theme, the smooth page scrolling feature is a great way to let your users navigation your content while being contsantly aware of where they are on the page. In order to use the page scroll content, you need a few things. You need a link that you want users to click on to bring them to a section, a unique ID set for the section you want to navigation to, and the page-scroll class added to the link itself.

Here is an example of what a link needs in order to scroll to a section:

<a href="#link" class="page-scroll">Link Text</a>

Note the page-scroll class being added to the link. For a more detailed example, see the links in the navigation bar within any of the samples!

Here is an example of what your section should look like that you're linking to with the above link example:

<section id="link">...</section>

Note that the section's ID matches the link's destination!

Adding Portfolio Items

The Vitality theme comes built-in with 4 modal windows that open up as individual portfolio items. If you are using the full width portfolio carousel, then the 4 modal windows correspond with the four different slides. If you choose to use the portfolio grid, then you may want to add more portfolio item modals to your theme!

If you want to add more items to your theme, the first step is to copy one of the example modals, and paste it as many times as you want (depending on the number of portfolio items you have). Next, you will want to copy some of the portfolio items in the preview area (either the full screen carousel slides, or the individual portfolio items on the grid) and create as many as you would like.

Once you have your portfolio items copied, and the modals copied, you will need to connect the two. If you look at the example modals, you will see that the portfolio items will reference an ID in the link tag. For example, you will see the items reference href="#portfolioModal1" in the link tag. You will then see at the bottom of the HTML, the modal windows themselves have ID's attached to them. For example, id="portfolioModal1". All you need to do when adding more items is make sure the link tag and the ID on the portfolio modal match. In the theme, you are given ID's 1-4 to work with, so it's reccomended to go to 5, 6, 7 and on when making new modals. Again, just make sure the link tag and the modal ID match for each portfolio item you're making!

Email Support

If you run into problems, bugs, or have general questions about the theme, please feel free to email us using the form on our WrapBootstrap profile page at and we will attempt to answer your questions. We also offer custom design services if you are looking for a customized version of this theme (custom design services are not included with purchase).

Once again, thank you for choosing Vitality, and we wish you the best of luck on many projects to come!

Updating Your Version

Start Bootstrap Themes is always adding new features and making improvements to Vitality! That being said, whenever the theme is updated you will want to update your own website. Referenced below are some changes you might need to make to your own theme if you choose to use the updated files:

Upgrading to 2.0.0

Vitality 2.0.0 features Bootstrap 4 and includes a number of breaking changes. For migration, the best possible course is to take one of the new version 2.0.0 example themes and insert your custom code. Here is a list of the major changes in version 2.0.0!

  • Bootstrap 4 Framework Added
  • CSS and LESS cleanup with new, more intuitive class names
  • Plugins updated to newest version and JS revised
  • Alternate Body Styles removed
  • Sweeping changes throughout the HTML to adjust class names for Bootstrap 4

Upgrading to 1.4.0+

In 1.4.0 the main change to the template was the removal of the classie.js and cbpAnimatedHeader.js plugins in favor of a script dropped into the vitality.js file. To update, simply update your vitality.js file with the 1.4.0 version and remove the classie.js and cbpAnimatedHeader.js files from your HTML, and you can delete them from the js directory.

If you are using the Video template to have a background video play on your page, the jQuery plugin being used was changed in version 1.4.0. In order to make this change, you can delete everything in the vendor/formstone directory and remove the links to those files from your HTML. After this, you'll need to add the vendor/vide/jquery.vide.min.js file to your plugin scripts at the bottom of your HTML, and add the necessary scripts to initialize vide into your vitality.js file. In the demo, you can see the necesarry JS in lines 111-117.

Upgrading to 1.3.3+

In version 1.3.3, a new class was added to distinguish between regular links and links that allow the page to smooth scroll to an anchor point. The best example of this is shown in the navigation menu. Make sure to update any of your links that scroll somewhere on the page by adding the .page-scroll class to them. Below is an example of what a menu bar link looks like in 1.3.x and what the new format is in 1.3.3. Use the below information, along with the theme files, for reference.

Menu Bar Links in Version 1.x.x

    <a href="about">About</a>

Menu Bar Links in Version 1.3.3+

    <a class="page-scroll" href="about">About</a>

Make sure to add the .page-scroll to any link that is smooth scrolling to another ID on the page. This includes the logo in the navigation bar, buttons, and any other elements!