Can you please take a look at http://stetsonstudiosllc.com/ and advise me why the video is not full screen like it is on your site?
Hi there, I am getting a 403 error when trying to access the site! Send a message through the profile here on WrapBootstrap and we can talk more though!
Buenaa noches, he adquirido este theme y tengo problemas con el formulario de contacto.
en el hosting que debe ir el theme no funciona el formulario de contacto.
lo pruebo en otro hosting y funciona.
Debe de haber alguna función especial activa en el servidor (aparte de PHP) para que el formulario de contacto funcione correctamente?

El mensaje de error: Sorry usuario, it seems that my mail server is not responding. Please try again later!


Good evening, I purchased this theme and have problems with the contact form.
in hosting that should be the theme does not work the contact form.
I try it on another hosting and it works.
There must be some special active role on the server (other than PHP) for the contact form work properly?
The error message: Sorry usuario, it seems that my mail server is not responding. Please try again later!
Make sure you're using it on a live server. If you current server isn't working then make sure it has a mail server attached to it. Some servers don't include mail servers, and it needs one in order to send messages.
Hello! I purchased Vitality a couple weeks ago, and I am loving it as well as my friend(I'm using Vitality to create a site for him), but I've run an issue and I'd love some help!

I was using the video template, and the video works fine, but the audio won't play.

// Formstone Background - Video Background Settings
source: {
poster: "assets/img/fallback.jpg",
mp4: "assets/mp4/test.mp4"


This is what I used after looking at the formstone documentation, but the audio still won't play. Can you tell me what's wrong with my code? Thanks!
You can try adding the unmute within the code instead of referencing the class twice, I would try that to start!
Were you able to get this to work? I have the same issue on the Spectrum template. Thx!
Fixed. Found this line in the .js file and changed from muted to unmuted.

c.mute&&(e+=" muted")
c.mute&&(e+=" unmuted")
Thanks for the update!
Hello! Is there anyway to make the background image change by intervals of say 10 seconds or so?


You can check out the Background.js docs over at Formstone to change the interval settings!
Hi I bought this great template a few weeks ago. Video is not working, tried everything. Reduced the size of the video (357k), made a .htaccess file, checked the path of the file but still not working. Any suggestions appreciated, thanks.
Hi there! You can try to compress it using a software like Handbrake and see if you can get it smaller. Otherwise you can check that the file extensions are correct.

Last but not least, you might be facing a MIME Type error. Let me know if resizing and checking the file extension doesn't work and we can look into the MIME Type, your server might not be configured to serve up certain media files and we can fix that.
Thanks - I had used handbrake and checked all extensions. I'm using 1and1 to host - I think it might be MIME type, what would you recommend, thank you.
You would need to add this line of code to your .htaccess file:

AddType video/mp4 .mp4

That should do the trick if this is the issue!

On the Video template, can anyone suggest how to change the carousel function on the Work 'Project Name' section from the "zoom-through" to a sideways (fullscreen) swipe like on 'Our Team' please?

Thank you in advance!
There are different transition options through the Owl Carousel plugin! Unfortunately they have gone into a new version 2 beta and their old docs are unavailable so it looks like a theme update is in order...
I have switched out the Portfolio pics for my own pics, and I can't seem to get the images all the same size. When I manipulated the CSS file, I could, but they look terrible on mobile.
Any suggestions?
I would try to resize your images in an image editor to make them all the same dimensions and then add them to the portfolio grid, this should do the trick!
Hi there,

I'm trying to change the background image on the project pages.

On the carousel menu I'm happy with the images I've chosen but when I click through they are the same and from a design perspective it doesn't work so well. Is it possible to change the background image on the click through page?

I am having some trouble understanding this question...

You can change the background image of any of the images in the portfolio carousel within the HTML, just set it to your own custom image and you should be set!
Ignore me, I'm a dope that didn't see the right section of the HTML (there is the section at the bottom of the HTML and the preview of the portfolio carousel further up. Thanks for responding anyway :)
No problem, as long as the problem is solved!
I took your advice about making all the portfolio grid pictures the same size, and it worked for the web view. However, when I'm in mobile, the images are getting skewed vertically rather than maintaining their size ratio. Help.
I am using 3 images for the portfolio grid.
Hmm interesting, the images should maintain their dimensions when brought down to a mobile view. Could you send an email to us on the profile page so we can see what is going on? Thanks!
Last question I promise!

I needed something a bit more detailed on the portfolio modal pages so I basically copied the entire site into each one. It works for Modal1 but Modal2 and Modal3 don't load when you click the view button on the main page. Instead the page darkens slightly and I'm unable to hit escape or click anywhere. I have to refresh the page.

To troubleshoot I copied back the original code for the original modal examples and also the original modal preview and still the same thing happens. Are modal values affected elsewhere that I just can't see?

This is the code for the modal previews:


Example Modal1 starts with:


Example Modal2 is the same as the original template with the id "portfolioModal2"

Any ideas why the broken link would be much appreciated. I'm all out of caffeine and sleep trying to figure this one!
Bit of an update. If I replace the code in the Example Modal 1 with the original all of the others work again so I'm confident the problem is there - do you think there would be a way to get the portfolio modals to work as scrollable parallax pages like the main page?
Second update. Getting there...

Closed a few divs near the bottom of example Modal1 and lost the header. Example Modal 2 and 3 now open correctly!

However, when I copy and paste the working code into Modal 2 and 3 from Modal 1, Modal 1 is now blank. There are sections but no copy/text.

This is why people hire devs I guess :)
Third update. I've made absolutely no changes but went away to clear my head, came back, opened the page up again and it was working.

Dev elves?
Hi there, really not sure on this one. Dev elves may be to blame, or perhaps code sprites...if you run into more problems with this issue though feel free to contact us and we'll get on it!
I would like to have another module further down the page also playing video (albeit a different video), like the module on the landing zone of the video.html

If I go into vitality.js I can see the code for the background video but from there I can't figure out how to add a second video in there or how to link back to it in the source code.

Can you please advise?

Thanks (for a bootstrap beginner I'm really pleased with the site so far - it's going to look great!)
In the JS file you can create a copy of that same section, and give it a separate ID and then customize the preferences at that level. Then duplicate the header with a different div, but make sure it maintains the same sorts of background styles as the header itself. That should let you make an additional background video div somewhere further down the page. Hopefully this helps!
Kudos for this beautiful and amazing theme design! You do incredible work!

What are the minimum CSS and Javascript requirements needed to use the cover design only on the file video.html?

NOTES: I need to combine this design with another theme as the main splash page. I have new video and transparent logo that reacts with the background video. I don't need the overlay, h1 and the double rules, but I want to keep the small text under the logo. In a perfect world I could just cut and paste what I need into the other theme somehow. I like the font awesome icon location and the nav bar. However, the nav bar might change, too.
The video background uses the header styles in the Vitality CSS file along with a JavaScript plugin called 'Background' that is included with the theme. Apart from that there are a few lines of jQuery in the Vitality JavaScript file to activate the background plugin. Other than the little bit of CSS and JS that has to do with the header all you will need apart from that is the video itself, an mp4 format usually works the best, but you can use other formats as well as YouTube videos. Hopefully this helps!
So for those of you looking to add this project to a Rails app, I've been able to do it with a bit of a workaround.

1) add the javascript/css/font files in their respective directory in vendor/assets
2) add the css sprocket data in your app/assets/stylesheets/application.css file. Do not do this for javascript.
3) In your page where you will host this theme, just add the javascript links at the bottom of the page.
4) Add the font script links in your app/views/layouts/application.html.erb file
5) add the img folder to your public/assets folder

