Bootstrap is a framework created by Twitter’s developers to consolidate their HTML/CSS design and widgets. Bootstrap provides a clean responsive design, but the set of widgets it includes is limited, especially when compared to what’s available in the Dijit library. The CSS/HTML theme can be used independently of the widgets, but how do you use the Bootstrap theme with the Dijit library?
As you may have guessed, it’s not quite as simple as including the relevant Bootstrap CSS files. However, Dijit supports custom themes, so with a bit of work the elements of the Bootstrap theme could be ported to Dijit widgets. Fortunately, this was just what the dbootstrap project set out to accomplish.
For a better idea of what this Dijit/Bootstrap marriage looks like, check out the dbootstrap gallery, a modified version of Dijit’s Theme Tester that also includes dgrid. Let’s take a closer look at dbootstrap and how to use it in your Dojo application.
Working with dbootstrap
The quickest way to get started with dbootstrap is to download a prebuilt version from the Releases page. To include it to your application you’ll need to add the dbootstrap class to your body element, just as with the standard Dijit themes. Unlike the standard themes, however, you don’t add the CSS with a <link> tag to your page. Instead you require the dbootstrap module when you start up your application, before creating any widgets.
The dbootstrap module automatically attaches the theme CSS using xstyle (for the curious, we explained how to do this in a recent FAQ). It also enables another beloved Bootstrap perk: it applies a patch to dijit/_AttachMixin (or dijit/_TemplatedMixin for Dojo versions prior to 1.9) that allows Font-Awesome icons to be used anywhere in your widget templates.
Loading the dbootstrap module requires adding the package to your project like any other dependency, e.g. as an entry in your packages config (see instructions for more details).
Working on dbootstrap
Styles in dbootstrap are written in stylus, so to use a modified version of dbootstrap it first must be built to generate the CSS. One way to accomplish this is to integrate the dbootstrap build into your existing Dojo build. Another option is to use the provided build script to generate a standalone package.
Conclusion
The dbootstrap project has a come a long way toward its goal of bringing the Bootstrap to Dijit. It also shares the same liberal licensing and CLA process as Dojo. If you appreciate the both the look of Bootstrap and the comprehensiveness of Dijit, it couldn’t hurt to try this theme out on one of your Dojo projects.
Learning more
We cover custom styling and theme creation in depth in our Dojo workshops offered throughout the US, Canada, and Europe, or at your location. We also provide expert JavaScript and Dojo support and development services, to help you get the most from JavaScript and Dojo. Contact us to discuss how we can help.