Using CSS in Laravel views?

php frameworks laravel

377,245

Solution 1

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').

Solution 2

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

Solution 3

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

Solution 4

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.

Solution 5

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

View more solutions

377,245

Author by

avenas8808

Learning about PHP, graphic design etc.

Updated on June 06, 2021

Comments

avenas8808 almost 3 years
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.
dcolumbus over 10 years

Nah, this doesn't make a difference. I can't access anything through the browser contained in those directories...
Fernando Montoya over 10 years

Are you sure that the files exists?
tjbp over 10 years

@dcolumbus 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).
Bryan P over 10 years

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.
Jake Wilson over 10 years

I think he has some .htaccess issues.
DPP over 10 years

Dont call CSS inside @section or anything, if you using blade, worked for me!
niczak about 10 years

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');?>
dangel almost 9 years

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
Dan Klos over 8 years

If this doesn't work for you, here's what worked for me: stackoverflow.com/questions/15232600/…
Kumar Sambhav Pandey over 8 years

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
Gregordy about 8 years

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">
Radmation over 7 years

Only 2 brackets are needed - not 3.
Oleg Abrazhaev about 7 years

Only 2 brackets are needed - not 3.
geoidesic about 7 years

Doesn't work for me either. Fatal Error: Class 'HTML' not found
Dawied almost 7 years

I think this answer should be higher up because this seems to be the prefered way, as the HTML class is deprecated.
Dawied almost 7 years

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.
Naveen DA almost 7 years

Where i place my css,js file? either on public/css or resources/assets/css
Isuru over 6 years

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.
david valentino almost 6 years

@dcolumbus 404 maybe because giving wrong path, try add prefix /public/, laravel default have prefix /public/ /public/css/common.css
Udhav Sarvaiya almost 6 years

This is working well in Laravel <link href="css/common.css" rel="stylesheet" > css.common.css not necessary