Last time, we covered the five best Bootstrap editors and tools, among those, were Pingendo, Bootstrap Build, and Bootstrap Magic. For the full list of tools that are available for speeding the design and overall bootstrapping of your website, please read the previous piece. In this article, we’ll cover the best and free (some, though, have paid premium features) Bootstrap UI Kits that you can use as starting points for your designs.
Paper Kit 2
Paper Kit is a free Bootstrap UI kit, that’s been advertised as not having a material, flat, iOS design. The kit features 50 handcrafted components, 3 customized plugins, and 3 examples pages. The pro version will give you access to 1000 components, 7 plugins, and 15 example pages. Plus, of course, documentation, SASS, and Sketch files. The personal license to extend to Pro will cost you $69, that’s a pure HTML package we’re taking. HTML + Sketch package costs $374 for a year. You can get an additional customer support service for another $9 a year. Yet, it’s a pretty cool package advertised on my developer resources, besides there’s always a free option with fewer components, but if it’s free, then who cares?
But, what exactly is Paper Kit Pro? It’s actually a set of coded web components built over Bootstrap having a design that is similar to that of a paper. The kit itself comes with a huge number of customizable components, which are designed to look perfectly well if together and follow the same design pattern. Besides, all components are completely responsible and will look great on any screen.
This kit I happened to try and I think if your goal is to prettify something personal, then Demo version is pretty much sufficient for everyday needs.
Shards
Shards is a free and modern UI toolkit that’s lightweight and built with performance in mind (weighing only ~13kb minified and gzipped), responsive (with Bootstrap 4 at its core), and well documented (and being recommended by fellow developers). Each component within Shards have been designed from scratch and comes with smooth micro-interactions. There are 10 extra packaged components that help to cover almost any type of interface, as well as two custom pre-built landing pages. Icon packs (from Material and Font Awesome packs) are supported by default and can be placed within any element. The original Sketch and SCSS files are included. If you want to go beyond ten components, then there’s Shards Pro comprised of more than 120 blocks, more than 350 components, 15 pages, and 13 categories.
Landing
Landing has literally tons of handcrafted components and includes more than 80 beautiful and colorful layouts, icons sets, easy to customize templates, interactive elements, and can be edited both in Photoshop and Sketch.
Now UI Kit
Now UI Kit is another popular option among responsive Bootstrap UI kits. It’s a beautiful cross-platform kit featuring over 50 elements and 3 templates. There are both PSD and Sketch formats by Invision, as well as an HTML version. There’s a quite clear tutorial page which shows the structure for the files inside the archive and how to import them, as well as features every component with descriptions and examples on how to use them. Overall, there are 50 handcrafted components, three customizable plugins, three example pages, but there are still more in case you purchase the Pro Version.
Pro version includes 1000 components, seven plugins, and 11 example pages. Including documentation, SASS, and Photoshop files.
Miri UI
Miri is an easy to customize, extremely lightweight, and feature-packed free UI Kit built with the Bootstrap 4 framework. It contains a huge collection of essential UI elements that will come handy when working on complex web design and development projects. If you want to get access to more features and components, be sure to check out the Pro version of Miri UI Kit.
More components can be found with Miri UI Pro along with plenty of well-designed pages. In fact, you can find separate Landing, Login, Register, Contact, and more pages with the UI kit.
Miri is not free, however, still worth recommending. Expect to pay $30 for a regular package (and $49 for a developer package).
WrapKit Lite
WrapKit has two versions: free and paid. The free one is meant to be only for personal use with no support but free lifetime updates. Another features you’re getting for free include more than 17 UI blocks, more than 25 UI elements, one landing page, and other standard additions like SaSS Base CSS, Search Engine Optimized Code, W3C Validated Code, Multi Level Dropdown Menu, ease of customization, etc. When you’re upgrading to Pro, you’ll end up with 23 demos on top, plus one year support for the platform in case you happen to have any questions.
CoreUI
CoreUI is another beautiful UI Kit that features multiple admin templates, provides charts and graphs for traffic, sales, stats, social media, and user activity. Moreover, CoreUI is an open source Angular & Bootstrap 4 based admin template that has already scored more than 840 stars on GitHub, so check it out and if you like, please share some love. CoreUI also supports other frameworks, including React and Vue. If you happen to purchase CoreUI Pro this June, you’ll get 90% off the initial price.
So let’s break it down a little further and see what you’re getting for both free and pro versions.
With CoreUI for Angular, you’re getting All Bootstrap 4 components, free access to updates, SCSS Source Files, Chart.js, Pace, and Basic Support. With the Pro Version, you’ll end up with a lot of stuff, including Sketch files, DataRangePicker, DataTables, Gauge.js, JQuery UI, Quill Text Editor, premium support, and access to a private GitHub repository. You can also choose All frameworks edition and Sketch for $99, but for access to a private repository for all frameworks and Sketch it’s going to be $69 a month rather than a one-off payment.
Material Design Lite
Material Design adds Material Design look to your site. It doesn’t rely on any JavaScript framework and defines itself primarily as a separate material UI library without BootStrap. Nevertheless, we’ve decided to include it here, because it’s beautiful at optimizing sites for cross-device use and degrades gracefully for older browsers. All MDL components are created with JavaScript, CSS, and HTML and adhere to modern web design principles, like browser portability, device independence, and elegant degradation.
There are a bunch of templates, including a blog, dashboard, portfolio, stand-alone article, and text-heavy webpage. There are multiple components as well ranging from badges, buttons, chips, dialogs, lists, sliders, etc. There’s a custom CSS theme builder, a couple of typography styles
