Using CSS in Laravel views?

H

17

131

I've just began learning Laravel, and can do the basics of a controller and routing.

My OS is Mac OS X Lion, and it's on a MAMP server.

My code from routes.php:

Route::get('/', function() {
    return View::make('home.index');
});

Route::get('businesses', function() {
    return View::make('businesses.index');
});

Route::get('testing', function() {
    return View::make('testing.index');
});        

Route::get('hello', function() {
    return "<h3>Hello world!</H3>";
});

That works, the views display perfectly, ''however'' what I want to try and do is include CSS within the views, I tried adding in a link to a stylesheet within the directory but the page displayed it as the default browser font even though the css was in the HTML!

This is index.php from businesses within the views folder:

<head>
   <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

<p>Business is a varied term. My content here.

I tried using the Blade template engine in my other views folder (testing) to display CSS but again the CSS did not show despite it being in the testing folder!

How can I overcome this problem, and get better - as I'm slowly learning this framework.

Hobie answered 17/11, 2012 at 18:52 Comment(2)

What laravel version are you even using? – Scrofula 12/2, 2017 at 18:22

{{ URL::asset('css/css.css') }} – Include 17/7, 2018 at 11:3

A

173

Put your assets in the public folder; e.g.:

public/css
public/images
public/fonts
public/js

And then, to access them using Laravel, use:

{{ HTML::script('js/scrollTo.js'); }}

{{ HTML::style('css/css.css'); }}

Or:

{{ URL::asset('js/scrollTo.js'); }}

{{ URL::asset('css/css.css'); }}

