hi! how can i change the text: your message has been sent in vitality agency theme?
There is a contact_me.php form in the /mail/ directory, you will see the message near the bottom of the file! Thanks for choosing Vitality, hopefully this helps!
ashley-m PURCHASED
Hi there, I sent a message through your contact form (https://wrapbootstrap.com/user/StartBootstrap) but haven't received a response yet.
I've purchased the Vitality theme, and it looks great when I'm viewing it locally, but when I upload it to my website, none of the icons work. You can view it here: http://ashleymeriam.com/index2.html
Any idea what's wrong??
Thank you,
Hmm, it looks like the Font Awesome library is loading, but for some reason the web fonts are missing. Somehow it seems that the font files were actually deleted from the theme? Check in the Font Awesome folder and check to see if the font files are within the /fonts/ directory. I had a look at your site and it is showing 404's for those files. Hopefully this helps!
Rather than use a static image or a video, I'd like to use Google Maps as my background image. Any thoughts? I'm using Rails and javascript.
I've done something like this on another theme you can see here: https://startbootstrap.com/template-overviews/grayscale/.

If you want to start with a really neat skin for your Google Map you can check out https://snazzymaps.com/ - they have some really nice options for you there.

After that you can add your map to whatever element you're using, in this case the header, and make sure the dimensions are set properly. Some pitfalls to look for are using scroll functions, zooming into the map, and setting your map marker. You can use a custom map marker to make things a bit more attractive, and you can see an example of this in the Grayscale theme I linked up above.

Apart from that, you may want to consider turning off the scroll functionality of the map if you're using it as a full screen background because this can really confuse the user and make the UX a bit weird. There are a number of ways to do this, you can turn it off using various scripts or you can just overlay the entire map with something. A background overlay might be useful if you're using text in front of the map.

Hopefully this helps! Thanks for choosing Vitality!

Thanks for the reply! I've checked out snazzymaps, but after hours of perusing through all the options, decided that I just like Google maps. I'm used to it...

I thought I had tried replacing the header style with the map info, but apparently I hadn't. That's working now. Thanks!
Good to hear, thanks for the update!a
In using Vitality with Google Maps, the x in the infowindow is no longer displaying, as well as the zoom options. I can still get out of the infowindow by clicking where the x should be, but it's not visible. I'm assuming it's the css, but I've tried changing the colors of everything I can think of and can't figure it out.
Hi there, I am not sure on this one. Where are you using the Google Map? There shouldn't be anything in the CSS that would conflict with a Google Map, but if you can tell me where you've put it I might be able to help more, thanks!

This are nice, but need multilingual versions also. So keep in mined that .
I will keep this in mind for future updates, thanks for the suggestion!
experience a whole lot better!Hibachi is basically a Japanese word which means fire bowl. For all the people who love Buy fifa 17 coins enjoy the delicious dishes cooked on the charcoal grills and are concerned about facBuy fifa 17 coinsrs like the space occupied by them and

the time taken Buy fifa 17 coins clean them up, the electric hibachi grill is a great alternative. One can actually use these grills in homes with no second thought. The food prepared on these grills is as tasty as the ones prepared on the charcoal grills.

This is one of the main fifa 17 ps4 coins reasons why people from all over the world love Buy fifa 17 coins buy these grills.These grills come in different sizes and shapes. Depending on your requirement, one can choose the required size and shape. Some models come in a round shape while

Hello ! I'd like to do something simple that blocks me. Do you know how I can add a link to the grid images ? So when we click on the image instead of the pop up it opens a link ?
In the `<a>` tag you can simply using add the link. Instead of using an ID, just replace it with your link. For example, change `<a href="#id">` to your link, such as `<a href="http://site.com">`. That should do it!
Hello. I'm using the Video layout of the Vitality theme. I'd like to swap out the logo in the navbar at the same time the padding is changed and the background color kicks in. What can I target to swap the image? Thanks.
The image in the navbar is set by the .navbar-header .navbar-brand. That is a good target for changing things in the navbar for this theme!
Hello. Please advise. I have used templates from Template Monster and the style sheets have about 30 000 lines of styles. This makes the site really slow to work on.

Does this template have the same amount of styles, or is it less?

This theme only has about 1200 lines of CSS, and it also includes the LESS files used to compile the CSS so if you are familiar with LESS then editing is extremely simple! Otherwise it is rather lightweight at only 1200 lines of CSS. Thanks for choosing Vitality!

I'm trying to get a youtube video to play as the background of the Video theme, I've followed the instructions on the formstone docs page (https://formstone.it/components/background/) - when I load the page in my local browser though the background thumbnail of the video is displayed (suggesting that the page can "see" the video) but the video itself doesn't play.

Am I doing something wrong? is it possible to use a youtube video on the Vitality theme like this?

Any help would be great!


// Formstone Background - Video Background Settings
source: {
//poster: "img/agency/backgrounds/bg-mobile-fallback.jpg",
video: "//www.youtube.com/embed/hzf7l9Dsys0"
//mp4: "mp4/camera.mp4"
It doesn't look like you have anything wrong. It could be the network is taking a while to actually load the video? This would be my best guess. I would try using a video that is smaller in size that loads more quickly.
Hello there! An answer to my support request would be highly appreciated ;)

Best, Phil
Hi there, did you send an email? If so please send me another one using the profile page here on WrapBootstrap, you request might have been overlooked by accident!
Hi. I purchased the vitality template a weeks ago, and I think it's a great design.

I'm trying to change the size and ratio of the slide images but I can't find the way to do it. Can somebody help me?
Hi there! If you change the size of the images and keep them all uniform then the items should be bigger. If you want less number of items though for the slider you can change that in the jQuery within the vitality.js file, just find the script that runs the carousel you're looking to change. Hopefully this helps!
Thanks but changing the size of the images does not affect how they look in the carousel, and I also need to change the aspect ratio to be able to project vertical images .... That's what I need to change because most of my images are vertical. I'm not sure if I made myself clear, did I?

Thank you!
Are you talking about the portfolio carousel? I think I understand now, I thought you were referring to the team carousel.

The portfolio carousel sets the background images of the carousel fill the entire div, so vertically aligned images will get cut off pretty significantly on the top and bottom due to screen sizes. The vertical images might work okay on portrait aligned mobile devices, but nothing more. That's just the nature of background images set to cover an entire area.

If you're referring to the images within the portfolio carousel, they are set to use the device mockups plugin. You can check out the docs for more info on using those, and you may need to resize the height of the item within the portfolio carousel within the CSS (or LESS if you're using the LESS files). You'll see in the CSS, currently on line 672, the padding for the device container is set to 25px, you can adjust that to see if you can get more vertical with the portfolio image.

Hopefully this helps!

I'm using myhosting.com as a hosting and I would like to know if this theme work with my hosting or not.

Awaiting your reply.
If you're able to upload files to your domain then any theme should work with your hosting! Hopefully this helps!
I too am trying to play iframe (vimeo) videos in the portfolio section of the Video.html template using magnific popup. It seems there is some code specific to the video template blocking magnific from displaying iframes because it works fine for the culinary and fashion galleries. However, when I copy that same HTML from those galleries to the video template, it no longer works. It says "cannot display image" or breaks magnific altogether. I suspect it is related to the modals but I've never worked with single-page themes before. I have tried changing vitality.js from:

// Magnific Popup jQuery Lightbox Gallery Settings
type: 'image',
type: 'iframe',
as well as
delegate: 'a',
type: 'iframe'
and have tried this with the "portfolio-wrapper" as well as parent classes.

Perhaps you could provide working magnific iframe code for the portfolio section that still works with the data-cat filters.

I think this is likely to be something many users of the video template would desire.

Thanks for the excellent template! It's quite a looker :)
Hmm this is a very interesting problem. I will have to investigate this and make sure it gets fixed in the next build.

The plugin running the video background may be interfering with the iframes working since that is the only real difference between the video.html template and the other ones. I will get to the bottom of this soon, thanks for the update and information!
Much appreciated! I'm glad it's not just me!
Not a problem! Have an excellent day and thanks again for the reporting on this! :)
Hello - any luck finding a solution to play iframe portfolio videos?
I think you need to activate different media types for them to pop up with magnific popup. I would check out the docs here: http://dimsemenov.com/plugins/magnific-popup/documentation.html#iframe-type This talks about setting up different iframe types within magnific popup. Hopefully this helps!
there are Error with img could be shown in Header because of height percentage

