Laravel 10 | Installing Boostrap in Laravel application

hello everyone welcome to another tutorial my name is William in this tutorial we are going to use to look at how to use bootstrap in a laravel application uh by default laravel from several recent versions it has or in other words it ships with a Tailwind CSS installed and sometimes you might want to just work with bootstrap because you're comfortable working with it or maybe it's what it is that you know how to go about working with it therefore you might require to know how you can be able to do that and that is what this video is going to be all about so um we are going to open Terminal and then install laravel UI it's an authentication system for laravel but in this case it can allow us to be able to install bootstrap so we're going to run the command composer require laravel UI and then we install our installation of laravel UI is complete and we have installed laravel UI version 4.2 so we will go ahead and uh be able to generate uh the scaffolding so we are going to use the command PHP artisan bootstrap UI bootstrap and in this case if you're using if you want to generate scaffolding for view you will write View or else if you want to use react you can also write react and then continue like that so because we are interested in bootstrap we will have it like that and then after that I'm going to tag oath so hyphen hyphen oath to also be able to generate the authentication login page password resets all those pages that are required with this installation so after that I'm going to press enter and then install as we run that command as you can see we have authentication scaffolding generated successfully and then bootstrap scaffolding installed successfully so in this case after that we are being required to run npm install and npm run Dev so in this case because I'm working with a vs code how you do each command on its own so npm install the command npm install has finished in working and then now I want us to also do another command which is npm brand Dev in this case to compile our assets and we are going to compile them using white so you press enter and as you can see the compilation is complete and already we are running white and it's giving us some app URLs that are here now I want you I want to just go ahead and show you what those few commands have been able to do so you go to resources and then views initially we usually just have interviews usually just have welcome.play.php that ships with level but now we have home.blade and then we also have layouts so here we have our layout file which is up.blade and we will be using it in a in a short way and then we have authentication here we have password so confirmation password confirmation email reset email and so on and so forth login form register form and also verify email if you intend to use that something else that I would like us to look at when we check routes there is a uh yesterday's Earth routes this one that we are having here which also has appeared because of the same commands that you have you have run and then you also see that we have a get route that is uh taking us to uh home controller for the authenticated user so then um I would like us to just go to also to up and then HTTP controllers as you can see we also have an oath folder so inside here we have various things we have confirm password we have forgot password we have login controller register controller reset passwords all these controllers that uh perform the roles the their the intended roles in terms of working with it for example we can check the login controller and we can be able to see that it can be able to authenticate a user and then uh redirect them to home then after that we also have a that this you attach every other person is against with an exception of a log out so that is that I think that is good enough in fact I want us to go ahead and uh run this application and see if we can be able to log in a user and so as a matter of fact I'm going to run zamp and then run a passion MySQL depending with your development environment you will do whatever is at you as opposed to so here I'm going to migrate our file so PHP artisan migrate and since I have this um database already in my machine I can say my great full colon fresh if you are just migrating to a fresh table you just migrate like that but if it's a you want to drop the tables and upload again then you can do like that so we have those ones and then we can say um after that we can say PHP artisan serve to run our application so now when we come and check it out let me just open it in Chrome when we come and check it out you will find that we can be able to so localhost 8000. that is the router we are visiting you will find that we have login and register if we attempt to login this user maybe register a user because we do not have a user in our table we can have I use some maybe with the name William and then an email address so you can pick any email address there and then the password we will repeat the password to confirm it after that we can be able to register and the passwords do not match let me try again one more time yes let me register as you can see we are logged in so this is the home page that we saw in our uh in our views home.blade.php so this is the one that is showing uh whatever it is that we have here now all these is uh using bootstrap and so I want us to just change this home page because when you look at this welcome.blade.ph pillar just go back and see where it is this page is actually not in bootstrap it's actually um in Tailwind CSS so that is what I would like us to change so if you are if you are to modify this because as you can see what we have here is um this the way you look at the chord is purely Tailwind CSS let me just extend this a little bit so that you can be able to see everything yes when you look at this code that we have here is actually tell you in CSS this one is not a bootstrap even the classes the way they are mentioned and so on and so forth It's not bootstrap so I want us to remove everything from this uh welcome.blade and see if we can be able to use bootstrap so the first thing that we have is a file that is in is in a layouts this app.plate so I want us to extend that file and use it so we are going to say at extends and then we are going to say layouts because it's the name of the folder this folder here and then our file that we are referring to is app.blade.php we don't have to write the whole name we can just say layouts.app and then after that now we can be able to say section and inside here we will put content and then after that we can come and say in section and this content is being injected here so when we look at our app.blade there is somewhere where we have yield content so if you bring everything that is on this page in our application in our new page and then we can be able to add whatever is that you have and a section called content whatever it is that we will be putting inside there now after that I would like us to just go to bootstrap to just confirm to you that we can actually we are actually using bootstrap I want us to go to bootstrap.com and of course the current current version the current version is uh bootstrap 5 so I will open it and then we go to documentation I want to copy a card and place it to the site that you can be able to see that bootstrap content is actually working perfectly so let us go to cards yes you pick a card and um I want to just scroll down up until I reach one of the cards that exists there are so many here maybe I can choose this one how you copy it I'm going to paste it here but as I paste it I want to have a div with a class of container and then I will paste the content inside here so as you can see if we are to refresh our page we are able to display the bootstrap content perfectly I would like to just maybe make this card a little bit smaller than the way it is and Center it nicely so I'm going to just maybe add some something to our card class so here under card and that this class maybe I can add call six and offset three like that so it you even affect our card file and you can see our card has been loaded and all these things are done once I just do the changes why it will be able to recompile our assets and be able to display whatever it is that we have so you can see we are perfectly using bootstrap in our application if you want to change things like headers and whatever you can be able to go to app.blade.php because this is the file that is giving us almost everything that we are having here the only thing that we have added is what we have gotten from bootstrap thank you very much for following this tutorial up until this moment I ask that you may subscribe you may comment you may share and if this video is uh you have liked it you can leave us a thumbs up

Channel: LaraPhant

Views: 5,621

Keywords:

Id: QR14g7dBhTs

Length: 13min 45sec (825 seconds)

Published: Mon Mar 20 2023