How to connect internal Bootsrap 5.2 with laravel 7 - javascript

Hey i still learning laravel framework and i try to connect my bootstrap v.5.2 with my laravel v.7 project but it cant connect, i store css and js folder on bootsrap folder in the same level as app, config, database public, etc. and i already tried to connect it with the code:
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" >
<script src="bootstrap/js/bootstrap.min.js"></script>
but it still cant connect?

Put Your bootstrap files (i.e bootstrap.min.css and bootstrap.min.js) in a new folder inside public.
Example:
public/css/bootstrap.min.css
public/js/bootstrap.min.js
Then to use them in blade:
<link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet">
<script src="{{ asset('js/bootstrap.min.js') }}"></script>

Related

CSS and JS files is not loading in Laravel

My application is on the server, and I have tried all the solutions. But my Laravel app is still not loading CSS and JS files in main.blade.php when my CSS files are in public/assets_setup/css/style.css.` I even made file changes, but page changes are not showing in inspect, and it's the same.
Below is my main.blade.php file which all links are included.
Try this code
<link rel="stylesheet" type="text/css" href="/assets_setup/css/style.css">
or
<link rel="stylesheet" type="text/css" href="{{ asset('/assets_setup/css/style.css') }}">
We don't write public in laravel

How can i connect downloaded js library(leaflet.js) on pages in my laravel project?

My problem is what i don't know how to connect js library leaflet.js( it downloaded and located in node_modules) on page with map in my laravel project. leaflet's site says that i should add
<link rel="stylesheet" href="/path/to/leaflet.css" />
<script src="/path/to/leaflet.js"></script>
and write path to library in these src's, but i don't know how to get it, i've tryed to do some operations with laravel mix but it didn't helped me(or i did something wrong, idk)
There are many ways to add the CSS and js file. In you downloaded a full zipped folder then out it to public folder with the name leaflet.Then Add the following code :
<link rel="stylesheet" href="{{ asset('leaflet/to/leaflet.css')}} " />
<script src="{{ asset('leaflet/to/leaflet.js') }} "></script>
Next, if you can be downloading through the following command:
npm install leaflet
Then add required within your resources/js/bootstrap.js file.
require("leaflet");

JS files not loading using Webpack, Laravel Mix in Laravel 8

I'm new to Laravel and I'm trying to compile and upload my resources using Laravel Mix.
mix.js('resources/js/app.js','public/js')
.js('resources/js/users.js','public/js')
.sass('resources/sass/app.scss', 'public/css')
.css('resources/css/myStyle.css','public/css/myStyle.css')
These resources compiled successfully; in my users.js file, I have a JS script function that alerts some text on button click. In my Blade layout, I'm importing files like the following.
<!-- Scripts -->
<script src="{{ mix('js/users.js') }}"></script>
<!-- <script src="{{mix('/js/NotResourced.js')}}"></script> -->
<script src="{{ mix('js/app.js') }}"></script>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link href="{{ asset('css/myStyle.css') }}" rel="stylesheet">
I understand that Mix compiles the resources and puts them in the public directory so the browser can read them. But when I inspect my loaded files in the browser, the users.js is not among them. I've changed the order in which the files are loaded, but it didn't work. What I noticed is that in my Blade layout, I'm placing them in an HTML head tag. So I changed the position of the script file to before the body close tag position. However, when I inspect my loaded files on the browsers, the app.js file has existed, but the HTML head tag and users.js are not there.
Am I doing anything wrong here? And please, what's the proper way to get this done?
I've found what solved my issue, and the answer as follow :
Use scripts() method to minify any number of JavaScript files on webpack.mix.js file
like this
mix.scripts([
'public/js/admin.js',
'public/js/dashboard.js'
], 'public/js/all.js');
this is a proper way to compile your JS asset .

Css and Js files are added correctly but not working in Laravel 5.6

I'm gonna add a template to my laravel, I put template files in public folder and as always, I use the following command to load its files:
<link href="{{ asset('admin-panel') }}/dist/css/bootstrap-rtl.min.css">
<script src="{{ asset('admin-panel') }}/plugins/jquery/jquery.min.js"></script>
None of the files are loaded. In "view page source", the path of files is correct and files are opened But they do not work. What should I do?
At first I wanted to delete the question, but for some it may be interesting that the use of rel="stylesheet" in the link tag is mandatory in Laravel projects. Because this template runs well without being used in Laravel.
<link href="{{ asset('admin-panel') }}/dist/css/bootstrap-rtl.min.css">
Change to:
<link href="{{ asset('admin-panel') }}/dist/css/bootstrap-rtl.min.css" rel="stylesheet" />

Bootstrap doesn`t work without internet

I begin to use Bootstrap. And I add js/bootstrap.min.css
to my index.html and all works.
But, when I add bootstrap.min.js to index.html ,my, for example, dropdown menu doesn't work.
But, when I add http://code.jquery.com/jquery-latest.js - my dropdown menu works.
I want to work with menu without connecting to Internet.
Why?
you should download the script at your local system and put the script at in your project JS OR Script folder and call it from there.
like that:
<script type="text/javascript" src="/Scripts/jquery-latest.js"></script>
hopefully it works :)
Thanks
Bootstrap:
http://getbootstrap.com/getting-started/
JQuery:
http://www.w3schools.com/jquery/jquery_get_started.asp
Download and link the files correctly via relative paths.
Bootstrap uses jquery, since your need to use it without internet download the jquery file and put it inside JS folder and serve it to index.html
Here we go:
1) You are using jQuery library but not bootstrap
2) if you want to download bootstrap library to local, you will get from here : enter link description here
Instead of using cdn path in your index.html like this
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!--Latest JQuery CDN Link -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
try using relative path after downloading the required files as below:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!--Latest JQuery CDN Link -->
<script src="js/jquery.js"></script>
In your case jquery-latest.js must be downloaded from given link and included in index.html using relative path.

Categories