How to include CSS in laravel 5 running with artisan?


Tags: php,html,css,laravel

Problem :

I am new to Laravel and am trying to get the css in the public directory to load. The page loads no problem but the CSS gives me a 404 error in firebug:

"NetworkError: 404 Not Found - http://127.0.0.1:8000/css/main.css"

I wrote this in the blade template:

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

Which outputs:

<link href="http://127.0.0.1:8000/css/main.css" rel="stylesheet">

Which seems correct.

The site is run with php artisan serve. Any suggestions? Thanks!



Solution :

Try:

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

OR

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

OR

If you are using php artisan serve its possible that your public folder is not being used, so use PHP native server instead and specify the public folder as the web root.

Stop artisan serve and try using PHP native server by issuing this command at the root of your Laravel project: php -S localhost:8000 -t public


    CSS Howto..

    Weird CSS effect with box shadows - how to solve?

    How to position background image in a button

    How to make the Div fixed at a particular scroll location?

    How can you fix the height of an element in IE 6, and allow hidden content to be scrolled into view?

    How do I prevent text from flowing onto different sections of a page?

    How to get rid of the white vertical stroke after every repeating background image done with repeat-x value in CSS?

    How to implement CSS multi-level drop down menu with different classes?

    How to include CSS in laravel 5 running with artisan?

    How to place background image behind page content?

    How to add style/css to a simple jQuery accordion?

    how to create a css attribute swapper between two elements?

    How to make the bootstrap button,when clicked to redirect to a specific page

    How to change order of divs in HTML code, for 3-column CSS Layout?

    How to edit the CSS of CarrierWave's 'Choose file' button and “No file chosen” text? (Rails4)

    Fullpage.js: How to add css class “active” to slide anchor

    How to play a video inside a logo

    HTML and CSS: How to lay out a div tag with width:100% and left:300px

    How do I unset CSS values?

    How to make div height 100% inside relative div?

    How to get CSS attributes assigned to a html table?

    how to i target a another div with jquery or css

    How to get CSS to work only on specific WordPress pages?

    Advanced CSS tricks: How to span an image over multiple columns in a CSS3 site layout?

    How can I move a div with direction in JavaScript?

    How to convert complex xpath to css

    How would you go about placing li in different divs?

    How can I override an inline style with an external css?

    How to make a themeable web application using CSS?

    How can I solve this :before or :after issue in IE7?

    Is it possible to show webpage in a window from my Chrome extension, only using JS, HTML and CSS?