Bootstrap 4 stylesheet, compiler, and inliner for responsive and consistent emails with the Bootstrap syntax you know and love.
Clone or download

readme.md

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, a compiler that takes regular HTML with bootstrap classes and compiles it into tables and layout the works in email, and CSS that work with those layouts and inlined to give consistent performance and appearance across email clients.

This project is still under development and 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.