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

Free Bootstrap 4 UI Kit Angular

Product description


Now UI Kit Angular is a responsive Bootstrap 4 kit provided for free by Invision and Creative Tim. It is a beautiful cross-platform UI kit featuring over 50 elements and 3 templates.

Now UI Kit Angular 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. So, in collaboration with Invision, we are launching the Angular version of it!

Now UI Kit Angular will help you create a clean and simple website that is a perfect fit for today's flat design. It is built using the 12 column grid system, with components designed to fit together perfectly. It makes use of bold colors, 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 12.000 icons here.

Bootstrap 4 Support
Now UI Kit Angular 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. Most of the elements have been redesigned; but if you are using an element we have not touched, it will fall back to the Bootstrap default.

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 Angular, we have created a tutorial page. It shows the structure of 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. You can see the details here.

Product certified by: Creative Tim
Now UI Kit Angular - Fully Coded and Responsive HTML5
Now UI Kit Angular - Sass Files for Professional Front End Developers
Now UI Kit Angular - Sketch Files for Professional Designers
Now UI Kit Angular - Crafted with Bootstrap - the most popular Front End Framework
Now UI Kit Angular - Angular 2+ Structure with TypeScript
Now UI Kit Angular - Adobe XD Files for Professional Designers
Now UI Kit Angular - Figma Files for Professional Designers
Downloads
23,891
Version
1.4.0
Changelog
Updated
1 year ago
Released
6 years ago
Reviews
Star
Handcrafted Elements
50
Customized Plugins
4
Example Pages
3
Community Support
Documentation
Fully Responsive

Upgrade to PRO Version

Get more power with Now UI Kit PRO Angular. It has a lot more features compared to the free version. We hope you will create awesome websites/templates with this product!

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

We are here to help you!

38 Web Developers commented on this product

michischultze
  • downloaded
5 years ago

Thanks for clarify :-)

izakjackson
  • downloaded
5 years ago

Hi, when buttons are clicked it changes the color, i.e. the orange button when clicked goes blue. I cannot for the life of me find where I can change this in the scss files. Any help would be much appreciated!

chelaru_ciprian
  • downloaded

Hi @izakjackson . Thank you for using our product. All you have to do is to go on src/assets/sass/now-ui-kit/mixins/_buttons.scss file and add !important on lines 16,17,18. Tell me if it worked. All the best, Ciprian
5 years ago

izakjackson
  • downloaded
5 years ago

@chelaru_ciprian That worked perfectly, thanks!

chelaru_ciprian
  • downloaded

@izakjackson I'm glad it worked. Regards, Ciprian
5 years ago

alexitcu
  • downloaded
5 years ago

Hi, I'm having an issue with the datetimepicker component, and I cannot figure out how to solve it. Somehow, the chevrons to navigate to different months are inclined and have a grey border; the selected day is bordered in red, for some reason. Any help would be appreciated. Thanks!

chelaru_ciprian
  • downloaded

Hi, @alexitcu . Thank you for using our product. Can you tell me what changes have you done? All the best, Ciprian
5 years ago

alexitcu
  • downloaded
5 years ago

Hi @chelaru_ciprian , I have only made 2 small changes to _navbar.scss file. Here they are: max-height: 60px; margin-bottom: 10px; removed box shadow altoghther .bg-white{ background-color: $white-color !important; a { color: $black-color !important; } } Apparently, the red border error is something specific to macOS, as the border disappears if I click outside of the window.

chelaru_ciprian
  • downloaded

@alexitcu are you sure you did only 2 changes? I made them on the downloaded product and everything works fine. Best, Ciprian
5 years ago

alexitcu
  • downloaded
5 years ago

Hi @chelaru_ciprian I'm sure. I did re-copy the whole styles directory from the downloaded product. I have no issues when running the downloaded version, so that makes me think the cause of my problem may be the different versions of bootstrap / angular that I'm using in my own project?

chelaru_ciprian
  • downloaded

@alexitcu What version of ng-bootstrap do you have? Best, Ciprian
5 years ago

alexitcu
  • downloaded
5 years ago

@chelaru_ciprian 4.0.0

chelaru_ciprian
  • downloaded

@alexitcu I updated the product to match the latest versions. Download it again and tell me if everything works. Best, Ciprian
5 years ago

rodrigoeouzaereira 5 years ago

hi. I configure my project, but not displayed the icons, I need buy too show this icons or I forget of the configure anything?

rodrigoeouzaereira 5 years ago

If I configure in stackblitz.io, not working. but localhost that worked perfectly

chelaru_ciprian
  • downloaded

Hi, @rodrigoeouzaereira . Thank you for using our product. Have you imported the font & icons links from index.html? All the best, Ciprian
5 years ago

woshilirui
  • downloaded
5 years ago

Hi, if I want to add i18n, is it easy to do?

chelaru_ciprian
  • downloaded

Hello @woshilirui , And thank you for your interest in using our product. We haven't used i18n in any of our products and can't really answer your question. But I am going to tell you what we've told to a lot of our users that wanted something in our products that we haven't used, you can try and see if it suits your needs. Best, Ciprian
5 years ago

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