This syntax will automatically generate the correct path (e.g., `public/js/scrollTo.js').

Aixlachapelle answered 21/11, 2012 at 18:16 Comment(7)

Are you sure that the files exists? – Aixlachapelle 15/9, 2013 at 17:12

I think he has some .htaccess issues. – Koerlin 17/10, 2013 at 17:37

Dont call CSS inside @section or anything, if you using blade, worked for me! – Unicellular 17/10, 2013 at 22:31

You have to be using blade for that syntax to work. If you aren't using blade then you would have to go with: <?php echo HTML::style('css/common.css');?> – Adam 1/5, 2014 at 17:0

This is different now for Laravel 5.0 where the illuminate/html package is no longer included by default laracasts.com/series/laravel-5-fundamentals/episodes/10 for details – Edom 20/5, 2015 at 2:23

If this doesn't work for you, here's what worked for me: #15233100 – Ante 1/10, 2015 at 15:18

Doesn't work for me either. Fatal Error: Class 'HTML' not found – Stig 8/3, 2017 at 10:13

I

43

your css file belongs into the public folder or a subfolder of it.

f.e if you put your css in

public/css/common.css

you would use

HTML::style('css/common.css');

In your blade view...

Or you could also use the Asset class http://laravel.com/docs/views/assets...

Interlocutrix answered 17/11, 2012 at 19:7 Comment(3)

Nah, this doesn't make a difference. I can't access anything through the browser contained in those directories... – Perish 14/9, 2013 at 22:23

@Perish If the 404 you're receiving is generated by Laravel (ie. not the server default), then you might be missing the following line in your .htaccess (assuming you're using Apache): "RewriteCond %{REQUEST_FILENAME} !-f". That line should go above the one with index.php in it, and will prevent requests to paths that exist in the filesystem from being handled by Laravel's routing system. If the 404 received is not generated by Laravel, you need to add "AllowOverride All" to your Apache config in order for the .htaccess to be processed (see Apache docs for more info). – Pothead 10/10, 2013 at 14:3

He said he wants to put the css files inside of the view folder, not the public folder, asset() and HTML::style/HTML::script all points to public directory, laravel does not allow anything inside of App folder to be accessed by outside matters for security purposes. So even if there is index.php or not does not matter in what he wants. – Flocculant 11/10, 2013 at 11:35

D

31

You can also write a simple link tag as you normaly would and then on the href attr use:

<link rel="stylesheet" href="<?php echo asset('css/common.css')?>" type="text/css">

of course you need to put your css file under public/css

Dovecote answered 17/11, 2012 at 19:41 Comment(1)

@Perish 404 maybe because giving wrong path, try add prefix /public/, laravel default have prefix /public/ /public/css/common.css – Infirm 9/5, 2018 at 8:36

S

27

We can do this by the following way.

<link href="{{ asset('/css/style.css') }}" rel="stylesheet">

{{ HTML::style('css/style.css', array('media' => 'print')) }}

It will search the style file in the public folder of Laravel and then will render it.

Svelte answered 21/12, 2014 at 6:45 Comment(3)

Cool Ahmad, it will work fine if u link style-sheet over http <link href="{{{ asset('/css/style.css') }}}" rel="stylesheet"> but if you are using https then the request will be blocked and a mixed content error will come, to use it over https you have to use secure_asset like <link href="{{{ secure_asset('/css/style.css') }}}" rel="stylesheet"> laravel.com/docs/5.1/helpers#method-secure-asset – Frizzell 4/1, 2016 at 8:45

Only 2 brackets are needed - not 3. – Tsui 13/2, 2017 at 11:44

If you use this solution for laravel 5 you need to install the LaravelCollective Forms & HTML provider. See: laravelcollective.com/docs/5.4/html for instructions. Don't forget to run "composer update" after you have updated composer.json. – Penetralia 27/5, 2017 at 22:21

F

16

Like Ahmad Sharif mentioned, you can link stylesheet over http

<link href="{{ asset('/css/style.css') }}" rel="stylesheet">

but if you are using https then the request will be blocked and a mixed content error will come, to use it over https use secure_asset like

<link href="{{ secure_asset('/css/style.css') }}" rel="stylesheet">

https://laravel.com/docs/5.1/helpers#method-secure-asset

Frizzell answered 4/1, 2016 at 8:44 Comment(2)

Only 2 brackets are needed - not 3. – Cutthroat 17/8, 2016 at 21:39

Where i place my css,js file? either on public/css or resources/assets/css – Rewarding 26/7, 2017 at 9:25

S

13

Since Laravel 5 the HTML class is not included by default anymore.

If you're using Form or HTML helpers, you will see an error stating class 'Form' not found or class 'Html' not found. The Form and HTML helpers have been deprecated in Laravel 5.0; however, there are community-driven replacements such as those maintained by the Laravel Collective.

You can make use of the following line to include your CSS or JS files:

<link href="{{ URL::asset('css/base.css') }}" rel="stylesheet">
<link href="{{ URL::asset('js/project.js') }}" rel="script">

Stichous answered 17/7, 2016 at 10:32 Comment(1)

I think this answer should be higher up because this seems to be the prefered way, as the HTML class is deprecated. – Penetralia 27/5, 2017 at 22:10

T

10

You can simply put all the files in its specified folder in public like

public/css
public/js
public/images

Then just call the files as in normal html like
<link href="css/file.css" rel="stylesheet" type="text/css">

It works just fine in any version of Laravel

Tax answered 5/3, 2018 at 13:3 Comment(0)

L

9

To my opinion the best option to route to css & js use the following code:

<link rel="stylesheet" type="text/css" href="{{ URL::to('route/to/css') }}">

So if you have css file called main.css inside of css folder in public folder it should be the following:

<link rel="stylesheet" type="text/css" href="{{ URL::to('css/main.css') }}">

Lase answered 12/11, 2017 at 20:13 Comment(0)

G

7

Update for laravel 5.4 ----

All answers have have used the HTML class for laravel but I guess it has been depreciated now in laravel 5.4, so Put your css and js files in public->css/js And reference them in your html using

<link href="css/css.common.css" rel="stylesheet" >

Gormley answered 16/3, 2017 at 15:58 Comment(1)

This is working well in Laravel <link href="css/common.css" rel="stylesheet" > css.common.css not necessary – Rumrunner 25/7, 2018 at 4:49

F

5

That is not possible bro, Laravel assumes everything is in public folder.

So my suggestion is:

Go to the public folder.
Create a folder, preferably named css.
Create the folder for the respective views to make things organized.
Put the respective css inside of those folders, that would be easier for you.

Or

If you really insist to put css inside of views folder, you could try creating Symlink (you're mac so it's ok, but for windows, this will only work for Vista, Server 2008 or greater) from your css folder directory to the public folder and you can use {{HTML::style('your_view_folder/myStyle.css')}} inside of your view files, here's a code for your convenience, in the code you posted, put these before the return View::make():

$css_file = 'myStyle.css';
$folder_name = 'your_view_folder';
$view_path = app_path() . '/views/' . $folder_name . '/' . $css_file;
$public_css_path = public_path() . '/' . $folder_name;
if(file_exists($public_css_path)) exec('rm -rf ' . $public_css_path);
exec('mkdir ' . $public_css_path);
exec('ln -s ' . $view_path .' ' . $public_css_path . '/' . $css_file);

If you really want to try doing your idea, try this:

<link rel="stylesheet" href="<?php echo app_path() . 'views/your_view_folder/myStyle.css'?>" type="text/css">

But it won't work even if the file directory is correct because Laravel won't do that for security purposes, Laravel loves you that much.

Flocculant answered 11/10, 2013 at 12:30 Comment(0)

G

4

put your css File in public folder . (public/css/bootstrap-responsive.css) and <link href="./css/bootstrap-responsive.css" rel="stylesheet">

Glandulous answered 22/5, 2015 at 10:59 Comment(1)

Awesome, it works! But, is there any difference between <link href="./css/bootstrap-responsive.css" rel="stylesheet"> and <link href="{{ url('/') }}./css/bootstrap-responsive.css" rel="stylesheet"> – Minivet 12/4, 2016 at 18:10

P

3

Copy the css or js file that you want to include, to public folder or you may want to store those in public/css or public/js folders.

Eg. you are using style.css file from css folder in public directory then you can use

<link rel="stylesheet" href="{{ url() }}./css/style.css" type="text/css"/>

But in Laravel 5.2 you will have to use

<link rel="stylesheet" href="{{ url('/') }}./css/style.css" type="text/css"/>

and if you want to include javascript files from public/js folder, it's fairly simple too

<script src="{{ url() }}./js/jquery.min.js"></script>

and in Laravel 5.2 you wll have to use

<script src="{{ url('/') }}./js/jquery.min.js"></script>

the function url() is a laravel helper function which will generate fully qualified URL to given path.

Pencil answered 20/8, 2015 at 18:43 Comment(0)

M

3

Put them in public folder and call it in the view with something like href="{{ asset('public/css/style.css') }}". Note that the public should be included when you call the assets.

Mignon answered 8/7, 2017 at 11:19 Comment(2)

No need to state "public" folder. For example, this worked for me. <link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet">. Your example didn't work. – Catechol 18/9, 2017 at 15:43

Thanks, the public folder was a last chance saloon for me, and it worked! – Burrow 10/10, 2022 at 13:4

I

3

put your css in public folder, then

add this in you blade file

<link rel="stylesheet" type="text/css" href="{{ asset('mystyle.css') }}">

Interlock answered 7/11, 2017 at 10:13 Comment(0)

R

3

Use {!! in new laravel

{!! asset('js/app.min.js') !!}

<script type="text/javascript" src="{!! asset('js/app.min.js') !!}"></script>

Rules answered 2/10, 2018 at 7:48 Comment(0)

B

2

For Laravel 5.4 and if you are using mix helper, use

    <link href="{{ mix('/css/app.css') }}" rel="stylesheet">
    <script src="{{ mix('/js/app.js') }}"></script>

Bess answered 1/4, 2017 at 0:3 Comment(0)

K

2

For those who need to keep js/css out of public folder for whatever reasons, in modern Laravel you can use sub-views. Say your views structure is

views
    view1.blade.php
    view1-css.blade.php
    view1-js1.blade.php
    view1-js2.blade.php

in view1 add

@include('view1-css')
@include('view1-js1')
@include('view1-js2')

in views-js.blade.php files wrap your js code in <script> tag

in views-css.blade.php wrap your styles in <style> tag

That will tell Laravel, and your code editor, that those are in fact js and css files. You can do the same with additional HTML, SVGs and other stuff that is browser-renderable

Kanya answered 14/2, 2019 at 13:10 Comment(0)

Recommended topics

Hot tags