❤️ Creative Tim Club - Access all our Present & Future Premium Products

Now UI Kit PRO

Now UI Kit PRO

Premium Bootstrap 4 UI Kit

· 4.90/5 (131 Reviews)
Get Free Demo

Premium Bootstrap 4 UI Kit

Product description


[DEPRECATED] - This product will not receive updates anymore!
Check the new product here!

Now UI Kit PRO is a premium Bootstrap 4 kit provided by Invision and Creative Tim. It is a beautiful cross-platform UI kit featuring over 1000 components, 34 sections and 11 example pages.

Now UI Kit is one of the most popular UI Kits online, provided in PSD and Sketch formats by Invision. We wanted to find a way for developers worldwide to benefit from using it. We created the fully coded version of Now UI Kit Free and based on the feedback that we've got from our users we created the PRO version.

Now UI Kit PRO will help you create a clean and simple website that is a perfect fit for today's flat design. It is built using the Bootstrap 4's 12 column grid system, with components designed look awesome together. It makes use of bold colours, beautiful typography, clear photography and spacious arrangements.

Create awesome, lifelike prototypes with InVision and Now so your users can experience and give feedback on your vision!

To get the PSD and Sketch files, please visit Invision. We used 100 Icons from our friends from Nucleo Icons, check their 20.000 icons here.

Bootstrap 4 Support
Now UI Kit PRO is built on top of the much awaited Bootstrap 4. This makes starting a new project very simple. It also provides benefits if you are already working on a Bootstrap 4 project; you can just import the Now UI Kit style over it.

Sections
Now UI Kit PRO is coming with 34 pre-made sections and practically infinite possibilities to generate more sections using the provided components, their classes and colors. You can view all sections here.

Example Pages
We wanted to fully display the power of this kit, so the kit comes packed with examples showing you how to use the components. Inside the product you will find:

Tutorial & Documentation
In order for you to easily be able to use the Now UI kit, we have created a tutorial page. It shows the structure for the files inside the archive and how to import them. It then features every components with a description and example of how to use it.

Product certified by: Creative Tim
Now UI Kit PRO - Fully Coded and Responsive HTML5
Now UI Kit PRO - Sass Files for Professional Front End Developers
Now UI Kit PRO - Sketch Files for Professional Designers
Now UI Kit PRO - Crafted with Bootstrap - the most popular Front End Framework
Now UI Kit PRO - Adobe XD Files for Professional Designers
Now UI Kit PRO - Figma Files for Professional Designers
Downloads
1,243
Version
1.3.1
Changelog
Updated
4 years ago
Released
6 years ago
Reviews
Handcrafted Elements
1000
Customized Plugins
7
Example Pages
11
Premium Support
Documentation
Fully Responsive

Trusted by 2,467,125 developers and these companies

Freelancer

Good for a personal or client web/mobile app.

$69

Startup

Build your startup or client web/mobile app.

$149

Company

Perfect for web/mobile apps or SaaS projects.

$249

*one time payment - no hidden fees, no subscription

Creative Tim Club

Lifetime Access to all our Present & Future Premium Products!

$749 $349

Documentation   
Full Code   
Designer Files   
Use in SaaS   
Projects    1 1 unlimited unlimited
Team Size    1 up to 5 up to 20 up to 20
Tech Support    support support priority support priority support
Free Updates    6 months 12 months 12 months unlimited

Secured Payment by 2Checkout with:

Info: If you are a Registered Company inside the European Union you will be able to add your VAT ID after your Press "Buy Now"

Frequently asked questions

You can use our products to create an application where the end user is charged with a monthly/annually subscription plan (SaaS - Software as a Service).
The Freelancer license is aimed at people who work on their own. It grants you the right to use the purchased product only for one project (either yours or for a client). This license is not compatible with SaaS-based projects.

The Startup license is aimed at smaller teams. It grants you and your team (up to 5 people) the right to use the purchased product only for one project (either yours or for a client). This license is not compatible with SaaS-based projects.

The Company license is aimed at agencies or larger teams. It grants you the right to create other licensed products base on the template that you purchase form us. This license it's compatible with SaaS-based projects.

The Enterprise license is aimed at large companies with multiple projects. It grants you the right to create any kind of software, SaaS, digital products and sell them. For restrictions, please check here

Also, the differences between our 3 types of Licenses is given by the Tech Support / Free Updates availability and Team Size.

More info here.
The differences between the Free and Pro products consists of the number of components, plugins, sections, pages in each.

More info here.
You can upgrade from one license plan to the next one whenever you want simply by paying the cost difference. You only have to send us an email in which you specify the product that you have and the Order ID. We will give you an unique coupon for the upgrade.

More info here.
Yes, of course! You can use the PRO product for an open source project if you add in the Readme file (on github) or in the description of your product that you built the project using “X product from Creative Tim” and a link to the product page.

