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!

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!

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!

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 to add this purchase to your account

That's about 4 cups of coffee

Licenses: Details »

Single application $10
  • HTML Template
Bootstrap: Compatible with 4.x
  • Responsive
  • IE 10, 11
  • Latest Chrome
  • Latest Edge
  • Latest Firefox
  • Latest Safari
Uses Less:Yes
Uses Sass:Yes
Tags: bootstrap 4, landing page, less, one page, portfolio, responsive, sass, start bootstrap
Released:3 years ago
Updated:2 weeks ago
Sold exclusively on WrapBootstrap


Signed up 3 years ago

Need an admin theme?

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 9/10/11
  • Latest Opera

Features & includes

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