DEV Community

Cover image for Free and open source Bootstrap 5 UI Kit
Zoltán Szőgyényi for Themesberg

Posted on • Originally published at themesberg.com

Free and open source Bootstrap 5 UI Kit

Hello devs 👋🏻

Today I want to show you a Bootstrap 5 UI Kit which we've been working on for about a year with my friend. The first version one year ago was based on Bootstrap 4, but now that Bootstrap 5 has been updated to Beta we thought it was time to update the whole kit once again.

We used NPM, Gulp, and Sass to manage libraries, compile source files, and more easily change and update styles using the variables and mixins from Sass.

Bootstrap 5 UI Kit

Pixel Bootstrap 5 UI Kit features over 80 UI components including date pickers, modals, pricing cards, profile cards, blog cards, and also 5 example pages.

Workflow

  • Most popular CSS Framework Bootstrap
  • Productive workflow tool Gulp
  • Awesome CSS preprocessor Sass

So without further ado, let me show you how you can install and use this Bootstrap 5 based UI Kit.

Quick start

  1. Download for free from Themesberg or clone the repository on Github

  2. Make sure you have Node and NPM installed on your machine

  3. Download Gulp Command Line Interface to be able to use gulp in your Terminal:

npm install gulp-cli -g
Enter fullscreen mode Exit fullscreen mode
  1. After installing Gulp, run npm install in the main pixel/ folder to download all the project dependencies. You'll find them in the node_modules/ folder.

  2. Run gulp in the pixel/ folder to serve the project files using BrowserSync. Running gulp will compile the theme and open /index.html in your main browser.

While the gulp command is running, files in the assets/scss/, assets/js/ and components/ folders will be monitored for changes. Files from the assets/scss/ folder will generate injected CSS.

Hit CTRL+C to terminate the gulp command. This will stop the local server from running.

Theme without Sass, Gulp or Npm

If you'd like to get a version of our theme without Sass, Gulp or Npm, we've got you covered. Run the following command:

gulp build:dev
Enter fullscreen mode Exit fullscreen mode

This will generate a folder html&css which will have unminified CSS, Html and Javascript.

Minified version

If you'd like to compile the code and get a minified version of the HTML and CSS just run the following Gulp command:

gulp build:dist
Enter fullscreen mode Exit fullscreen mode

This will generate a folder dist which will have minified CSS, Html and Javascript.

Documentation

The documentation for Pixel Bootstrap UI Kit is hosted on our website.

File Structure

Within the download you'll find the following directories and files:

Pixel Bootstrap UI Kit
.
├── LICENSE
├── README.md
├── dist
│   ├── assets
│   ├── css
│   ├── html
│   ├── index.html
│   └── vendor
├── gulpfile.js
├── html&css
│   ├── assets
│   ├── css
│   ├── html
│   ├── index.html
│   └── vendor
├── package-lock.json
├── package.json
└── src
    ├── assets
    ├── html
    ├── index.html
    ├── partials
    └── scss
Enter fullscreen mode Exit fullscreen mode

Resources

Reporting Issues

We use GitHub Issues as the official bug tracker for Pixel Pro Bootstrap UI Kit. Here are some advices for our users that want to report an issue:

  1. Make sure that you are using the latest version of Pixel Pro Bootstrap UI Kit. Check the CHANGELOG from your dashboard on our website.
  2. Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed.
  3. Some issues may be browser specific, so specifying in what browser you encountered the issue might help.

Technical Support or Questions

If you have questions or need help integrating the product please contact us instead of opening an issue.

Licensing

Useful Links

Social Media

Twitter: https://twitter.com/themesberg

Facebook: https://www.facebook.com/themesberg/

Dribbble: https://dribbble.com/themesberg

Instagram: https://www.instagram.com/themesberg/

Top comments (20)

Collapse
 
crearesite profile image
WebsiteMarket

MIT License?

Collapse
 
zoltanszogyenyi profile image
Zoltán Szőgyényi

Yep!

Collapse
 
frondor profile image
Federico Vázquez

But... But... Why gulp?? T_T

Collapse
 
zoltanszogyenyi profile image
Zoltán Szőgyényi

We're going to also add webpack :) (we started building it over 2 years ago) you can help us with the compiler though :)

Collapse
 
frondor profile image
Federico Vázquez

Try rollup, webpack is good for application bundles. Rollup is perfect for libraries ;)

Thread Thread
 
zoltanszogyenyi profile image
Zoltán Szőgyényi

Never heard of it. I'll check it out!

Collapse
 
zoltanszogyenyi profile image
Zoltán Szőgyényi

As a contributor to the open source project, of course

Collapse
 
sm0ke profile image
Sm0ke

Such a nice product ..

Collapse
 
zoltanszogyenyi profile image
Zoltán Szőgyényi

Thank you 😁

Collapse
 
pholly profile image
Philip Holly

Looks great and code looks good too 👍🏽

Collapse
 
zoltanszogyenyi profile image
Zoltán Szőgyényi

Thank you, Philip!

Collapse
 
tomasroj profile image
Tomáš Roj

I am very happy you are sharing this under open source license! Great job guys :D

Collapse
 
zoltanszogyenyi profile image
Zoltán Szőgyényi

Thank you!

Collapse
 
edydeyemi profile image
Edydeyemi

Looks Awesome. Thanks for sharing.

Collapse
 
zoltanszogyenyi profile image
Zoltán Szőgyényi

❤️

Collapse
 
theme_selection profile image
ThemeSelection

Awesome list..!!👍
Talking of Bootstrap 5, we have also prepared a Bootstrap 5 cheatsheet to make it easy to work with.

Collapse
 
zappellin profile image
Leon Guillaume

Really cool I look forward to use it

Collapse
 
zoltanszogyenyi profile image
Zoltán Szőgyényi

Awesome! Let us know and we may showcase your project in the readme section or in this article.

Collapse
 
atulcodex profile image
🚩 Atul Prajapati 🇮🇳

Amazing bro 🎯

Collapse
 
zoltanszogyenyi profile image
Zoltán Szőgyényi

Thank you :)