Hi! Where I can see all the available icons?
There are two icon sets that are available with this template. The font awesome icon library can be viewed here: http://fortawesome.github.io/Font-Awesome/icons/ and the Glyphicons included with Bootstrap can be viewed here: http://getbootstrap.com/components/#glyphicons

How to have Portfolio Grid filtered by default, when the page is opened?
Now you can see all images until you click filter button.

Otherwise this a great template.

You can use the built in plugin to default filter to a certain category on load. You can see the docs here for reference: https://mixitup.kunkalabs.com/learn/tutorial/advanced-filtering/

If you need some help please feel free to contact me here through WrapBootstrap and I will help you with some code.

Thanks, have a great day!

thank you for you respond. I review plugin and documentation and implemented this code to Agency template. This did not help since I am still getting all portfolio images on the page load- instead of only "web" filtered images.
This is changed vitality.js script.
Any help here will be appreciated.

load: {
filter: 'web'
targetSelector: '.portfolio',
filterSelector: '.filter',
effects: ['fade'],
easing: 'snap',
// call the hover effect
onMixEnd: filterList.hoverEffect()
Hello I would appreciate if you help me with this one.
It looks like the docs updated from version 1 to 2. I will have to update the plugin to the new version in order for the load function to work correctly.
I updated to the newest plugin but it stopped working. There is more work here in order to update the template to the latest mixit-up plugin.
Yes this is correct. They have some different markup for the new version of the plugin. I will be going in at some point soon to update to the new version, which will involve some changes to the jQuery and possibly the HTML.
subse7en PURCHASED
Please upgrade Owl-Carosuel to v 2.0.0-beta 4 (or latest)!

Also if you change the animatedheader.js file, you can remove the classie.js dependency. Like so:

if (sy >= changeHeaderOn) {
// removeClass(header, 'navbar-expanded');
} else {
// addClass(header, 'navbar-expanded');
Thanks for the suggestions! I've tried working with Owl Carousel 2 but there are still a good number of bugs with the transitions which I would like to keep as is, or a non-buggy version at least so I am staying with version 1 for now due to the transitions being correct.

I will look into removing classie.js, thanks!
I bought this theme and it's brilliant! Made some slight modifications such as making the video full height regardless of screen size (on Mobile it would only display in the top half or so). I've only got one problem though... Since replacing the video file (and corresponding screenshot/background) the video no longer plays on Android devices. Any ideas why not? It never worked in the default Android browser but the sample video worked in Chrome on my Samsung. Works perfectly on desktop at all sizes, haven't been able to test on a tablet yet. Thanks!
The video is disabled on mobile devices and instead it just displays the mobile fallback image. Was the video playing on a Samsung phone? What browser are you using on the mobile devices? Thanks for choosing Vitality!
Sorry, I think I must have imagined it! I was sure it worked on Chrome but trying again it isn't. I appreciate the quick reply though. One more question - is there a way to make the testimonials automatically scroll through the items like on other templates? Thanks :)
If you add autoplay: true, to the jQuery for the testimonials carousel then you can get it to scroll automatically. Hopefully this helps! I got your email, so if you need any more assistance with this feature just let me know and I can give you more in depth instructions. Have a good day!
That worked perfectly, thanks!
Thanks for the great theme - just one question - I'm trying to add some video to a #portfolioModal page I have created which is accessed from the Portfolio grid in the Creative template.
Everything works fine until I hit the 'Close' button. The modal disappears as it should, but the video (and the soundtrack) keep playing...
I've looked for a solution online, but haven't really found anything that works efficiently.
Do you have a solution for this?

Thanks in advance,
You would need to bind a stop video command of some sort to the closing of the modal window in order to make this happen. I will explore options on how to get this to work to see if I can add it in a future update.

Thanks for pointing this out!
Please let me know, as I need to get this resolved so I can upload my site asap!!
In the meantime take a look at the Bootstrap docs for modals here: http://getbootstrap.com/javascript/#modals-events

These are the modal events, and if you can bind a video stop command to one of these events then you should be good to go!
Cool thanks, will take a look!
subse7en PURCHASED
Please update MixItUp from v1.4 to v2.1.7.

Minor api changes needed:

selectors: {
target: '.portfolio',
filter: '.filter'
animation: {
effects: 'fade',
easing: 'snap'
// call the hover effect
callbacks: {
onMixEnd: filterList.hoverEffect()
Thanks I will look into this. It looks like this plugin needs an update.
Just bought the theme and it looks like it's still on v1.4. Any idea when the update will go through?
I am planning to roll out an update with updated plugins and Bower support sometime in June. Hopefully this helps!
It's nice theme. Can the home background image be a slide show?
With a jQuery plugin like backstretch then it could be a slideshow, but this feature does not come default with the template. This may be something to add in a future version however.

I want to implement this template for my personal project into a Rails App, but javascript files aren't working in my case!!!

The files are loading into the WEB site, I can find the sources for the JS files, but they aren't working!!

Can you help me please??
I don't have any experience with Rails so I am not sure on this one. I would first make sure that the file paths to the JavaScript files are correct. If not then the plugins and initialization scripts won't run. I would also make sure that the vitality.js file is loading properly, because that includes all of the initialization and configuration for the jQuery plugins.

Hopefully this helps! If not feel free to send a message and we can try to explore this issue further. Thanks!
kathybcn PURCHASED
Dear Developers,
Thanks for the theme. Can you please tell me how I can change the color of the text.

Thanks so much!
To change the color of the body text you can do so in the CSS file you have chosen. For example, if you're using the red theme, vitality-red.css, look at the body element and add something like this:

body {
color: #000;

You would replace the #000 with the color of your choice. If this doesn't help feel free to drop me an email and we can explore more solutions. Thanks for choosing Vitality!
kathybcn PURCHASED
Thanks a lot for your answer.
I understand now how I can change colours and most importantly I know understand in which css file i need to do the changes for that.
kathybcn PURCHASED
I have one more question.

In the "about" section there are 4 text blocks of text (Retina Ready, Easy to Edit, Responsive, Built with Love). They are evenly arranged over the breadth of the page.

How could I change the arrangement so that it's evenly distrbuted with only 2 blocks of text? E.g. only for "Retina Ready" and "Easy to Edit".

I guess it has something to do with the grid structure behind the page.

In which file do I need to look to make the changes?
If you remove the second two then the remainders will just display on the left hand side. You can use a column offset in order to center these two items however, or you could put them into a container and make that split in two.

If you'd like some more information on this feel free to send an email on the Start Bootstrap profile page here on WrapBootstrap and I can help you out with a code sample!

Thanks for choosing Vitality!
Hi I have a major issue. I noticed that you included the magnific-popup but by default it isn't being used. I want to be able to open the gallery images as a popup, simply openening them in a bigger version with left and right arrows to go through the images. Right now, if I click on an image in the gallery it just opens up a modal from the carousel. How do I change this so that when I click on an image from portfolio gallery, it will open up in a lightbox and be able to click left and right to view all the other images? This is very frustrating as I've been trying to figure this out and can't seem to be able to.

The magnific popup plugin is being used on the image gallery in the Culinary example among others. If you wanted to integrate a magnific popup gallery into your portfolio gallery you would need to remove the hooks to the modals and replace the markup with the magnific popup information.

If you need further support with this feel free to send a message to me directly on the Start Bootstrap profile page and I can help you out with some code samples.

Thanks for choosing Vitality!
I sent a message on Start Bootstrap profile page. I'm still trying to figure out how to replace the markup but I'm not able to get it to work. Thanks
I got your message and sent over some code samples. Hopefully they answer the question you had! If not just send another message and I'll look into it further! Have a good day!
Great design!

Is there any chance for the razor version (ASP.NET MVC5) ?
At the moment there isn't a plan for an .NET version of this theme since I don't have the expertise to build it. In the future I may be looking into other setups for the theme. More near term though it's more likely to see a Sass version along with LESS.
HI Vitality Team
Vitality Agency theme header menu bar doesn't work after I download and run it into IE 10. It works when I do live demo.

Header menu bar is fixed but background remains white which makes it losing the scroll highlight and visibility in white background.

Please help
Hmm, it looks like the classie.js or the cbpAnimatedHeader.js file is not loading properly from what you describe. What happens is that when you scroll, the animated header script fires off and removes the .navbar-expanded class from the navbar, which causes the menu to collapse with a black background. If those files don't load properly, then the script wont fire and the .navbar-expanded class will remain on the navbar.

I would look into those two scripts to make sure they are running properly, and if that doesn't help feel free to send over an email via our profile page here on WrapBootstrap and we can look into the issue further. Thanks for choosing Vitality, and have a great day!
I'm tryin to hook up this contact form to start sending mails for me, and since I'm a newb I just changed the email adress in contact_me.php and everytime I hit "send" i get this error "Sorry mario, it seems that my mail server is not responding. Please try again later!".
Any thoughts ?
Hi there! Thanks for choosing Vitality! If you're trying to test out the form locally on your computer, keep in mind that the form isn't hosted on a live web server. If you don't have a local server environment set up (with a mail handler and PHP) then the form won't send locally. To test the form, upload your site to a live server and see if it works from there. Otherwise, follow the instructions in the docs to help troubleshoot or send me an email on the Start Bootstrap profile page here on WrapBootstrap and I will try to help you out as best as I can. Thanks again for choosing Start Bootstrap!
http://www.ibci.hr/ibci/folio/creative.html <--- Link !
Thanks for the additional information. Disregard the previous message (I am going through these one at a time!)

So you clearly have everything live on a server, so that part is working. I tested the form and I am getting the failure to send message as well, so I am able to replicate the bug. It doesn't look like you've changed the ID's of the input fields.

At this point I would try to contact your web host to see if there are any security permissions that are preventing the form from sending messages. That has been a common problem that I've seen in the past. Another issue might be that the version of PHP running on your web server might not be compatible with the form.

Hopefully this helps! Thanks for using Vitality!

I hope you can assist me. I purchased the Vitality theme and am very happy with it so far. I am using the Agency version with some customization. Here is the site build so far:


I have a few questions:

1. Can I have more than one lightbox gallery on the site?

To begin with, I grabbed code from the Culinary version "menu" section. Ideally I would like each individual carousel item to have its own pop up lightbox photo gallery. I created separate modals for each but they remained linked. Is there a way to keep them separate? See "SEMINARS - PAST" section of my site. For now I have resorted to using just one gallery.

2. Client wants a calendar for a class schedule with daily and weekly view options. Do you have a recommendation for a third party or any other jquery, open source application that is responsive? And of course has great styling like the Vitality theme?

I really appreciate any help you can offer.
Hi there! I will answer you're questions in order here:

1. Yes you can have more than one lightbox gallery. There are certain ID's set to the gallery, so you might need to change up the jQuery a little bit to allow for multiple. If you need some assistance with this just send a quick message over via our profile page here on WrapBootstrap and I will get some code samples over to you.

2. There are a lot of different jQuery calendar's out there, but the best one I've come across to date is fullcalendar.js. You can check it out here: http://fullcalendar.io/ - with a little bit of style customization it would look great with Vitality.

Hopefully this helps! Feel free to send a message for more support! Thanks, and have a great day!
This is a fantastic template. Clean code and great documentation.

One thing I'm struggling with (not being a CSS expert) is getting the layout to work within a containing <div>. I'm pulling the site into an ember.js template, which loads within a parent <div> tag. I've tried using 'position: relative' on the ember div container and changing the nested elements to 'position: relative' in the vitality CSS, but no luck. The background image doesn't display and and the rest of the layout is shifted.

Any suggestions? I would imagine anyone using a JS MVC framework like ember or angular would run into the same issue.
sorry, I meant that I used 'position: relative' on the parent (ember) div and changed the nested elements to 'position: absolute' in the vitality CSS.
For more context, here's a stripped down version of the HTML with the additional div tags added:


<!DOCTYPE html>
<html lang="en">


<body id="page-top">
<div class="ember-view ember-container">
<div class="ember-view ember-nav">
<!-- vitality nav bar here-->
<nav class="navbar navbar-inverse navbar-fixed-top navbar-expanded">...</nav>
<div class="ember-view ember-page">
<!-- vitality header and sections here -->
<header class="video">...</header>
<section id="about">...</section>
<section class="bg-gray">...</section>
<!-- scripts here -->


Add this to the CSS (no other changes):

.ember-view {
height: 100%;
I am glad you got this solved on your own! Sorry for the delayed response! If you run into other issues feel free to contact me!
Hi StartBootstrap,

Based on previous comments here and what I've seen in the code, it doesn't look like you're keeping the libraries you're using up to date. In particular the following need updated:
- Animate.css (https://github.com/daneden/animate.css)
- wow.js (https://github.com/matthieua/WOW)
- jQuery Easing (https://github.com/gdsmith/jquery.easing)
- mixitup (https://github.com/patrickkunka/mixitup)

I wouldn't mind so much if you hadn't advertised the following:
"Updated Plugins - All included jQuery and CSS plugins have been updated to keep the theme fresh and currnet!"

Using a tool like bower (http://bower.io/) can help you keep dependencies up to date while saving a ton of time.

For example, this would go in your bower.json file:
"jquery.easing": "https://github.com/gdsmith/jquery.easing.git"
"animate.css": "~3"

It's a great little tool :)

I'm in the process of converting it over to bower now and making adjustments for updated plugins.

Don't get me wrong, this is a great template and if starting over I would buy it again in a heartbeat. But a lot of us are going to do the same duplicate work of refactoring it to use bower for dependency management.
Thanks for this suggestion. This is most certainly something that I plan to implement. I typically update every month or so when there are new features and/or bugs, but some of the plugins don't get updated in every new release.

I really like the idea of adding in Bower so any buyer can easily update their theme's dependencies without the release of a new update.

In the meantime, I will get these updated in the next patch, and look into adding Bower support. Thanks for choosing Vitality!

>>I really like the idea of adding in Bower so any buyer can easily update their theme's dependencies without the release of a new update.

Yes, this would be great :)
Awesome. Consider it added to the to-do list!
Hey there,

I'm trying to add more portifolio items ( there are 9 in your theme ), and I duplicate entire Porfifolio HTML paste it under and it ain't showing nothing ?
Do i need to do something else ?

If you copy the entire portfoliolist ID then it will not show up with anything since only one ID will activate. To add more items to the portfolio I would go one item at a time, or change all references to the portfoliolist ID into classes instead (in the HTML, CSS, and jQuery). I may make a change sometime making certain elements, like this one, more copy/paste friendly. For now though just make sure you're being careful with ID's vs. classes.

Hopefully this helps! Thanks for choosing Vitality!
Thanks for your answer. It did make thing a little bit "cleaner" but I'm still lost :P
Some tutorial would be so sweeet, on how to make one more ID's for this gallery.
Help meeeh :)
Thanks !
For some more detailed code samples, just send me a message via the Start Bootstrap profile page here on WrapBootstrap https://wrapbootstrap.com/user/StartBootstrap and I can take a look at your code and offer some changes. Thanks!
treytech PURCHASED
I'm having an issue where the main logo and header are on top of a fullscreen embedded youtube video. I tried changing the z-index of the youtube video, but that style gets disabled when you fullscreen the video. Any ideas?
Hmm interesting. So when the YouTube video is put into full screen mode the logo is showing up on top of it? That is pretty strange behavior!

I would take a look at the z-index of the logo and header. Do you have a link with this behavior. If so, please send it over to me at [email protected] and I can take a look and see if I can help you further. Thanks for choosing Vitality!

Write a comment

This is a great way to give the seller feedback and ask them questions about their item.

You must sign in to write a comment

Sign in or sign up to make a purchase


Licenses: Details »

Single application $14
  • HTML Template
Bootstrap: Compatible with 4.x
  • Responsive
  • Latest Chrome
  • Latest Edge
  • Latest Firefox
  • Latest Safari
Uses Less:No
Uses Sass:Yes
Topic: Design & Creative Services
Labels: bold, bootstrap 4, clean, creative, minimal, modern, multipurpose, portfolio, sass, scss
Released:4 years ago
Updated:3 months ago
Sold exclusively on WrapBootstrap


Signed up 4 years ago

Need an admin template?

About Bootstrap

Bootstrap is designed to help people of all skill levels – designer or developer, huge nerd or early beginner. Use it as a complete kit or use it to start something more complex.

Unlike other front-end toolkits, Bootstrap was designed first and foremost as a styleguide to document not only its features, but best practices and living, coded examples.

Built to support new HTML5 elements and syntax with progressively enhanced components.

Browser support

Bootstrap is tested and supported in major modern browsers like Chrome, Firefox, and Internet Explorer.

Tested and supported in Chrome, Safari, Firefox, Internet Explorer, and Opera.
  • Latest Chrome
  • Latest Firefox
  • Latest Safari
  • Latest Edge
  • Internet Explorer 10/11
  • Latest Opera

Features & includes

Bootstrap provides an unparalleled array of features and reusable components that let you hit the ground running:

  • Responsive 12-column grid
  • 12 custom, modular jQuery plugins
  • CSS styles for forms, navigation & more
  • Dozens of reusable components
  • Components are scaled according to a range of resolutions and devices
  • Built with Sass (CSS included)
  • Complete styleguide documentation