More info here.
You don't have any restrictions using the Enterprise License; you just cannot create products or businesses that are in direct competition to us using our products:

  • You can’t re-distribute the Item as stock, in a tool or template, or with source files. You can’t do this with an Item either on its own or bundled with other items. You can’t re-distribute or make available the Item as-is or with superficial modifications. For example: You can’t license an item and then make it available as-is on your website for your users to download.

  • You can’t use the Item in any application allowing an end-user to customize a digital or physical product to their specific needs, such as an “on-demand”, “made to order” or “build it yourself” application. You can use the Item in this way only if you purchase a separate License for each final product incorporating the Item that is created using the application. For example: you can't create a website builder.
Depending on the License you purchase, you can use our products to either code a website/web application for you, for a client, or for multiple clients, which will be hosted on one or multiple domains:

  • For example, if you purchased the Freelancer License or Startup License, you can create only one website (for you or a client). Same, if you have multiple subdomains, like "test.yoursite.com" or "dev.yoursite.com", you can use the Freelancer License or Startup License.

  • If you want to create multiple websites, you will need a bigger License (like Company or Enterprise). Same, if you have a complex application like a SaaS and have "client1.yoursite.com" and "client2.yoursite.com" and "clientx.yoursite.com", you will need a multi-domain License like Company or Enterprise.
Depending on the License type you purchased, one or more developers (from your team, for example) can access the product:

  • If you purchased the Freelancer License, only you (one developer) can use the product.

  • If you purchased the Startup License, up to 5 developers (including you) can use the product.

  • If you purchased the Company License, up to 20 developers (including you) can access the product.

  • If you purchased the Enterprise License, you can work with a bigger team - more than 20 developers can access the product.
Here are the steps to give product access to your team members.
It consists of the product technical manuals like getting started, build tools, and it also describes every component with code examples.
It means that you receive access to the entire code for HTML, JS, and SCSS files depending on the different packages of each product.
When you buy our products you have access to our Support Team so you can submit any ticket to us regarding product functionalities and bug fixes (learning and tutorials related requests are not included). You will get responses directly from the product’s creators in 24 hours for regular Support and in a couple of hours for Priority Support (during business days).
Depending on your license type, you have a determined period when you receive product updates that include bug fixes and new features.

More info here.
Please send us an email at [email protected]. We will send you an upgrade coupon for your desired Bundle, and you will only pay the price difference.
Yes, you can. It is available for all Licenses type as long as the support included in the License is still valid.

More info here.

Get Free Demo

Learn more about Now UI Kit PRO in the light demo version. It has features from the full version. We hope you will like this introduction to this product!

What is in Demo? What is in PRO Version?
Elements 50 1000
Plugins 3 7
Examples Pages 3 11
Full Coded
Documentation
SASS Files
Designer Files
Premium Support

We are here to help you!

115 Web Developers commented on this product

joseantos
  • downloaded
5 years ago

@dragosct Good morning. the contact forms do not send the email. How do I activate them? Thank you

dragosct
  • owner

Hi, @joseantos ! Thank you for using our products. Yes, the contact forms don't send any email because we only do the frontend, not the backend for our products. Please see here a small tutorial on how to build one working contact form http://tangledindesign.com/how-to-create-a-contact-form-using-html5-css3-and-php/. Regards, Dragos
5 years ago

markhyx
  • downloaded
5 years ago

Is there a infinite scrolling option say for a list of blog posts? Thanks

dragosct
  • owner

Hi, @markhyx ! Thank you for using our products. Please, can you show us an example of what you want to achieve? Regards, Dragos
5 years ago

markhyx
  • downloaded
5 years ago

Drago, well on my main blog page I want to have the post summaries load continuously as a user scrolls down the page. In much the same way as Linkedin and Facebook posts load as you scroll. In other words I do away with pagination.

dragosct
  • owner

Hi! Now I understand what you want and I searched for a plugin like this and I found one here https://infinite-scroll.com/. In our product, we don't have one like this. Regards, Dragos
5 years ago

codingob 5 years ago

what would the best approach to refactoring this into reactjs?

dragosct
  • owner

Hi, @codingob ! Thank you for using our products. I think you can start from scratch a react app, take the CSS from the now ui kit pro and then you can start to make components with our components from the product. Regards, Dragos
5 years ago

codingob 5 years ago

I tried creating the app and when I load the assets into the file I get an error about css loading

dragosct
  • owner

Hi, @codingob ! I think the best way it's to wait until we release the now ui kit pro react, because I'm not a react developer and it's not ok to give you some wrong advice, but if you want we have some people that you can contact to help you with the product. Name: Humphrey Pietersen > Email: [email protected]_, Name: Alex Plop > Email: [email protected]_, Name: Diana Miron > Email: [email protected]_. Hope that information helps you. Please let us know if we can help you with anything else. Regards, Dragos
5 years ago

