Bootstrap Material Design Library (BMDL) for the BMJ is a cross-platform and fully responsive front-end interface based on Google Material Design, built using Bootstrap 4.

Download BMDL Documentation

Currently v4.0.0-alpha.6
(based on Bootstrap v4.0.0-alpha.6)


The basic idea behind this project is to combine the visual language of Google Material Designopen_in_new with the front-end technology of the popular Bootstrapopen_in_new framework to allow for rapid prototyping and serve as a library for our components.

Please see the README file on the repository for a full list of Supported Bootstrap 4 Componentsopen_in_new and Supported Material Design Componentsopen_in_new. We will expand the component library as the need arises through prototype iteration.



The primary goal of this project is to give all Bootstrap components and elements a Material Design look, so it allows front end developers to continue using the exact same Bootstrap HTML markup they are familiar with, but presents them a final outcome that is in line with the principles and specifics of Google Material Design.

Therefore, the Bootstrap's documentationopen_in_new can serve as a valid documentation for this project as well.


A secondary goal of this project is to add support of some unique Material Design components such as floating action buttons, pickers and steppers, to name a few, which cannot be achieved by transforming existing Bootstrap components or elements.

Because these components will require additional markup (some may require additional JavaScript), they will be documented separately in BMDL's documentation (work-in-progress).



If a Bootstrap component has an exact match in Google Material Design, this project will style this Bootstrap component based on the specifications laid out in Google Material Design Guidelines. For example, Bootstrap's buttons = Google Material Design's buttons.

Some of the Bootstrap components seem to lack an exact match in Google Material Design, but this may be simply due to different naming conventions. For example, Bootstrap's navbars is very much the same as Google Material Design's toolbars.

If a Bootstrap component does not have an exact match in Google Material Design, the specifications of a closest matching component in Google Material Design Guidelines will be used to style this Bootstrap component. For example, Bootstrap's badges = Google Material Design's chips.

If a Bootstrap component lacks a related counterpart in Google Material Design completely, this project will style this component based on our own iteration of Google Material Design Guidelines. For example, Bootstrap's button groups, jumbotrons and paginations, etc.


No modification has been made to Bootstrap's JavaScript. It is safe to use Bootstrap's JavaScript as it is.

However, in order to achieve some Material feel and look, BMDL includes a handful of additional JavaScript to help bring some of the components to life.



Bug fixes and updates alongside Bootstrap 4's continuous releases.

Apply BMJ branding (current) - logos (?), font, colour palette etc

Test all components (for eg JS on popovers not working curently)


Add missing support for some Google Material Design components (e.g. snackbars).


Rewrite all JavaScript plugins in ES6 to take advantage of the newest JavaScript enhancements.