Examples: Bootstrap 4 Devise Forms (using haml)

Devise views converted to HAML and integrated with Bootstrap 4 styling.

In other words, rails generate devise:views translated into Haml and Bootstrap 4 (docs). I worked through this the other day and thought I’d share.

In addition to applying the Bootstrap 4 classes and form structure, I also pulled out most of the English language text into a locale file and added optional classes to various elements for further customization.

The code can be found here on Github.

Some highlights and notes:

  • The files that are of interest are:

    app/views/devise
    app/assets/stylesheets/custom_devise.scss
    config/locales/devise_forms.en.yml

  • The forms were placed in a grid to create a horizontal form with the labels right justified. For example, the new session view/form:

  • The locale file config/locales/devise_forms.em.yml contains most of the English language text generated by Devise. A sample section:

  • I left the devise/mailer views alone since every project has their own way of handling email and probably will be using a template.
  • You’ll notice on many of the elements the class devise has been added. This is to allow for further customization which I’ve stored in the assets/stylesheets/custom_devise.scss file:


Suggestions, questions and comments are welcome!