Why css and bootstrap is not loading in Laravel 5.3?

5
votes

This is my route file...


    Route::group(['middleware' => ['auth']], function(){

        Route::get('/profile/{username}', 'ProfileControllers@getProfile');

    });

The "ProfileControllers" is this...


    namespace App\Http\Controllers;
    use DB;
    use App\User;
    use Illuminate\Http\Request;

    class ProfileControllers extends Controller
    {
        public function getProfile($username)
        {
            $user = DB::table('users')->where('username','=', $username)->get();
            return view('web.profile');
        }
    }

And this is the view file...


    @extends('layout')

    @section('content')
        This is your profile
    @stop

And The head of the Layout file is this...


    link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"
    link rel="stylesheet" type="text/css" href="css/app.css"

When I go to the url "localhost:8000/profile/username" and a ugly html without any css webpage is showing.... when I remove "/{username}" from route file, and make it "/profile/username" and go to the "localhost:8000/profile/username" (and also remove the $username part form controller) , then css and bootstrap loads perfectly....

What is happening here?

5
phpmysqltwitter-bootstraplaravellaravel-5.3
When you go to "localhost:800/profile/username". The username does it exist in your database? Or are you simply entering a random username? – Sarhad Salam
Yes, Salam bro, username exists..... and now, another problem occured..... if set route to "/profile/foo" and go to localhost:8000/profile/foo, css is not loading..... – Jakaria Blaine
It seems to me that the CSS path is not absolute and is being relative to the URL. Open the developer tools and check the path that's being called and fix that. Also, not sure if that's the case, but beware when using base tag. – Luís Cruz
You are right, milz. That was the problem. This little bug spoiled my whole day... – Jakaria Blaine
Glad that you fixed the issue. I'll be voting to close this question as a problem that can no longer be reproduced or a simple typographical error. – Luís Cruz

5 Answers

4
votes

I fixed this issue by simply putting '/' in front of the link

link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css"
link rel="stylesheet" type="text/css" href="/css/app.css"
1
votes

You can add this line at the top of the blade file.

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

OR

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

Hope it works!

0
votes

Did you run the 'php artisan migrate' command before including links to your bootstrap files (or before running the 'npm command')?

If so then run 'php artisan migrate:rollback' before running 'php artisan migrate' (especially if you are using such libraries as 'npm' to pull in your dependencies such as 'Bootstrap'),

0
votes

Work around will be...

Comment out <link href="{{ asset('css/app.css') }}" rel="stylesheet"> and add following link into the app.blade.php

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
0
votes

I run the commands below and it worked for me

composer require laravel/ui

then run

php artisan ui bootstrap

then run the npm commands below

  1. npm i
  2. npm run dev