Free DevExpress Bootstrap v4 / v5 Themes

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

Note
Built-in themes for DevExpress Blazor components are now available as a DevExpress.Blazor dependency (v22.1+). Refer to the following topic for information: Applying Devexpress Blazor Themes.

Table of Contents

• What's Included
  • DevExpress Blazing Berry
  • DevExpress Blazing Dark
  • 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 Blazing Dark

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, blazing-dark, 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. Go to the dist/{theme_name} or dist.v5/{theme_name} folder. Open the _variables.scss file and modify v4 / v5 variable values. You can also add your own variables.
3. In the same folder, open the _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. Open the console window and run npm install to install all the dependencies.
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 overwrites the bootstrap.css and bootstrap.min.css files for each theme in the dist and dist.v5 folders.

Copyright and License

Copyright © 2018-2024 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.