Skip to content
Go to file


Failed to load latest commit information.
Latest commit message
Commit time

Bootstrap Email

If you know Bootstrap, you know Bootstrap Email.
Explore Bootstrap Email docs »

Gem Gem

The goal of this project is to build a library that matches the Bootstrap 4 API. It has two parts, the first being a compiler that takes in regular HTML with Bootstrap classes and compiles it into tables and layout that works in email. The second part produces inline CSS that works with those layouts and gives consistent performance and appearance across email clients.

This project is still under development and I'm looking for contributors willing to help however they can. I'm excited about this <3

Supported Bootstrap Classes

{color} in these examples is primary, secondary, success, warning, danger, light, and dark

  • Alerts: .alert, .alert-{color}
  • Badges: .badge, .badge-{color}, .badge-pill
  • Buttons: .btn, .btn-{color}, .btn-outline-{color}
  • Cards: .card, .card-body
  • Color: .text-{color}, .bg-{color}
  • Containers: .container, .container-fluid
  • Floats: .float-left, .float-right
  • Grid: .row, .col-{1-12}, .col-lg-{1-12}
  • Hrs: <hr>
  • Spacing: .p{tlbrxy}-{lg-}{0-5}, .m{tby}-{lg-}{0-5}, .s-{lg-}{0-5}, w-{lg-}{25,50,75,100}, mx-auto
  • Tables: .table, .table-striped,.table-bordered, .thead-light, .thead-dark, .table-{color}, .table-dark
  • Typography: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <strong>, <u>, <em>, <s>, .text-left, .text-center, .text-right

Additional Classes

Email Quirk (for users)

  • width and height of images must be set to ensure proper rendering in outlook.
  • an anchor tag must have a link in the href (not just a #) for it to properly render a .btn.

Sass/SassC capability

Bootstrap-email works with both Sass/SassC gems.

Haml/Slim compatibility

If you are using Haml or Slim as your templating language for your Rails app, you can use it for your email templates as well! (it should probably work with any other Rails-compatible templating language out there as well)

You can’t perform that action at this time.