bootstrap styling doesn't work in some views in Laravel 5.2

Question

I'm begginer in Laravel 5.2, I make a simple personal blog and here's views folder

in home.blade.php I extends 'layouts.master' which uses bootstrap and works great. now I made a new route to show specific blog:

Route::group(['prefix'=>'post'], function(){
    Route::get('{id}', function(){
        return view('blog');
    });
});

when I go to http://localhost:8000/post/1 it works great but the problem when I extend layouts.master bootstrap and my custom css doesn't work ! it works in home.blade.php and works in pages/about.blade.php correctly but when I try to make any new route to a view and extend layouts.master it extends but bootstrap and custom css doesn't work.

Have any idea why is that? Notice: my css and bootstrap is in public folder.

Answer 1

@ThomasKim Is absolutely right. The path to your bootstrap file is relative. So when you're on localhost:8000 it can correctly traverse to css/bootstrap.min.css.

However when you're on /post/1 then the URL request for the css file changes to:

localhost:8000/post/1/css/bootstrap.min.css

And we know that's incorrect. To resolve this, use an absolute path by prepending a /.

<link href="/css/bootstrap.min.css" rel="stylesheet"/>

This will ensure that it always attempts to traverse the file from public/css/bootstrap.min.css. public is omitted in the URL structure, but that is where all HTTP requests resolve to.

UPDATE

It would actually be best to use Laravel's asset or secure_asset functions to resolve these assets instead:

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

The asset helper will resolve directly from /public

Note that asset will use the schema of the page request to resolve the dependency, whereas secure_asset will force the dependency over https no matter what the schema of the request is.

Answer 2

To make life super easy, use Laravel's asset() helper:

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

Yes, it provides the exact same thing as referencing it as simply "/css/..." but I find it to be good practice, especially when things get a bit more advanced later down the line.

Answer 3

You must have used

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

in your main blade layout template, that why facing this problem

Use

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

and this will resolve the issue.

Just append a forward slash / before css file path, which indicates the public directory of your project.