Django Tutorial - How to Add Bootstrap

hey guys and welcome back to other django tutorials so in today's video what we're gonna be doing it's just adding bootstrap to our website and doing a little bit of styling I'm gonna show you guys how we can add some just nice-looking classes and how you can kind of look through the bootstrap documentation to find what you're looking for so all we'll do is really just style a few different elements and make things look a bit nicer and then I'm kinda gonna leave the rest to you guys so with that being said let's get started so I'm gonna head over to the bootstrap website and it actually gives you a really easy and quick way to get bootstrap on your website and all we're gonna do to do this is just kind of follow this page so first let's talk a little bit about what bootstrap is so bootstrap essentially is a CSS JavaScript jQuery framework which allows for you to add some custom built styling to your website now this actual framework is built on what's known as a mobile first site framework early so it's meant for building responsive mobile websites that and then they will expand to desktop applications so apparently that is kind of the best way to do it now is to build stuff ideally for mobile because that is where most of the web traffic is nowadays I believe I could be incorrect so you build it first for mobile and then you kind of expand it out into desktop so anyways let's get started and use bootstrap so what we're gonna do is just follow this page so the first thing you need to do is copy this link here so CSS and I'll leave the link to this page in the description if you want to do this as well so I'm gonna copy this stylesheet here and all this all this is essentially is this kind of stylesheet but just online that we're gonna access and be able to use so it's served on what's known as a content delivery network which we don't actually have to download the stylesheet we can just copy this link in here at the bottom of our head tags but just above the title and we will start using this this stylesheet on our website now that we've done that there's a few other things we need to add so let me go down here to the starter template and just copy a few things we're missing the first thing I'm gonna add is just these meta tags and these meta tags apparently are important they just set up some properties for your website so we'll put them is linked like that just to finding the type of characters you can be using and then I believe this is something to do with the mobile friendly kind of look or whatnot so now that we've added that they might have to go above that we'll add those bub we'll add this doctype HTML so just exclamation point doctype HTML we'll add that at the top of our file like that hit save and I'm just gonna move these meta tags to go above our link here so our stylesheet like that sweet so now that we've added that there's only one more thing is three more things actually that we need to add and those would be these scripts and these scripts are used by some of these CSS classes and to do a little bit of animation and just make things look a bit nicer maybe move some components around the page so we're gonna add these at the bottom of our body tags so underneath all of the content here now you don't necessarily need to add these scripts but in some cases when you use certain CSS classes they will require these and then things might look a little bit funkier things might be off so anyways now that we've added that we're actually ready to start using bootstrap so the first thing I'm gonna do is kind of add some divs and some different classes into my main content block here and I'll talk briefly about what they do but really the way to understand this stuff is just to go to the bootstrap documentation so for example if I go here and just look at all the different components and cut copy the stuff that you like that what it looks like and then customize it so for example if you wanted a large button you would go to the buttons tab here for components this link will be in description as well look at a button you like and then literally just copy the tag or the class for it and then you can customize it accordingly so that's what I'm gonna be doing for this kind of and I'm just gonna be copying some code that I've already written to style my website in a way that I think looks I mean decent okay I've been gone too far I didn't take too long to do this so anyways let's add some dibs here so the first div I'm gonna add is class equals in this case row and then justify in this case content content and center it like that which this is gonna mean we're going to put this in the middle of our web page so yeah so I thought and now what we'll do is we will add another div and this div we're gonna say class equals and in this case column H which is going to define what column space we're gonna be in we will end this div here and we'll add a few other things as well so now I'm gonna add an h1 tag and this h1 tag is actually gonna be the header of my website so inside of this tag you're gonna call whatever your header you want so I'm just gonna say - my site and I'm gonna give this a class of in this case we will say MT - 2 again I'm just taking these from the bootstrap website if you don't know what this stuff means you can either just look up the class and it'll show you the styling for it or you can just go to the bootstrap website and look for ones that you like so this case i'm gonna do mt 0 mb - 4 and what this is gonna do is draw a little line for us underneath our header just make things look a little bit nicer so that's all i'm actually gonna add here for this main base template now let's go to our website and let's see how it looks so this is what it looks like before and just with those few adjustments when i refresh the page notes see how it looks now okay so there we go um so actually so these little check buttons here shouldn't be here one second guys just because I might not have saved a page those messing around with it before it let me refresh this now ah there we go so that's now what we're getting now it should be in the middle of the page we just kind of throw me off just a little bit I spelt justify incorrectly that would be why so row justified content center I knew I was doing something wrong there so now let's refresh this and there we go now we can see that it's moved to the middle of the page and we have this line here obviously as well still sweet so that's it for just styling the base template so now that's going to apply to all the web pages that we have if I go to create for example you can see that it applies to this as well so now it is time to style some of the other pages that we have so the first one I'm gonna style is this create page so notice this is what it looks like now let's mess around with this now what I'm gonna do is change some aspects of this form so I'm gonna add a class here and I'm gonna say this class is form - group I'm just gonna put this create page into let's say like an h3 tag for right now just because I want it to be a little bit bigger on the page and won't add any any styling to that so now we'll add some divs inside of this so the first step that I'm gonna have is just gonna be an input group so I'm going to say div and in this case class equals input - group in this case MB - 3 and then I will end this like this I believe this might be the correct place for it I'm probably enough to mess around at these a little bit we'll see I'm also just gonna put this form instead of doing form as P I'm just gonna get the name attribute from our form so the way I do that is just by saying form name so rather than showing the entire form because we have that little check button I'm just gonna show the name textbox cuz that's all I actually want for right now so now what I'm gonna do is actually I'm gonna move this underneath here my apologies and I'm gonna add another div and this one is gonna be class equals and in this case input - group - 3 pent now this is a really nice div that they have here the class that they've made and what this does is all you guys will see in a second is it makes this button kind of mesh with this text input so they go they look at like in one line where it has the button and then it has the text input field right beside it but they're like combined together and it looks really nice you guys will see in a second how that looks now the last thing I'm gonna do is just add a class to my actual button itself so I'm going to say class equals in this case BTN and then BTN - what was it success I believe yes BTN - success and that might actually be it for all of my styling for this page so let's go ahead and have a look down and see how this looks if I run this there we go we get creep age and now you can see what this prepended it took this button and it put it on the left side of my text input and notice that we get this little these little things coming up this happens obviously because of some of the JavaScript and stuff we have please fill out this field you can see that's there we're gonna create new we can see that pops up with there's a ha for just all this nice stuff that bootstrap does for us some of it's done by Jango but most of it's done by bootstrap now let me go to view so now it's time to make this one look a little bit nicer so let's go ahead and do that and then we'll wrap up the video here so this will be a little bit more tedious but let's actually get rid of this kind of ul view and tags and stuff because I don't think we're gonna need to use these yeah so let's get rid of these you l's and let's get rid of these allies because right last time we're just using allies to make them show up in a nice kind of group but we'll use some some classes here from bootstrap to do that for us so we can tab this back so let me do that actually I probably should just left it cuz I'm gonna have to put this inside of dip but anyways inside of a for loop now I'm gonna create a div I'm gonna say this class is equal to and in this case input - group and then we'll do mb - 3 and then I'm gonna add a prepend in here as well because I want to combine these check boxes with wouldn't call it the text which will add in a cool way in a second so I'm gonna delete these text right now what I'm gonna do is add a prepend here so I'm gonna say div and in this case class equals and in this case what was it it was something like prepend input group - prepend input group - prepend let's tab these in we will end this div and we will end the other dip as well just make sure we don't forget like that so now what I'm gonna do is outside of this this div but inside of the other one I'm going to add that text that I have back in so I need to actually get the item text I'm gonna add this though in a weird way I'm gonna add this in an input box so the way I'm going to do this I'm gonna say input and in this case we'll say type equals text and then we'll simply just say value equals and in this case we'll say was it item dot text like that now we'll add a class to this as well we'll say class here equals and in this case form - control and there we go now that's it for the kind of displaying the items let's actually have a sneak peek of how this looks and see if I made any mistakes or not okay so it's not ideally what we wanted to look like we can see we have these text box and we have the check button so let me make sure I didn't make any critical errors here before I might have either misspelled something or forgot to add something ah so I've forgotten one class which was probably pretty important here so we're gonna add another div and in this case we'll say div class and in this case equals input - group - text will end that div where is the stip ending I believe right here and that should be good for that I don't want to say for sure but let's see there we go so that's better this is what I wanted now you can see we have the check button dov showing up on a nice little color here and then all of our items show up in text boxes and I mean you can actually edit the items but when you save them it's not gonna it'll just go back to whatever you had but I just wanted to do them in this week so it looks really nice and now what's left to do is just modify these buttons here so let's go ahead and do that so what I'll start by doing is adding a class or a div here so I say div class equals in this case we'll say input - group in this case MB - 3 I will tab all of these I guess except for let's see which ones I actually want I'm gonna put the Save button I think on a different side so let me put the Save button down here and I'll tab these two in these add item and I'm actually gonna do the same thing that I did with the creating a new to-do list in terms of that prepend thing with these items so to do that I'm gonna add another div in here and in this case I'll say div and then class equals in this case input group - prepend you guys can tell I like this this prepend thing that you can do here prepend we will tab these in and then we will close these tubes so / div and / div but I believe that I have to put this input actually right here and that I think is correct there we go sweet so now all I need to do is add some classes to the button so I'll add the same classes that I used on the other one so I'll just say class equals in this case BTN BTN - success and I'll just copy this and we use this class down here as well just to be consistent so anyways that should be it for styling let's have a look now if i refresh continue there we go so now we get add item and we get saved and things are just looking a lot nicer on our website obviously there's a lot of work to be done but taken I did this in 13 minutes in a video or ever long this video is and I've been kind of explaining things as I go but I'll quickly show you that if you want to look at the different components and see all is that this different kind of stuff just go to the bootstrap documentation this is the link I'll put in the description go to components here and for example if you want to look at a navbar and how this works then it'll explain to you how to create one and you can just really copy kind of however whatever you want from here if I go to for example buttons you can see all the different kind of buttons and how to make them and it just tells you what classes to use you use those classes and then it looks nice on your webpage so anyways that has been it for this tutorial if you guys enjoy please make sure you leave a like and subscribe and I will see you again in the next one [Music]

Channel: Tech With Tim

Views: 81,788

Keywords: tech with tim, django tutorial, django bootstrap tutorial, django bootstrap, django bootstrap 4, add bootstrap to html, how to add bootstrap, django, bootstrap django template, bootstrap django

Id: 0mCZdemSsbs

Length: 14min 47sec (887 seconds)

Published: Mon Apr 22 2019