Free DevExpress Bootstrap v4 / v5 Themes

This repository contains free and open source themes that were created for websites built using Bootstrap v4 / v5 or later.

Table of Contents

• What's Included
  • DevExpress Blazing Berry
  • DevExpress Office White
  • DevExpress Purple
• Getting Started
• Customization
• Copyright and License
• More Information

What's Included

DevExpress Blazing Berry

Open CSS File | Open Minimized CSS File | View Demo

DevExpress Office White

Open CSS File | Open Minimized CSS File | View Demo

DevExpress Purple

Open CSS File | Open Minimized CSS File | View Demo

Getting Started

The /dist/ and /dist.v5/ folders include nested folders whose names correspond to theme names: blazing-berry, office-white, and purple. Each nested folder contains the following theme-related files:

1. Theme stylesheets that you can apply to your application.

• bootstrap.css - a ready-to-use CSS file.
• bootstrap.min.css - a ready-to-use minimized CSS file.

2. Theme source files that you can customize to create your own theme.

• _variables.scss - a file with v4 / v5 variables.
• _styles.scss - a file with custom CSS rules.
• {theme_name}.scss - a theme file that imports variables, the default Bootstrap theme, and custom CSS rules. Do not change the import order is this file.

Customization

Do the following to customize the theme source files and compile the resulting theme:

1. Clone or download this repository.
2. Open the dist/{theme_name}/_variables.scss file and modify v4 / v5 variable values. You can also add your own variables.
3. Open the dist/{theme_name}/_styles.scss file. Modify CSS rules or create custom rules. You can use a browser’s Developer Tools to inspect UI elements.
4. Install Node.js and npm if they do not exist on your machine.
5. Go to the folder where the package.json file is located. By default, the target bootstrap package source version is set to "^5". You can specify the required version (for example, "^4") by modifying the package.json -> dependencies -> bootstrap value. Then, open the console window and run npm install to install all the dependencies (repeat after changing the bootstrap package version).
6. Execute the npm i --global gulp command to install the gulp globally.
7. Run gulp to compile all themes once or gulp watch to turn on the watcher that recompiles themes as soon as you change source SCSS files.

This creates two new CSS files (bootstrap.css and bootstrap.min.css) in each theme's folder or overwrites the existing files according to your changes.

Copyright and License

Copyright © 2018-2021 Developer Express Inc. All trademarks or registered trademarks are property of their respective owners. This project code is released under the MIT License.

More Information

Read this blog post for more information about this repository.

Support and Feedback

Welcome to our Support Center if you want to ask questions, share ideas, or report an issue.