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.

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

Open CSS File | Open Minimized CSS File | View Demo

Open CSS File | Open Minimized CSS File | View Demo

Open CSS File | Open Minimized CSS File | View Demo

Open CSS File | Open Minimized CSS File | View Demo

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.

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 © 2018-2022 Developer Express Inc. All trademarks or registered trademarks are property of their respective owners. This project code is released under the MIT License.

Read this blog post for more information about this repository.

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