gbrennon / bootstrap-email Goto Github PK

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, 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

{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

• Visibility: .d-desktop, .d-mobile

• 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.