Vitality is a Bootstrap 4 based theme for building single page websites.
Thank you for choosing Vitality by Start Bootstrap! If you have any issues or questions regarding this theme, contact us directly at firstname.lastname@example.org and we will answer your questions as soon as possible!
You must purchase a license to use this theme, which you can do so at the Start Bootstrap Shop!
When purchsing this theme, the download package will include a
directory which will contain the compiled theme. Within that folder, you will see an
file with the theme itself, along with supporting
The theme package also includes a
directory which includes all of the source files used to create the theme. The
file in the root directory are also development files used to build the theme, and should only be used by advanced developers looking to modify the theme's development files and recompile.
Vitality utilizes some powerful, third party plugins for certain components. They are:
Vitality includes nine preset color schemes to choose from. When you open the
file, you will see the default stylesheet being loaded. Within the
tag of the file, you will see:
If you wanted to use the
color scheme for example, you would uncomment that color scheme and delete the rest from the
tag. The end result would look like this:
Simple delete the color schemes you're not using from the HTML, and you can also delete them from the
directory as well - there is no need to have unnecessary files taking up valuable space on your web server!
If you want to use a custom color other than one of the preset stylesheets, you can do so by changing the primary color variable in the
file, and then recompiling the SCSS using the Gulp task included with the theme package. For more information on this, see the advanced usage section of these docs.
Using more than one stylesheet is not necessary. Just use one stylesheet and delete the rest, the last stylesheet loaded will override the previous is multiple stylesheets are used.
Here is a comprehensive overview of how to use and modify the components included with the Vitality theme package.
There are a few things to note when using the Vitality navbar. It is built on top of the deafult Bootstrap navbar, and the markup is identical, with a few minor additions. The first addition you will see is the usage of the
ID on the
component. This sets the custom styling for the navbar, and should not be changed or removed.
Next, you will notice that we have replaced the text in the
element with an SVG image. The HTML appears as follows by default:
The easiest way to replace the navbar brand image is to replace and overwrite the
image in the
directory with your own SVG image. Doing so would mean you don't have to change any of the HTML.
If you are using a different file type for the navbar brand image, then you will need to make sure the file path and the file type is correct. Let's say, for example, you have a new PNG image that you want to use for the navbar brand imagg; the markup would change from what you see in the box above to the following:
The above snippet assumes that you have a new image file called
If you want to use text instead of an image, keep in mind you may have to restyle the text on your own. The best way to do this would be to create a new stylesheet and write your own custom CSS. Make sure to load this
file (or whichever color scheme file you are choosing).
If your image isn't appearing, first make sure that the file extension of your image matches the file extension you're using in your HTML. After that, check to make sure that the file path is correct. Note: keep in mind that file extensions can be case sensitive (.jpg is different than .JPG)!
When you items in the
element, you'll see all of the default Bootstrap classes, along with the
class. You'll also notice that the links for each
are set to an ID. This is how the one page scrolling system works.
Any time you want a navigation link to scroll to a position on the page, just set an ID on the element you wish to scroll to, make sure the link points to that target, and add the
class to the link. For example, if you wanted to add a new item to the navbar, you would add the following list item within the
From there, you would need a link target, so on the page somewhere in your HTML, you would have a section that has the ID
#new-link, like so:
.js-scroll-triggeranywhere on the page!
If you look at the first call to action section of the default page, you'll notice a
on a button within the call to action. You can use scroll triggers anywhere on the page, just set the link target to the ID of the section you want to scroll to, and make sure the link has the
Vitality includes a few different masthead header options. You can have a full or partial page height header, and your header background can be either an image or a video.
The best, and easiest way to change the header background image is to replace the image file within the
directory. You will see a file called
bg-header.jpg. Overwrite this file with your own image. We reccommend that you keep the image as a JPG.
If you want to change image formats, you will need to edit your theme's CSS file.
To do this, you will need to go into your theme's CSS file, and find the
class, and modify the URL attached to the background rule. By default, it is set as follows:
If you need to change the file name, path, or extension, simply edit the URL in both the normal background rule and the webkit background rule.
If you look at the CSS snippet above, before the URL you will see a linear gradient. You can change the RGBA color value (which is black by default) or the opacity of the gradient which will change the overlay of the background image!
The about section has no custom CSS classes added. There are, however, custom icons that are being used for the about section - which can be modified.
The about section icons are from Font Awesome's free library of icons. You will see four
elements within that section with the
classes, along with another class that identifies which icon to use
(where the * is the name of the icon, for example,
.fa-code). You will need to change the
class to an icon. For a full list of icons, visit
. This theme includes the free version of Font Awesome, but you can upgrade to a pro version to get access to the entire icon library.
By default, the team section has 5 team members which are organized on a carousel, using the Slick Carousel plugin. When modifying the team section, you can change the team member images, text content, and social links. You can also add or remove team members from the carousel.
The best and easiest way to change the image for a specific team member is by replacing the image file in the
directory. In that directory you will find the 5 default team member images. Replace these images with another JPG with the same name, and it will replace that team members portrait.
It is recommended that you use images that are 400x400 in pixels. If your team member images are different sizes, the sizes of the carousel items may appear asymmetrical.
Each team member has a variety of links for social profiles. You can add, remove, or modify the existing social links by using icons from the Font Awesome icon library. Each icon has a
class (where the * is the social icon being used, for example
.fa-facebook-f). To change these icons, you can go to
and sort by their brand icons to see what is available. You will also want to set the link target for each of the link elements to your team member's social profile on your chosen network.
If you want to add or remove team members from the carousel, you need to do so at the
level. Example markup for a single carousel item is:
To add items, copy the above snippet and paste it into the team carousel. Make sure to set a path for the team member image, and make sure to modify the social links, and add link targets, as needed.
To remove items, simply delete the entire
element from the carousel.
The process section of the Vitality theme uses a few custom classes for positioning and spacing purposes. More importantly, if you need to change the icons in the process section, you can select the icons you want to use from the Font Awesome icon library.
In the process section, you will see three
elements with the
class and another
class (where the * indicates the icon being used, for example
.fa-heart). For a complete list of icons you can use, go to
http://fontawesome.com/icons. This theme includes the free version of the Font Awesome icon font, but you can also purcase the pro version to have access to all of the icons available.
The portfolio carousel utilizes the Slick Carousel plugin for slider functionality, along with Bootstrap modals for the individual item popup windows and the HTML5 device mockups plugin for device previews. There are a few things to consider when modifying the portfolio carousel.
Each portfolio carousel item has a background image, a preview image, and a modal window that is linked to, along with text content.
First, you will need to change the background image of the carousel item, and the preview image of the carousel item. The best and easiest way to do this is by replacing the default images in the
directory. Make sure to replace the existing demo images with JPG files that have the
same name! Otherwise you will need to modify the theme's CSS.
To modify the content of the modal window, look at the
of the View Details button in each item, and find the corresponding modal, all of which are listed below the carousel.
For example, Portfolio Carousel - Item 1 has a View Details button with
data-target="portfolio-modal-1". Scrolling down the HTML, you will find a
with the class name
and the ID
#portfolio-modal-1. This is where you can edit the contents of the popup modal for that specific item.
The theme includes 4 portfolio items by default, and you can edit each one by modifying the carousel item HTML along with it's corresponding modal window.
By default, all of the portfolio carousel items use a Macbook Pro as the device type being shown. You can change this in the HTML by modifying the data attribute on the
element of each carousel item. For example, if you wanted to change from a MacBook Pro to an iPad, your markup would look like this:
For full documentation on available device options, visit the documentation page for the HTML5 Device Mockups plugin.
If you wish to add items to the portfolio carousel, you will need to do so in two steps. First, you will need to add an item to the portfolio carousel, and then you will need to link that item to a corresponding modal window.
The markup for a portfolio carousel item is as follows:
Add the above snippet as a child to the
element on the page. You will also need to make sure to set the
of the View Details button in your portfolio item to a modal window, and you will need to make sure the image path is correct in the preview. The background images for the portfolio items are set in the theme's CSS. If you are adding another item, you will need to set the background of the portfolio item using custom CSS. The markup for a new modal window is:
Make sure the ID of your modal window and the
of your portfolio carousel item match - otherwise, nothing will happen when the View Details button is clicked! For example, if you were going to add a fifth portfolio modal, the portfolio modal would have an ID of
#portfolio-modal-5, and the corresponding portfolio item's view details button would have a
The ideal dimensions for the preview images that are located inside of the device mockups is 1018x636 pixels. If you are using a different device, your images may need to be resized!
By default, the portfolio grid option includes six items, each of which have a hover effect, and when clicked, the open a gallery powered by the fancybox plugin.
Each grid item is contained within a Bootstrap column. To add more items, copy and paste the below snipped into the portfolio grid after the last item, and before the closing of the
Make sure to add a new image to the
directory and set the to image paths in the snippet above to your image's location. If this isn't done, the image will not appear. You can use a smaller image for the preview image, and a larger image for the link target, but for demo purposes, the same image is used twice.
The testimonials carousel is also handled by slick carousel, and functions similarly to the team and carousel sliders. To add another item to the testmonials, simply add another
to the carousel before the close of the
You can use the below snippet to easily add more items to the testimonials carousel:
The contact form is a working PHP/AJAX form with validation. First and foremost, if you are testing the form it must have a mail server attached and PHP enabled on the server. For example, if you are just testing the form locally, the form will not work - it must be on a live web server, or on a testing server with PHP and a mail server.
To set up the form, open the
file and change the email address on line 18, which is set to
by default. Replace that email address with your own. You can also change the email address on line 21, which is set as
email@example.com. Since the form sends from the webserver, you don't need to reply to the webserver - but changing this is optional since the form is set up to auto reply to the email address the sender put in the email field of the form.
There are a number of reasons the contact form might not be working properly. You don't need to change anything in the
file, ONLY the email address on line 18 of the
For advanced troubleshooting, see this post on StackOverflow, where a community user has provided comprehensive answers to why a PHP mailer might not be working properly.
The footer contains a few social links, which you may want to change. In order to do so, check out the brand icons availabe on Font Awesome.
There are two callouts sections that are included with Vitality: the full callout, and the email subscribe callout (which is set up to work with MailChimp).
The best and easiet way to change the background image on the full callout section is by replacing the
file with a new image (with an identical name and format). If your image has a different file format (for example, .gif, .png, etc.) you will need to change the file name in the theme's CSS file.
The signup/subscribe callout section is set up to work with MailChimp! In order to make the form subscribe users to your MailChimp mailing list, you will need to change the form action of the signup form. You will see the form section in the HTML laid out as follows:
The above form action will need to be replaced by a form action to use your form. To find this, login to your MailChimp account and do the following:
to automate the development environment. To install gulp, you must first install
globally. After node is installed, you can run
npm install -g gulp
to install Gulp globally.
After you have Gulp installed globally, you can install dependencies. Go to the root folder of the Vitality theme package, and run
to install dependencies.
Vitality has a few Gulp tasks laid out in the
file. They are:
gulp- the default build taks that runs everything
gulp clean- deletes the entire
/distdirectory for rebuilding
gulp vendor- copies core dependencies from
node_modulesto the files target destination in the
gulp css- compiles the theme's CSS along with alternate color schemes - if you only want to compile the default color scheme, use
gulp js- compiles JS into the
gulp html- compiles the HTML from
gulp img- copies images from the
src/imgdirectory into the
gulp mail- copies the
src/maildirectory to the
gulp dev- compiles everything and launches a browser window for live development, with live reloading with browserSync
It is recommended that you run
gulp clean, then
gulp, and then
for a fresh development environment. After this, you can begin modifying the content within the
All of the images included with this theme are from https://unsplash.com/.
Feel free to use the images included with the theme for your project. For more information about Unsplash's license and terms, visit https://unsplash.com/license!
If you have read through the documentation, and still have questions about working with the Vitality theme, send us an email at firstname.lastname@example.org and we will be in touch as soon as possible!
Thank you for choosing Vitality!