With our latest release, the DevExtreme components now support the Bootstrap 4 framework in two major ways:
- Use any DevExtreme components with applications based on Bootstrap 4
- Import colors from any Bootstrap 4 themes to DevExtreme themes
Let's take a look.
Bootstrap 4 released
In January 2018, the Bootstrap team released Bootstrap 4. Then, a week later, we announced our support for Bootstrap 4 in several of our platforms.
Since then, the DevExtreme team has worked hard to ensure compatibility. So, I'm happy to say that all DevExtreme components are fully compatible with Bootstrap 4!
Import Bootstrap themes
The DevExtreme components provide their own set of great themes. In fact, we just released the new 'Material Design' theme in v18.1.
However, if you're using the Bootstrap framework then you likely want to use one of their free or paid themes. And there are so many themes.
To make it easier to use Bootstrap themes with DevExpress components, our online theme builder provides an option to import a Bootstrap Less variables file:
Once imported, our theme builder analyzes then creates a new CSS file that you can import into your project that uses DevExtreme components. This new CSS contains the colors that specify how the DevExtreme color mimic the look of the Bootstrap theme that you just imported.
Less to Sass
Bootstrap 4 has switched their CSS preprocessor from Less to Sass. In fact, they announced this intention back in 2015:
Moved from Less to Sass. Bootstrap now compiles faster than ever thanks to Libsass, and we join an increasingly large community of Sass developers. - Bootstrap Blog
Therefore, we've added a new option to our theme builder that makes it easy to import Bootstrap 3 or 4 themes:
Learn more
Bootstrap 4 brings several changes and new themes; therefore, I recommend reading their announcement. If you're migrating from Bootstrap 3, then take a look at this helpful migration guide.
Give Us Your Feedback
Are you using Bootstrap 4 with DevExtreme? Drop me a line below.
Thanks!
Email: mharry@devexpress.com
Twitter: @mehulharry