update :

header {
height: 100vh;
width: 100%;
padding: 0;
background-attachment: scroll;

you should give me 1 license for free
Percentage or vh are both workable in this case! You way is a bit more modern though so perhaps I'll take this suggestion into consideration ;)
Hi there... using video.html as the layout, is it possible to ensure that the background header vid is shown on mobile as well as desktop (instead of handheld devices simply displaying the fallback image)?

Hope you can help... and many thanks in advance :)
Mobile browsers usually don't allow background videos of this nature to play, and it's a disabled functionality with the plugin. I wouldn't recommend using a background video on mobile devices, but if you wanted to you'd have to somehow override that feature of the plugin being used or use a different method of setting a video background image to the header.
Okay, many thanks for the feedback :)
Not a problem!
Hi there,

Let me start by saying that I am a very happy customer - thanks!

I recently bought an iPad Pro (12.9-inch with a resolution of 2732 x 2048) and found that the background images go blurry in landscape mode. They are fine in portrait but the resolution drops right down and the photos just become a blur if I rotate the iPad to landscape. Screenshots:

Portrait:- https://drive.google.com/open?id=0BwIWmFYWgcrWVG5PTURPblZyODA

Landscape:- https://drive.google.com/open?id=0BwIWmFYWgcrWWi16Um1yM2Q3dms