markhyx
  • downloaded
4 years ago

Hi, I'm having a problem with a modal. I have used the "Login" modal from the docs https://demos.creative-tim.com/now-ui-kit-pro/docs/1.0/components/modal.html on my test page here https://ampli.buzz/homespeed It's the orange Subscribe button at the top It launches ok, but I can't interact with it enter data or press button or close it. Plus the color looks faded compared to the demo version. The code is the same as the demo version, so can you tell me where I've gone wrong? Thanks

markhyx
  • downloaded

PS How do I access my Premium Support?
4 years ago

dragosct
  • owner

Hi, @markhyx ! Thank you for using our products. We accept the support requests at https://www.creative-tim.com/contact-us, there is the whole team ready to help you. If you have a bug report we recommend you to check the Github of the product that you have and see if our team already gave a solution for that bug or open a new issue. You can simply search the name of the product on our official organisation -> https://github.com/creativetimofficial or you can find the “Report issue” button in the navbar of the documentation of the product that you purchased. Also please make sure you check our https://www.creative-tim.com/faq before sending a message so you can save time with a quick answer. Please let us know if we can help with any other details. Related to the modal problem to fix it, please take all the div with class modal and put it at the end of the tag body like it is without any parent div. Regards, Dragos
4 years ago

markhyx
  • downloaded

dragosct, re modal, I did what you suggested, I think, but it made no difference. What am i missing? https://ampli.buzz/signuptest
4 years ago

dragosct
  • owner

Hi! The whole modal div it's in the navbar div and it's not ok, it must be the child of the body tag like you see in this image link: https://www.dropbox.com/s/5cizidxwybb83h8/Screenshot%202019-04-08%20at%2010.11.13.png?dl=0. Regards, Dragos
4 years ago

markhyx
  • downloaded

But if i put it outside the nav bar it's not positioned where i want it. It ends up at the bottom of the page, which is pointless. There must be a way to position them where you want them?
4 years ago

dragosct
  • owner

Hi! Nothing will be changed. Please see this video that I made for you: https://www.dropbox.com/s/dmfoteju3o5migr/nud-pro.mov?dl=0. Regards, Dragos
4 years ago

markhyx
  • downloaded

Ah dragosct, you forget to mention you rewrote and rearranged a key piece of code. Had to squint really hard to see what you had done. Seems to be ok now. Thanks
4 years ago

dragosct
  • owner

Sorry if I didn't explain to you very good, but I'm glad now it's ok and I also closed the issue on GitHub. Regards, Dragos
4 years ago

elforestero 4 years ago

I have a logo image in the navbar at the top of a Now UI Kit webpage. I want the logo image to be replaced by a different image when the user scrolls down the page (at the same time as the color of the navbar changes). I'm having trouble figuring out how to approach this. Can I do this using CSS, and if so, how? Thanks in advance for your help!

elforestero

I figured out how to do this by adding a couple lines to change the source of the image in the checkScrollForTransparentNavbar: debounce(function) in the now-ui-kit.js file. However, the image is stretched vertically, and setting width and height parameters in that function or in the html file don't prevent the stretch from occurring. Any idea how I can resolve this?
4 years ago

dragosct
  • owner

Hi, @elforestero ! Please give us a link to your project to see what is happening there, because in this way we can't figure out. Regards, Dragos
4 years ago

markhyx
  • downloaded
4 years ago

Hi, I want to place a sticky button or modal at the bottom of the screen. What's the best combination of elements/components to do that? Thanks

dragosct
  • owner

Hi, @markhyx ! You can take a modal example from the docs or from the index.html where it's the components page and put it on the desired page. Regards, Dragos
4 years ago

markhyx
  • downloaded

dragosct, yeah that's kinda what i want to do, but I just want to make it stick to the bottom of the viewing screen. Don't actually have a sticky navbar at the bottom, so I need to fix and position it somehow. I did look at the docs, but wasn't sure which bits other than the modal i needed.
4 years ago

dragosct
  • owner

Hi! You can use the position: sticky on any component that you want. Regards, Dragos
4 years ago

markhyx
  • downloaded
4 years ago

Thanks, I ended up using "fixed-bottom ml-auto" as in <button class="btn btn-primary btn-round fixed-bottom ml-auto" > to get what I wanted. The sticky-bottom property didn't do anything.

edster.s
  • downloaded
4 years ago

This theme has been great but I've started getting a Take our developer survey, opened to coders everywhere! 🙏🏻 embedding on the site. Where is this so I can remove it?

dragosct
  • owner

Hi, @edster.s ! Thank you for using our products. Please, can you be more specific about your question? Regards, Dragos
4 years ago

You have to be logged in to post a comment. Login here.