Right now I have bootstrap 3 and I want to update it to 4 in laravel 5.5
So I guess I have to change my composer file
from
"bootstrap-sass": "^3.3.7",
to
"bootstrap": "4.0.0",
"popper.js": "^1.12.6",
That will install bootstrap 4 but how do I link it to my current application.
I don't know in which files laravel is referencing the bootstrap 3 files.
you can just download bootstrap 4 bootstrap.css and replace the content of app.css file in public directory or public/css diectory with the content of the downloaded file. And all is well, you can use it in all *.blade.php file.
Related
I just installed a fresh copy of Laravel 9 and added these lines to vite.config.js
build: {
outDir: '.dist',
}
In Laravel we already have a public folder containing robots.txt and favicon.ico. As per documentation and answers here like this one, I was expecting that "npm run build" will copy the contents from this directory to .dist directory, but this does not seem to happen. I can see only manifest file and assets folder containing js and CSS and no robots.txt and no faviocn.ico. Am I doing something wrong??
I have a Laravel project where I'm using Jetstream. It works fine in localhost, but in webhost when I go to /dashboard I get following errors:
The Mix manifest does not exist. (/htdocs/laravelblog/resources/views/layouts/guest.blade.php)
Missing Mix Manifest File
Illuminate\Foundation\Mix::__invokevendor/laravel/framework/src/Illuminate/Foundation/Mix.php:46
My mix-manifest.json file is located in my main directory - htdocs/mix-manifest.json
mix-manifest.json
{
"/js/app.js": "/js/app.js",
"/css/main.css": "/css/main.css",
"/css/app.css": "/css/app.css"
}
I have installed Bootstrap icons into a Laravel/VueJS application using NPM, according to the instructions here, https://icons.getbootstrap.com/. What is the next step?
If I want to use the svg element in a blade template, do I need to compile it with webpack? Do I import it into a css file?
And how do I use it in single file VueJS components?
I am able to install bootstrap icons version 1.5.0 to Laravel 8 project and using laravel mix, by following these steps.
run this to install bootstrap icons into your project
npm i bootstrap-icons
add this to resources\sass\app.scss
#import '~bootstrap-icons/font/bootstrap-icons';
check webpack.mix.js file has this
mix.sass('resources/sass/app.scss', 'public/css')
run this to compile your change to public folder
npm run dev
then you can use icons anywhere in the page (either .blade or .vue file)
<i class="bi-alarm"></i>
Happy coding!!!
There is an error in the answer of mili, because if
#import '~bootstrap-icons/font/bootstrap-icons';
is included in resources\sass\app.scss then no #font-face directive is included in my app.css file when building with npm run dev. To make appear the directive I had to add the «css» extension so the correct #import would be:
#import '~bootstrap-icons/font/bootstrap-icons.css';
But there is another problem, in this case a problem of the builder, that produces that the icons are not showed by the browser (instead appear an square meaning that the broswer could not render the svg icon). The builder generates the following directive in public/css/app.css
#font-face {
font-family: "bootstrap-icons";
src: url(/fonts/vendor/bootstrap-icons/bootstrap-icons.woff2?dfd0ea122577eb61795f175e0347fa2c) format("woff2"),
url(/fonts/vendor/bootstrap-icons/bootstrap-icons.woff?94eeade15e6b7fbed35b18ff32f0c112) format("woff");
}
Laravel does not find the files because url() does not understand the absolute path (in my development environment). If you add «..» before the two paths, then all works (the icons appear in the page):
#font-face {
font-family: "bootstrap-icons";
src: url(../fonts/vendor/bootstrap-icons/bootstrap-icons.woff2?dfd0ea122577eb61795f175e0347fa2c) format("woff2"),
url(../fonts/vendor/bootstrap-icons/bootstrap-icons.woff?94eeade15e6b7fbed35b18ff32f0c112) format("woff");
}
The problem is that every time that you run npm run dev for any other package, the ".." are automatically overwritten, so the icons are not seen any more.
I have seen other people out there with the same problem, but I do not know where should be notified the issue and the solution. I will try to find a feedback window in https://getbootstrap.com/
Install Bootstrap in your Node.js powered apps with the npm package:
Copynpm install bootstrap
require('bootstrap') will load all of Bootstrap’s jQuery plugins onto the jQuery object.
After that use npm install bootstrap-icons to install bootstrap icons onto your project and include it in your app.js from node-modules.
After that, if npm run dev runs successfully, Then add the SVG element in your Vue components.
<svg class="bi bi-chevron-right" width="32" height="32" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6.646 3.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708L12.293 10 6.646 4.354a.5.5 0 010-.708z" clip-rule="evenodd"/></svg>
For demo purposes
Q> If I want to use the svg element in a blade template, do I need to compile it with webpack? Do I import it into a css file?
Ans.> No, you need not to compile while using in blade provided you import all the bootstrap files such as js files and css files.
For me the problem was fixed removing in the webpack on the sass instruction :
.options({ processCssUrls: false })
There is no need to declare a font face.
I try to start a Laravel 5.4 project without Bootstrap.
After installing Laravel, I edited the following files:
resources/assets/js/app.js
require('./bootstrap');
package.json
...
"devDependencies": {
"axios": "^0.15.3",
"bootstrap-sass": "^3.3.7",
"jquery": "^3.1.1",
"laravel-mix": "^0.7.2",
"lodash": "^4.17.4",
"vue": "^2.1.10"
},
...
I've got the following error:
ERROR Failed to compile with 1 errors
error in ./resources/assets/js/app.js
SyntaxError: /Users/.../package.json: Error while parsing JSON - Unexpected end of JSON input
at JSON.parse ()
# multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss
Any suggestions?
By default, Laravel 5.4 ships with Bootstrap and Vue.js scaffolding, but not everyone wants to use either of those technologies. With Laravel 5.5 you can run this if you don’t want any scaffolding to be generated out of the box by Laravel:
php artisan preset none
The line
require('./bootstrap')
has nothing to do with the Bootstrap CSS library. It loads the bootstrap.js file, which you will find in your assets. This file serves the purpose of "bootstrapping" your application (front-end). If you want to remove the Bootstrap CSS library from your project you should:
remove it from package.json
remove dependencies within your app layout
remove loading of sources from app.js / bootstrap.js
If you run "npm install" in the command line, bootstrap's sass files will be downloaded. Running "npm uninstall bootstrap-sass" afterwards will get rid of them.
I also wanted to get rid of bootstrap css codes in my laravel project. I opened the file
resources/sass/app.scss
and simply commented out the corresponding line as bellow
// Bootstrap
//#import '~bootstrap/scss/bootstrap';
I have recently started using Bower (or trying to!) to manage the packages within my Laravel 4 application. The two main ones being Bootstrap and jQuery.
My footer, using Blade is:
{{HTML::script('bower_components/jquery/jquery.min.js')}}
{{HTML::script('packages/bootstrap/css/js/bootstrap.min.js')}}
The link it displays is http://localhost:8888/bower_components/jquery/jquery.min.js, which is correct.
The 'packages' folder is accessible, but it can't find a thing inside the bower_components directory. I have set the permissions to -R 755 on the bower_components directory but it still isn't accessible.
Any help would be hugely appreciated.
Looks like it is not downloading those packages.
I don't like this bower_components folder it defaults to. This is how I'm using it:
I have a .bowerrc file which tells bower where the assets should lie:
{
"directory": "public/assets/vendor"
}
I ran
bower init
And every time I bower install something:
bower install jquery -S
It downloads, installs and adds them in the bower.json file:
{
"name": "MySite",
"dependencies": {
"jquery": "~2.0.3",
"bootstrap": "~3.0.3",
"font-awesome": "~4.0.3",
"datatables": "~1.9.4"
}
}
I make sure files were downloaded and installed:
ls -la public/assets/vendor
Then I just have to create my routes using:
{{ HTML::style('assets/vendor/bootstrap/dist/css/bootstrap.min.css') }}
{{ HTML::style('assets/vendor/font-awesome/css/font-awesome.min.css') }}
{{ HTML::script('assets/vendor/jquery/jquery.min.js') }}
I don't really mind much about permissions, because files must just be readable by web server and they usually are.
I created a .bowerrc folder within the root directory and added the following code:
{
"directory": "public/bower_components"
}
I then created a bower.json using the bower init command.
Then I installed both packages, jQuery and Bootstrap and referenced them as such:
{{HTML::script('bower_components/jquery/jquery.min.js')}}
{{HTML::script('bower_components/bootstrap/dist/js/bootstrap.min.js')}}