Do you think this is something that can be fixed?

Many thanks!
On landscape mode it looks like the background-size: cover selector isn't having effect, and since the iPad Pro is a retina device it's zooming in 2x and making the very top of the full size image blurry.

I will see if I can find a fix for this, but the problem looks like it could be solved by setting the background-attachment: scroll; on those devices.
Hi there. Thanks for taking a look. You're right... the problem is fixed by using background-attachment:scroll; but I'm not sure how I can only make these big retina devices use it as I don't want to lose the nice effect where the background remains fixed on all other devices. I'm not a developer so if you could tell me a nice easy way to only use this CSS on high resolution devices I would appreciate it. Alternatively, you could send me to a link that might help (I'm already Googling it :-)) that too would be greatly appreciated. Thank you once again!
Hi again. So you know, I tried this in the vitality CSS file for header and one of the sections, but although I think I do make the background scroll (at least it does in portrait unlike without the new CSS) the background remains zoomed in and fuzzy:

@media (min-width: 2000px) {
header {

@media (min-width: 2000px) {
.pricing {

It's odd though as if I add background-attachment:scroll; explicitly to the HTML div like this it makes it work:

<header style="background-image: url('assets/img/bg-header.jpg');background-attachment:scroll">
If the CSS you've written is before the other CSS that is setting the styles for the header image then it will be overridden. Make sure you put any custom CSS last.

I am not sure how to keep the fixed background image effect on retina devices, this is something I will have to explore and update in a new version of the theme.

Thanks for the feedback!
Thanks for the tip on the CSS. I've applied the CSS to the end of the file and have definitely got the background image scrolling for large screen sizes only now (I can simulate the iPad Pro in a web browser by moving the browser off the screen and stretching until width >2000pixels), however the image is still zoomed in. It only works when I add the CSS directly to the <div>. There must be a clue in that.

Good luck fixing it. If you remember to, I'd appreciate it if you could update this conversion (I will bookmark the page and keep checking back).

If I manage to work it out, I'll let you know.

Will do thanks!
Hi again - I think I have the solution for you. This needs to be added to the CSS file:

@media only screen
and (min-device-width : 1024px)
and (max-device-width : 1366px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) {

header {
background-attachment: scroll;

@media only screen
and (min-device-width : 1024px)
and (max-device-width : 1366px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) {

.pricing {
background-attachment: scroll;

etc. for all the classes with a background image that needs to scroll.

The problem by the way was that an iPad Pro incorrectly reports 1024x1366 as its screen resolution (http://www.whatismyscreenresolution.com).

Thank you for pointing me in the right direction!
Awesome, thank YOU for the fix here! I'll be sure to drop this into the theme in the next update!

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