I need to purchase this theme for my site.
So, before I purchase this I need to clarify some doubts I have. Because I'm new to web things.

1is this suitable for my site (smartcloud.net.sa)?
2.can I change header BG video file with Google Street View?
3.can I replace vitality LOGO in sample with my own?
4.can I change Bottom BG with Google Map?
5.will I get updates after I purchased this theme?


Sorry for my poor English.
Hi there! I will answer your questions below:

1. This is suitable for any website!
2. If you have an image of your Google Street View, you can replace it with the current background image. If you're looking to use the Google Street View and keep its interactive components, then this would take some custom coding on your part.
3. You can certainly replace the Vitality logo with your own, and it's recommended that you use an SVG format.
4. The bottom background is not built to have a Google Map by default, it is a feature you would need to create custom.
5. Every time the theme is updated you will receive an email from WrapBootstrap and you will be able to download the new files!

Hopefully this answers your questions, thank for checking out Vitality!
dolonnen PURCHASED

How can I style the label text of the contact form? Especially the text color, which is grey.

I've searched in the used css file of the template. I've wrote a inline css directly in the html-tag of the label. I also searched in the javascript files for commands that changes the color at runtime or so (but I'm a noop on js). I've checked always with the chrome DevTools if the changes take effect on the css attributes of the label tag but nothing happens.
I'm using version 1.4.0

Where can I style the label tag?

The floating label that appears when the form is beginning to be filled out is red by default, but I am not sure if that is what you're talking about. The placeholder text is a grey color by default, is this what you are referring to?

If you are talking about the placeholder color, you need to use the ::placeholder pseudo-class on the actual input.

So it would look something like this in the CSS:

:-moz-placeholder {
color: #000000;

That would make the placedholder text black in ALL forms, if you wanted to target just the contact form at the bottom you could just put a specific class name in front of the pseudo-class.

Hopefully this helps!
dolonnen PURCHASED

Thank you, that helps a much. Yes, it was the placeholder. Yes, the css pseudoclasses and pseudoelements helps. But i have to need to split the css code for every selector, because "a group of selectors containing an invalid selector is invalid" see https://www.w3.org/TR/selectors/#Conformance

In addition I need the !important label

::-webkit-input-placeholder {
color: #555555 !important;
::-moz-placeholder {
color: #555555 !important;
:-ms-input-placeholder {
color: #555555 !important;
:-moz-placeholder {
color: #555555 !important;
Yes! That's right! I'm glad you found a solution, thanks for choosing Vitality! :)

I purchased the theme, it is awesome, thank you for the wonderful job! However, I have a couple of questions:

- the theme seems to have troubles when viewed in IE (not sure which version), what's the best fix for that?
- when I replaced the small logo with my own (in PNG), it is showing too small - does it have to do with format (SVG is a must?) or there is something else?


Hey there! Older versions of IE, before IE 9, will have some trouble handling this theme due mostly to the fact that Bootstrap 3 is only supporting IE 9+. Once we move this theme to Bootstrap 4, even more IE functionality will be dropped. The good news is that not a lot of people are using old versions of IE anymore, folks nowadays are mostly using IE Edge or they've moved to Chrome or Firefox.

SVG is not a must regarding the logo, but if you are using your own PNG keep in mind that the image dimensions of that image is being set in the CSS so you won't want any whitespace around your PNG file. Otherwise you can go into the CSS and change the dimensions on that navbar brand image.

Hopefully this helps!

Just bought the theme, thnx, so far so good ;)

Was wondering how I can recompile the css files using the lessc command. I use "lessc vitality.less ../css/vitality.css", however, this results in the red version. How can I generate the right css file with a different (predefined) colour scheme?

You will need to change the themePrimary variable in the variables.less file! That will create a custom color scheme from the LESS files. Hopefully this helps!
Theme looks awesome! I'd love to buy it, but I just have a quick question: is it possible to add Vimeo/Youtube videos to the portfolio instead of photos?
At the moment mp4, webm, and ogv are the only supported video formats. Sorry about that!
Hello. In the portfolio section, i want to use a iPhone device image as background instead of MacBook pro. When i switch the classes to use the iphone6 class, the image is very big and stretches out that section of the screen. I want the aspect ratio to remain the same as it does when the MacBook image is used. How can i accomplish this?
If you are using the iPhone 6 you'll need to set some parameters on the device container that it's being held in. Look for the .device-container class in the HTML and use CSS to set a max width to something like 350px, and then you want to use the Bootstrap 4 helper class .mx-auto to center the device mockup. It would look something like this:

Your custom CSS:

.device-container {
max-width: 350px;

And the HTML:

<div class="device-container mx-auto">

That should do the trick!
So the problem with that solution is that it also makes the MacBook images smaller. I have a portfolio of iPhone Apps and Websites that I want to display. I will be using both the MacBook mockups and iPhone 6 mockups. I like the transition that happens when you click the arrow on the right or left to display another portfolio item. I want the general size of the screen to remain the same regardless of iPhone mockup or MacBook pro mockup. How can i achieve this?
Since the items themselves are different in size then you can't get that effect with a universal class. I might ass a separate class then for an iPhone vs. iMac container. So instead of changing the .device-container class all together, you can add a new class, something like .device-container-mobile and set that to a max width, but then leave the one with the iMac untouched.

I've found a bug in Vitality 2.0.0 which was not present in 1.4.0.

When I view the template (specifically agency.html) in Safari on the iPad 3 in landscape orientation the header/masthead background image is ultra-magnified and therefore very pixelated. The problem doesn't seem to happen on any iPad viewport simulator I've tried - it only happens on the actual iPad.

Additionally and only in Safari on the iPad 3 (not on the iPhone) the Nav Bar doesn't show/hide when the page scrolls without an additional tap on the screen after the scrolling has stopped. Like the scroll event isn't working correctly..

I can email you a screen of the background image problem if you provide me an email address..

Kind regards,
I'll look into this. It has something to do with the fixed background position on iPad and similar devices. It messes with the resolution of the background image for some reason. The fix is to set the background position to scroll instead of fixed for that viewport size. I think I will have to up the threshold for that. Thanks for the update!

I've found a bug in the navigation in Vitality 2.0.1 which was not present in 1.4.0.

See http://themes.startbootstrap.com/vitality-v2.0.1/agency.html

When in mobile mode only (so, when the menu is compressed into the hamburger menu), if I select Pricing or Contact menu items, the page scrolls to the correct position, but when clicking on Menu again to show the menu items the wrong menu item is highlighted. So, after a scroll to Pricing it's the Work menu item which is selected, and after a scroll to Contact it's the Pricing menu item that's selected. Note that for all other menu items (Work, Process, Team, About) the correct menu item is selected.

This problem is prevalent on the website I'm creating from the 2.0.1 template (see http://dev.glitch.services:82/) where all my menu items except for Contact are highlighting the item /above/ the section I've scrolled to.

I assume there's an offset/position or something that controls which menu item is selected, but I don't know where to find it or where to tweak it. As far as I'm aware this wasn't a problem in 1.4.0.

Kind regards,
There is a scrollspy offset in the vitality.js file that needs to be tweaked it seems! Thanks for catching this one!
I'm having an issue with this theme in IE11 - (everything seems fine in Chrome / Edge)
The centred logo on the home page is stuck to the top of the page, floating over the menu. You can see this in your demo site here opening it in IE11 and the issue is much more prominent on my site as I have text there instead of a logo
It looks like there might be a z-index issue with IE11. I'll look into that, thanks!

i wanted to use galaxy_s5 mockup/portrait for Portfolio Carousel..

but ratio is broken..

how can i apply it?

please reply... sorry for my poor english..
If you are using a portrait style mockup you might need to add extra padding or margin to the .device-mockup class to make the actual device mockup smaller to fit the page.
sonic5511 PURCHASED
how to set one of Three Page Styles (Default, Modern, and Vintage).
Thank you.
Hi there! My apologies, the modern and vintage styles have been removed in the last update since they weren't getting used that much.

What those styles included were simply different font pairings. If you'd like me to help you create a custom font pairing for your site just send me a quick email from the Start Bootstrap profile page here on WrapBootstrap and I can help you out!
sonic5511 PURCHASED
I set a Vitality Video template for example, when I press the button process page scrolls to the section of the process but the process button is not highlighted, the button marked team is highlighted then one back, and this work to all, not highlighted what i press?
Please test this, thank you.
I may need to adjust the scrollspy offset slightly in the vitality.js file. If you go into that file and adjust the scrollspy offset number to be a little higher it should fix the issue!
I've purchased a couple of themes from you guys and I love them! I have one issue with all templates though and it's the logo. Is there a way to enlarge logo without increasing size of the nav menu items? I mean the logo always look small...
Thank you so much in advance!
Really really appreciate it!
The logo when set as an image has it's dimensions set via CSS. If you want to change the size of the logo, I'd recommend using an SVG for starters, and then setting the height and/or width to a larger size than is currently set in the CSS. Hopefully this helps!
sonic5511 PURCHASED
you have a little bug to Vitality theme:
Your original code with bug that you deliver to index:
<!-- Example Modal 3: Corresponds with Portfolio Carousel Item 3 -->
<div class="portfolio-modal modal fade" id="portfolioModal3" tabindex="-1" role="dialog" aria-hidden="true" style="background-image: url('img/agency/portfolio/carousel/bg-3.jpg')">
<div class="modal-content">
<div class="modal-dialog">
My code withou bug:
<!-- Example Modal 3: Corresponds with Portfolio Carousel Item 3 -->
<div class="portfolio-modal modal fade" id="portfolioModal3" tabindex="-1" role="dialog" aria-hidden="true" style="background-image: url('img/agency/portfolio/carousel/bg-3.jpg')">
<div class="modal-dialog">
<div class="modal-content">
This is a little help to other buyers.
Got it, thanks. I will make this fix in the next update!
atalesky PURCHASED
Hi! I purchased this, and am attempting to convert it into a Visual Studio 2017 .Net Core project - but just with the HTML working correctly for now - however, the CSS does not seem to work properly. Do you have a version of this in a .SLN file so I can start modifying in visual Studio?
I don't unfortunately, I am not too familiar with Visual Studio so I am not sure I can help you out on this one. If you do find an answer let me know though so I can help others down the road!

nice work. Before i buy i want to ask for the possibility to have a slider in the background instead an image. Is that possible?


It would require some custom coding since it's not set up that way out-of-the-box. This is a feature I'd consider adding in the future though, but for now unfortunately it doesn't come with it included, but it's possible to do!
Hi, Great templates. Just got one issue I can't work out. On the creative template when you click on 'contact' on the navigation bar at the top the highlight goes to 'work' not onto 'contact'. Is there an easy fix for this? May thanks. Rob.
This should be fixed in the next update. You just need to set the scrollspy number to 75 instead of 70 in the vitality.js file. Hopefully this helps!
I am also having this problem. My scrollspy seems to be set on 68 but changing it to 75 didn't help much. Same thing at the Contact but mine has the Menu (Gallery) above it and if I don't scroll a bit more above it then it won't show the highlight on the contact part.

Help, please? :B <3
scroll a bit below it won't show the highlight on the contact part.*

Sorry, english is not my primary language ehehe
Yes it's just the offset - you will need to set it down I think...try something like 65 and see if that works!
Hi Guys!
I bought the theme and made some adjustments. Under mobile devices the page is faulty/defective. The look is not like the original. Horizontal "scrolling" or "wiping" is possible. The navigation bar has become much wider and the boxes are only half as wide as the display. The HTML code is validated and error-free.

Would you help me please with this issue?

Best regards
Make sure you didn't remove any sort of information from the head tag. If you removed the responsive meta tag then the page will not work as intended. Hopefully this helps!
I checked it and it still does not work.

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">

<title>perspactive - institute</title>

<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">

<!-- Custom fonts for this theme -->
<link rel="stylesheet" href="css/stylesheet.css" type="text/css"/>

<!-- Plugin CSS -->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="vendor/owl-carousel/owl.carousel.css" rel="stylesheet" type="text/css">
<link href="vendor/owl-carousel/owl.theme.css" rel="stylesheet" type="text/css">
<link href="vendor/owl-carousel/owl.transitions.css" rel="stylesheet" type="text/css">
<link href="vendor/magnific-popup/magnific-popup.css" rel="stylesheet" type="text/css">
<link href="vendor/animate.css/animate.min.css" rel="stylesheet" type="text/css">
<link href="device-mockups/device-mockups.min.css" rel="stylesheet" type="text/css">

<link href="css/vitality-red.css" rel="stylesheet" type="text/css">

<!-- Temporary navbar container fix -->
.navbar-toggler {
z-index: 1;

@media (max-width: 576px) {
nav > .container {
width: 100%;

At this point it really depends on what custom CSS you've added. That is probably what is giving you horizontal scrolling issues on mobile.
I have tried it with the original CSS files and the problem exist. I also validated the HTML documents.
At this point I'd need a link to the site so I can see things in action. You can contact me directly using the form on this page: https://wrapbootstrap.com/user/StartBootstrap
I contacted you.
Thanks, I will check it out and get back to you ASAP!
Hi There,

I purchased the template and really love it, but I'm having trouble making the Portfolio carousel automatically play.
I thought I could add:


To the owl-carousel-overrides.less file, but I cant get it to work. Could you point me in the right direction please?

Many Thanks
Hello again,

I figured it out, I added the following to the (".portfolio-carousel").owlCarousel section in the vitality.js file:


Looks like I need to learn MORE about LESS.

Thanks again for a great template.
I'm glad you figured it out!

i really love your template and i'm currently woking on it right now, i try to figure out how to change the way template present

What i want is to
1. Change pop-up screen when press images on portfolio section to show pop-up page same as Portfolio Carousel section instead of showing image gallery.
2. Try to fix some bug when press Pricing or Contact on nav bar, it seem like the active selection button don't highlight on the section it should be.

I use agency template and i hope you can give me some advise.

Best regards
Hey there!

For question one:
The full page modals that you see when the portfolio carousel items are clicked on are handled by the modal feature of Bootstrap. You can see that each portfolio carousel item links to a certain modal ID, and that the modals themselves are located at the bottom of the HTML with their own unique ID's. If you want to make more modals, and link to them, just change the links in the portfolio grid to match a new modal ID and then create new modals with unique ID's that match the ones you're linking to in the grid. You can copy and paste the existing modals and just change the ID, that's the easiest way to do it.

For question two:
It seems the offset is acting a little strange below the portfolio section. If you want to fix it up you can go to the vitality.js file and adjust the offset of the scrollspy to be a little bit smaller number, maybe just by 2 or 3, and that should fix the problem you're seeing. I will take note of this bug and update the template.

Thanks! Hopefully this helps!
Thank you for great advise, i did fix bug on nav bar but it seem like for my first question i did changed modal ID and linked them in portfolio grid section and it appear with screen that said "image could not be loaded" instead. Can you please give me more advise?

Best regards
It is still loading from the magnific popup plugin it looks like. What you'll need to do is go into the vitality.js file and remove the following code:

// Magnific Popup Settings
type: 'image',
image: {
titleSrc: 'title'
Hello there,

Just want to tell you that everything working perfectly and i really thank you for great advise.

Best regards
Wonderful! Glad to hear it!

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