How to use Bootstrap with Django

in this video we're going to go from this pretty drab looking Django website to this one right here that looks a whole heck of a lot better and the way we're going to do this is with the bootstrap CSS framework so let's go ahead and do that as you know this is what our website looks like right now what we're going to do first is go to getbootstrap.com to get bootstrap and as you can see here they are on version 5.3.0 Alpha One at the time of this recording now we can include bootstrap directly into our project via CDN with these two lines right here so the first one pulls down the bootstrap CSS Library as you can see right here and the second one pulls down the bootstrap JavaScript library as you can see here so let's copy the CSS Library script to our clipboard and we will get out of here in our Django project we will go to our app directory and open up the templates base.html file now right before the end of your head close tag which is right here we're going to paste in the CSS link and then down here right before the end of our HTML body tag which ends right here we will paste in the JavaScript so script so it looks something like that now we'll save that go back to the root of our project and run our server and right away you'll notice a difference here when we refresh the page things are a little bit bigger fonts are a little bit different buttons are a little bit more square and some could argue it looks better but we can do a whole lot better than this too so the first thing I want to look at is adding one of the fundamental building blocks of bootstrap which is something called a container okay and that's a pretty easy one we'll open up our template again for base.html and what we're going to do is wrap our body in a div of type class container and you'll see what this does in just a second run our server and we'll refresh the page and what this does is add some padding so you're not everything's not pushed up against the left side of the screen so that's an improvement in and of itself now in addition to that I want to do something with the table right we can add some borders and maybe some colors so let's go to the bootstrap docs for the tables and that's on this page here you can have links to all the different elements that you can configure over here and what we're going to do is add a border to our table so table border something something like this so let's go ahead and do that we'll open up we'll minimize this open up our index.html file this time and we'll go find our table element and in here we will say class equals table and then table bordered so we'll save that we're on our server and let's see how that changed things so we'll refresh our page and that's good it stretched our table to be much wider and it actually added a border in it which is great there's another table element that I want to add here and that is going to be called table light and that's going to add a little bit of color to our table so we'll do that in here as well table light save that run our server and you'll see how that changes it added a little bit of gray background to our table now you can come in here look through all of these examples and Implement anything that you want but I'm just going to show you a couple different features that I prefer for my tables for this website other things we want to look at are buttons so we're going to go to the documentation for buttons and we have all these really cool different colored buttons so if you want a blue button you can use button primary if you want a green one you want button success red one button danger we're going to use all three of those in our project so we'll go back here open up the index again let's find the edit button and add some class attributes for this so we'll do class for the edit button equals button success and then the class for the delete button will be class button danger and I just realized here I also need to add the default button class as well and then in our save.html file do something very similar class button button primary all right we'll save that start up our server and let's see how that has changed our app I think it looks great we have green buttons for edit let's see if they still work Alex he got a 98 save that he is now down from the top Robert let's give Robert he deserves a hundred let's give him a hundred save that he's now at the top of the row delete Robert delete Mary delete Alex delete Paul if you made it this far in this tutorial congratulations you have pretty much done a great job at learning Django all these individual Concepts combined will help you develop more sophisticated Django websites Django products in the future and if you ever get to the point where you want to deploy your Django project to the public so that anybody can access it then I recommend that you check out this video next [Music] thank you [Music]

Channel: Tony Teaches Tech

Views: 9,682

Keywords: add bootstrap to django, adding bootstrap to django, bootstrap 5 django, bootstrap django, django bootstrap, django bootstrap 5, django bootstrap table, django with bootstrap

Id: SPGrc6byv_Y

Length: 5min 59sec (359 seconds)

Published: Thu Sep 07 2023