I decided to try the bootstrap and it's been pain for me, it's not working.
what I did:
laravel new project
cd project
composer require laravel/ui
php artisan ui bootstrap
npm install && npm run dev
Then in the welcome.blade.php I change the code to this snippet so I can test bootstrap:
<!doctype html>
<html>
<head>
<script src="{{ asset('js/app.js') }}" defer></script>
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-light bg-light">
<span class="navbar-brand mb-0 h1">Navbar</span>
</nav>
</body>
</html>
Things I made sure they're correct:
The /resources/sass/app.scss has import
'~bootstrap/scss/bootstrap';.
The includes in the HTML page
Screenshot of the files structure & configs might help:
Notes:
I am using Laravel 8.
Would appreciate any helps.
You need to create two folders named css and js inside of the public folder.
click here for screenshot
Then, download compiled bootstrap from https://getbootstrap.com/docs/5.1/getting-started/download/ and extract the downloaded file.
Then, browse the css folder which is inside the bootstrap and find the bootstrap.min.css file and find the bootstrap.min.js file from the js folder.
Then, copy those files(bootstrap.min.css, bootstrap.min.js) into the relevant css and js folders respectively under the public folder.
Then, rename the bootstrap.min.css file as app.css and rename bootstrap.min.js as app.js.click here for screenshot
Then, bootstrap is successfully working in your laravel app.
Best regards,
I have a Laravel application deployed on Heroku. However, all files that are in 'public' folder of my application are not loaded.
That is, no css and / or js are loaded pages after deployment. Only HTML is loaded.
This is the structure of my 'public' folder:
I'm loading the css that way:
<link href="{{ URL::asset('css/bootstrap.min.css') }}" rel="stylesheet">
And JS that way:
{!! Html::script('js/parsley.min.js') !!}
EDIT
I've figured out what was wrong.
Instead of loading the css the way I was doing, I should do this:
<link href="{{ asset('css/parsley.css') }}" rel="stylesheet">
And for Js:
<script type="text/javascript" src="{{ asset('js/parsley.min.js') }}></script>
It's very strange.
Are you sure that the files exist in the public folder?
Laravel 5.2 does not include html helpers function out the box, do you update your composer?
You can remove helper function and try without it, just use...
for css
<link href="/css/bootstrap.min.css" rel="stylesheet">
and js
<script src="/js/parsley.min.js"></script>
if everything is ok, the problem is in your helper functions.
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!
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
If you install Illuminate/HTML
you can do
{!!HTML::style('css/styles.css')!!} //styles.css inside public/css folder
or try
{{ asset('css/styles.css') }}
When you specify a path for your css and JS files, the root of the files need to be in 'project-name\public\' and not 'project-name\'
If you want for example to include with blade 'mytheme.css' which is inside 'mypersonalcss' folder ('mypersonnalcss\mytheme.css') fist add it to the project in 'project-name\public\mypersonnalcss\mytheme.css'
Then add it in your blade file :
<link href="{{ asset('mypersonnalcss\mytheme.css') }}" rel="stylesheet" type="text/css" >
Please see : Laravel 5 not finding css files to learn more about how to add assets to blade files.
I am Using Laravel 5.0 , the Form and Html Helper are removed from this version , i dont know how to include external css and js files in my header file. Currently i am using this code.
<link rel="stylesheet" href="/css/bootstrap.min.css"> <!--- css file --->
<script type="text/javascript" src="/js/jquery.min.js"></script>
I think that the right way is this one:
<script type="text/javascript" src="{{ URL::asset('js/jquery.js') }}"></script>
Here I have a js directory in the laravel's app/public folder. There I have a jquery.js file. The function URL::asset() produces the necessary url for you. Same for the css:
<link rel="stylesheet" href="{{ URL::asset('css/somestylesheet.css') }}" />
Keep in mind that the old mehods:
{{ Form::script() }}
and
{{ Form::style() }}
are deprecated and will not work in Laravel 5!
Try it.
You can just pass the path to the style sheet .
{!! HTML::style('css/style.css') !!}
You can just pass the path to the javascript.
{!! HTML::script('js/script.js') !!}
Add the following lines in the require section of composer.json file and run composer update "illuminate/html": "5.*".
Register the service provider in config/app.php by adding the following value into the providers array:
'Illuminate\Html\HtmlServiceProvider'
Register facades by adding these two lines in the aliases array:
'Form'=> 'Illuminate\Html\FormFacade',
'HTML'=> 'Illuminate\Html\HtmlFacade'
In laravel 5.1,
<link rel="stylesheet" href="{{URL::asset('assets/css/bootstrap.min.css')}}">
<script type="text/javascript" src="{{URL::asset('assets/js/jquery.min.js')}}"></script>
Where assets folder location is inside public folder
i use this way, don't forget to put your css file on public folder.
for example i put my bootstrap css on
"root/public/bootstrap/css/bootstrap.min.css"
to access from header:
<link href="{{ asset('bootstrap/css/bootstrap.min.css') }}" rel="stylesheet" type="text/css" >
hope this help
Place your assets in public directory and use the following
URL::to()
example
<link rel="stylesheet" type="text/css" href="{{ URL::to('css/style.css') }}">
<script type="text/javascript" src="{{ URL::to('js/jquery.min.js') }}"></script>
At first, you have to put your .css or .js files in the public folder of your project. You may create subfolders to it and move the files into the subfolder. Then you have to do the followings
<link rel="stylesheet" href="{{asset('css/your_css_file.css')}}">
<script src="{{asset('js/your_js_file.js')}}"></script>
In my example, I have created two subfolders called css and js. I put all of the .css and .js files in corresponding folders and use them where ever I want them. Thank you and hope this helps you.
There are many ways to include external css and js files as specified in below code but you can choose one of them, i have tested them all, they work the same.
<link rel="stylesheet" href="{{ asset('css/stylesheet.css') }}" /><!--Recommended-->
<link rel="stylesheet" href="{{ URL::asset('css/somestylesheet.css') }}" />
<link rel="stylesheet" href="{{ URL::to('css/otherstylesheet.css') }}" />
<link rel="stylesheet" href="{{ url('css/anotherstylesheet.css') }}" />
Maybe there are more ways to load it.
but keep in mind that if you are loading the css and js from other than a public folder then better to use Laravel mix.
{{ HTML::style('yourcss.css') }}
{{ HTML::script('yourjs.js') }}
Laravel 5.5 comes with mix , the replacement for Elixir, the external css(sass) can be extracted to resources/assets/css(sass) and import to app.css(scss) or give the correct path to your node_module folder that contains the library and can be used as
<link rel="stylesheet" href="{{ mix('css/app.css') }}" >
The same can be done for Javascript too .
Ok so I was able to figure out for the version 5.2. You will first need to create assets folder in your public folder then put css folder and all css files into it then link it like this :
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
Hope that helps!
CORRECT & SECURED WAY
If you have a external .css or .js file to add into your page!
My version : Laravel Framework 5.7
If you want to add a External .js file..
Copy your External codes.
Run command npm install in your terminal.
When the above command is executed you can see a folder named node_modules.
Then go to resources/js.
Open file app.js.
Scroll down to the bottom and paste your External JS.
Finally run command npm run dev in your terminal.
your scripts will be updated and its compiled and moved to public/js/app.js . by adding a .js file in public folder will not effect on your page.
If you want to add a External .css file..
Copy your External styles.
Run command npm install in your terminal.
When the above command is executed you can see a folder named node_modules.
Then go to resources/sass.
Open file app.scss.
Scroll down to the bottom and paste your External Styles.
Finally run command npm run dev in your terminal.
your scripts will be updated and its compiled and moved to public/css/app.css . by adding a .css file in public folder will not effect on your page.
Easiest and the safest way to add your external .css and .js.
Laravel JavaScript & CSS Scaffolding
YouTube Compiling Assets
First you have to install the Illuminate Html helper class:
composer require "illuminate/html":"5.0.*"
Next you need to open /config/app.php and update as follows:
'providers' => [
...
Illuminate\Html\HtmlServiceProvider::class,
],
'aliases' => [
...
'Form' => Illuminate\Html\FormFacade::class,
'HTML' => Illuminate\Html\HtmlFacade::class,
],
To confirm it’s working use the following command:
php artisan tinker
> Form::text('foo')
"<input name=\"foo\" type=\"text\">"
To include external css in you files, use the following syntax:
{!! HTML::style('foo/bar.css') !!}
I may be late to the party but it's easy to include JS and CSS the Laravel Way by simply using asset() function
e.g.
<link rel="stylesheet" href="{{ asset('css/app.css') }}" />
Hope that helps
I have been making use of
<script type="text/javascript" src="{{ URL::asset('js/jquery.js') }}"></script>
for javascript and
<link rel="stylesheet" href="{{ URL::asset('css/main.css') }}">
for css, this points to the public directory, so you need to keep your css and js files there.
It mostly happens due to laravel webpackmix is not yet executed
composer require laravel/ui
PHP artisan ui vue --auth //you can use vue boostrap --auth is to add the login paths and
npm install
if it's asking to run "npm fund" then do it
npm run dev
try this once again
I thought I have Symfony all up and running ok on the VM machine I've been trying to set up. However after following the instructions on this link:
http://symfony.com/doc/current/book/installation.html#configuration-and-setup
I'm not getting reassuring 'welcome' page in the screenshot. Instead, I just see an empty page with 'Homepage.' written in the corner. The underlying HTML is:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Welcome!</title>
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
</head>
<body>
Homepage.
<div id="sfwdtc2fded" class="sf-toolbar" style="display: none"></div>
<script>
/* [editor's note: the JS code of the toolbar has been removed] */
</script>
</body>
</html>
I get exactly the same whether I go to: http://localhost/app.php or http://localhost/app_dev.php
Does anyone know what could be causing this? The link http://localhost:8000/config.php works perfectly and I have no errors there (just one recommendation to install INTL extension but I don't suppose that's the problem).
You've probably installed Symfony 2.6, which had an AppBundle delivering your this page. You can comment the line registering the AppBundle in app/AppKernel.php to see the demo homepage.
I had the same problem and solved it by running
composer require symfony/framework-bundle
and it seems to have solved me problem.