This got everything fully functioning as far as I've seen.
Also, is there a way to show that I've bought this product. I bought it on a whim and forgot to login -.- I'd like to receive future updates when possible.
Thank you for sharing this information here, it's very useful and I'm sure some of our Rails users will get some good information from this comment. Regarding the purchase verification - I would contact WrapBootstrap support to see if they can track down your account information that you used to buy the theme. Hopefully they can help you out!
Hello, Can you explain me the process to buy a theme? Thanks
After you click on the blue button to the right hand side of the preview you will be taken to a checkout page and you will buy the theme there. After you make the purchase, a file will be emailed to you that you can download and you will have the files included with the theme purchase.
Hi Vitality,

Sorry to bother you with this but I can't seem to figure out how to get the Mailing Address field to come through on the form submitting.

Any chance you could help me out?

I updated the contact_me.php doc in mail to:
$name = $_POST['name'];
$email_address = $_POST['email'];
$address = $_POST['address'];
$phone = $_POST['phone'];
$message = $_POST['message'];

And also, here's my index.html
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Mailing Address</label>
<input type="address" class="form-control" placeholder="Mailing Address" id="address" required data-validation-required-message="Please enter your address.">
<p class="help-block text-danger"></p>

Would really appreciate any pointers!
You will need to keep updating your contact_me.php file near the bottom of the file to add the address field into the generated email, and if you want to validate that input you will need to add the address field into the contact_me.js file as well. Hopefully this helps!
There seems to be an error previewing this theme?
Thanks for the comment! The Start Bootstrap site was changed to HTTPS and there were some items still changing over, but the theme should be visible again!
Sorry to ask here too, but we've had a conversation via email, but you just keep asking for updates on the issue etc. and are yet to provide any actual advice. My form is not working on www.hannahbeckdesign.com. I would solve it myself if I had some clue of what the issue might be, but right now I don't. Even if you can't solve it, can you give me any pointers?

Thank-you in advance
Wow I really like your design! Regarding the form, can you give me some details on what web host you're using? Sorry for the delay in trying to get this fixed, you email must have gotten buried at some point. Can you send another email to [email protected] and after that I will give you a personal email address after that so we can get to the bottom of this quicker. Sorry again for the delay thus far.
Hi there, I am using vitality for my website joeandjoemedia.com. I love the layout and everything looks great! The only problem I have is when I watch a video in full screen mode elements of the site are overlaid on the video its self. I see the problem both on Chrome and my Android device. Is there a quick fix in the code? Thanks, Joe
The z-index for some of the site elements was set higher to account for various elements that are part of the site. You can play around with the z-indexes on the videos that are overlaying on your site and get them pushed in front of everything else!
Great theme, easy to implement.
I do have a question:
What would be the most efficient way to have the caption text of a portfolio item be visible (no scrolling up) on smart phones and other touch screens? When you touch the portfolio image, it opens the modal immediately and the caption text goes unread.

Thank you,
You could add a class below the image that is visible only on mobile, and that is something I'd consider changing on the base template to make it a little more responsive friendly.

That's the best idea I have.
As I can see the theme includes wow.js, which is paid. Shall I pay for license to them?
I just checked it and it looks like they moved to a new license since I implemented wow.js. I will be purchasing a multiple license theme for wow.js which will give buyers of Vitality licensed access to the plugin. Thanks for catching this, and 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