bootstrap-email: An HTML repository from EzooDeen

Bootstrap Email

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

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

Visibility: .d-desktop, .d-mobile

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

Sass gem is deprecated (https://github.com/sass/ruby-sass) in favor of SassC
SassC (https://github.com/sass/sassc-ruby)

Bootstrap-email works with both Sass/SassC gems.

Haml/Slim compatibility