How to Install Bootstrap for PHP form layout

미연

·

2022. 4. 29. 10:49

what's going on guys welcome back to the next post in learning PHP you guys watching my blog coriowood alright so in the previous post we have shown you guys how you guys create your first form just to put your name and once you guys put your name you guys can submit and it goes to the dashboard so it's still in the the form but it goes in the dashboard so before we go go ahead and we're going to create here nice registered layout like a facebook so and before going that we're gonna go here and you guys type on your google search or any other search engine bootstrap bootstrap and if you see five that's fine still fine but when you go here there is a site here https://getbootstrap.com okay so bootstrap is a styling template it gives you guys more options when you guys create something nice like this like a home doc example icon steam block and if you guys don't not sure what is bootstrap just guys go ahead and check my another post playlist it's learn bootstrap so you guys can check that and you if you look at here we're going to explore the page you guys can do like this too but it's more advanced you guys can go to npm and other methods but if you look in here you can create with the bootstrap all these styles here all cool style here so this gives you a lot of flexibility so if you guys looking forward to go and be a php programmer or web developer you guys need to know that there is something called bootstrap and this bootstrap at the moment is bootstrap 4.5 every programmer knows how to deal with so currently the version is 5.15.1.3 as the recording of this post okay so if you come here and download you go is going to see there's few options for you guys to download if you look at here you guys can download the latest so that's the latest version if you guys looking here so that's compiled download ready to use compile called bootstrap file so if you come here and you're gonna press download and it's gonna download in your so we're gonna save file and it's download it's going to be downloading our download folder so we've got to wait for this one to download okay so we're going to go here in our download this my c folder and once i go download and i'm going to see this bootstrap 5.1.3 is i think it's downloaded so i'm going to double click to unzip it if you don't have winrar or any other raw so we're going to close this one we're going to put up we're going to put extract to and it says extract to say we're going to put it extract to here downloads and we're gonna put extract to here and we're gonna check it's already extracted so we're gonna close this our bootstrap is ready so you guys gonna go ahead and copy this one or if you not sure you could just control control c so we can copy and we go on local local disk c okay once you guys here at local c you guys gonna look for program files all right so once we're here we're looking for we are here at local c you're looking for web if you guys in ram if you guys exam you just go on a sim and i'm gonna open the file if you're exempt you just go on htdocs whatever the folder you're creating you just put inside there and because i'm a ram i'm using them for PHP because i don't need to turn on and off every now and then so we're going to go WWW once you guys go to www and you guys look in here inside form and the forums here you guys just open the phone and you guys can paste your your folder the copied folder so i have just pasted my folder so our bootstrap is downloaded so we're gonna come here and we're gonna rename the bootstrap and we're gonna put it just a bootstrap easier to remember because you guys need to download this one in your folder so it's a lot easier and we're gonna create another folder so you come here and just put a folder asset you can put a asset because the put strap is in our asset and we just put this one inside here so that's it you guys can do that very easy and we're going to come here and we see our asset our bootstrap here okay so you guys need to include your bootstrap so how we're going to include our bootstrap so before you guys gonna come here and you put the title here on your if you guys need to put a title so i'm gonna put a toy called Coriowood you guys can put any other title and now you guys need to come here and reference this one so the bootstrap knows the html knows that you guys wanna reference this one so we're gonna put our link and our link is say that we are linking this file which is index to this file which is bootstrap so you guys look in here we have a css and we have a js this is all js for bootstrap and this is all css in in a bootstrap so you guys need to reference this so you guys look and come here and you guys gonna put a reference and what our reference gonna be say you have an asset and we have a bootstrap so we put an asset and we put a bootstrap boot strap that's our reference and you guys once you guys create this one you guys need to create another one too as a style and we're going to go here and we can create another file and it's going to be we're going to go ctrl s for save and we put a style dot css css is a cascading style sheet that's for styling so if you guys whatever you guys want to do because you guys need to do styling and a bootstrap in one file to work okay so we put the path wrong that's a bootstrap bootstrap and then it's going to be css css so what i'm looking for this one the first one this is the second one which is this one then this is the third one and inside this one so we have access to this this is every point every folder until we get to this folder so how many folders we have we have a asset first the beginning then we have bootstrap then css asset bootstrap css bootstrap means css okay so looks like school should be fine and look with here it's always working so you're looking here all the style kicked in and looks awesome now all right so now with our bootstraps working we're going to create some sort of noise style so we created the earlier our style here so we're going to put this style also i created this one inside here so this one's gonna come here and now we're gonna put another one another link here without style so we don't have to do it later on and we put the same same but this one is not destroyed in the folder this one's sitting in assets so we put asset and we put a style dot css that's what we're gonna do install.css and if you guys work with this install if you double click and our install opens all right so now with our files ready and this post is getting uh longer and i don't want to give you guys more headache just just in this post i just wanted to show you guys how you guys could install bootstrap so in the next post we're going to show you guys how you guys going to create a nice layout like a facebook and i just want to create some sort of registered registration and login and i want to create some sort of dashboard or some sort of profile so give you guys the big the basic foundation of how you guys going to create your social media in the future so we're going to work on this on this template framework on this little little PHP framework so we're gonna show you guys slowly bit by bit of the different styles of the social media how is how it's done and how it's created all right guys this is for this post