Agregar Bootstrap o CSS a los correos electrónicos en Laravel

Cada vez es más común trabajar con correos electrónicos en nuestras aplicaciones, posiblemente para validar cuentas, enviar promociones o realizar cobranza. Después de trabajar los correos en Laravel tal vez ya intentaste llamar los archivos CSS por medio de la etiqueta <link> o declararlos con la etiqueta <style> y no has logrado mostrar estilos una vez que el correo llega al destinatario.

Es porque para poder mostrar estilos CSS en tu correos electrónicos tienes que declararlos en cada una de las etiquetas, ahora, ¿como logramos hacer eso con bootstrap?

Manos a la obra

Para esto vamos a hacer uso de un proyecto de github del buen Fede, para empezar, tenemos que tener instalado composer para poder instalar el paquete de forma facil, abrimos nuestra terminal y pegamos el siguiente comando:


              composer require fedeisas/laravel-mail-css-inliner

Vamos al archivo con la ruta config/app.php y buscamos el arreglo de datos llamado Providers, vamos hasta abajo y agregamos la siguiente ruta:


              Fedeisas\LaravelMailCssInliner\LaravelMailCssInlinerServiceProvider::class,

Ahora hay que activarlo de forma global, para que trabaje con todas las salidas de emails de nuestra aplicación:


              php artisan vendor:publish --provider='Fedeisas\LaravelMailCssInliner\LaravelMailCssInlinerServiceProvider'

Ahora puedes agregar los estilos normalmente desde la etiqueta <link> y automáticamente tu vista será procesada antes de ser enviada para agregar los estilos en cada una de las etiquetas logrando mostrar tu correo electrónico con estilos en el destinatario. Por ejemplo puedes agregar la siguiente línea en la etiqueta <head> en la vista del email para agregar Bootstarp a tu correo.


            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

Recuerda escribir cada una de las clases Bootstrap que sean necesarias para dar forma a tu diseño.