Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

fetchforo4's avatar

Bootstrap in an email

Hi there. This is my first time doing stuff like this, so I'd appreciate some help.

So, anyway. I'm trying to use Bootstrap in an email for my site. The email is just an email for confirming your account, nothing much. But I want it to look nice, like those other sites that somehow use styles in their emails.

Now, here's the problem. I've tried nearly EVERYTHING I can find, but nothing works. By the way, I am using Laravel 5 (the latest version as of about 6 days ago), so I need help finding a solution that will actually work. No, I'm not doing everything wrong, it just doesn't work.

Now, here's my code. Code to send the email


Mail::send('core.emails.auth.confirm', ['user' => $user, 'confirmation' =>         $confirmation], function($message) use ($email) {
    $message->from('noreply@[my domain]')->to($email)->subject('Confirm your GA account');
});

The email view

<!DOCTYPE html>
<html lang="en">
    <link href="http://steveville.org/assets/css/cosmo.css" rel="stylesheet" type="text/css" media="all" />
    
    <body style="background-color: #ccc;">
        <div class="text-center">
            <h1>
                [site name]
            </h1>
        </div>
        <hr>
        <br />
        <div class="maincontent" style="background-color: #FFF; margin: auto; padding: 20px; width: 450px; border-top: 2px solid #27ae60;">
            <div class="text-center">
                <h1>Dear {{{ $user->name }}},</h1>
                <p>Welcome to the [site name] website!</p>
                <p>
                    Someone registered the username <b>{{{ $user->name }}}</b> at <a href="{{{ config('app.url') }}}">{{{ config('app.url') }}}</a> using this email <a href="mailto:{{{ $user->email }}}">{{{ $user->email }}}.
                </p>
                <p>If this was you, please finish the registration process by confirming your email below.</p>
                <p><a class="btn btn-success btn-lg" href="{{{ URL::to('/account/confirm/' . $confirmation->code) }}}"><i class="fa fa-check"></i> CONFIRM E-MAIL</button></p>
                
                <p>If the fancy button does not work, you can copy and paste this link into your browser: <a href="{{{ URL::to('/account/confirm/' . $confirmation->code) }}}">{{{ URL::to('/account/confirm/' . $confirmation->code) }}}</a></p>
                <p>If you did not register for our website, please ignore this email.</p>
            </div>
        </div>
    </body>
</html>

The part of the HTML that does not work is the link to the stylesheet. Does anyone know of a way to link to an external stylesheet (CSS file), in an email, with Laravel 5?

Thanks.

If you got confused, just say so and I will explain better.

0 likes
9 replies
richard's avatar

How about downloading the CSS file into public/css folder and doing this?

 <link href="{{ URL::asset('css/cosmo.css') }}" rel="stylesheet" type="text/css" media="all" />
fetchforo4's avatar

@richard Let me try that. Even though the CSS actually IS in the css folder, that might work.

EDIT: It doesn't work. Thanks, though.

SachinAgarwal's avatar

@fetch404 For emails, External Stylesheets will not work. You have to make internal style or inline style. Because when email is viewed the external stylesheet wont be downloaded by the email service providers.

2 likes
fetchforo4's avatar

@SachinAgarwal Oh. Is there any way at all that I can include Bootstrap? It's just really annoying because my emails look very ugly. I wish there was an inliner package for L5 that actually worked.

SachinAgarwal's avatar

@fetch404 you can copy paste the bootstrap css content into you style tag in head :P that's best I can suggest.

Andreyco's avatar

Here is "CSS compatibility" table, which shows support across several email clients.

Writing styles which work almost everywhere is pain in the ass. I came across this while I was working in ad agency. Go and edit Mailchimp's email templates, they now a little about emails.

After all, you need to inline the styles. This way they are not striped by email client.

fetchforo4's avatar

@Andreyco Thanks for linking to the chart. Unfortunately, it appears that Gmail does not support link or style tags ANYWHERE in the HTML. This is getting seriously annoying... the only thing I can actually do now is import fonts :/

Andreyco's avatar

Talking about fonts, you can specify "custom" font with fallback to web-safe font. Browser might have Roboto font cached on some other web site. Define font family like this. Lucky ones will see Roboto.

font-family: Roboto, Helvetica, Arial, sans-serif;

isimmons's avatar

I don't know a lot about it but some things even have to be placed inline rather than in the style tag. I looked into it once and managed to get a good email using http://zurb.com/ink/ . They provide a few starter templates, an online style inliner tool and a pretty good set of docs. Also I found this page helpful in understanding the basic issues and process with emails http://zurb.com/ink/process.php

So in my opinion, use bootstrap for web pages but use zurb/ink for emails.

1 like

Please or to participate in this conversation.