Style With Bootstrap
In this lesson, you’ll add some style to you website in a beginner-friendly way with Bootstrap. If you make a few simple changes, you can make some great visual impact on your site.
Go back to the template you already created, remove the heading, and copy in some HTML. It doesn’t really matter what the HTML is. Right now, your site is just plain HTML.
00:00 Hey, and welcome to this new video where we’re going to add a little bit of good style to our website in a simple way. We’re going to use Bootstrap for that. Bootstrap is a whole different story, so I’m not going to go into it too deeply, but I’m just going to show you the effects that a very simple change can have on your website. So, heading over to our app, this is inside of the template that we created before.
00:59 But it doesn’t look good, right? So, what we can do with Bootstrap is you can include the CSS file that, essentially, styles everything that you need from Bootstrap very simply. So, you just get this link. It’s a bit difficult to see here, but just copy-paste this link to a content delivery network, and then you head back over
01:33 It’s a CSS stylesheet, but this one lives on a link, like online, on HTTPS, blah, blah, blah, blah, okay. There you see it’s a CSS file, and then we have some integrity stuff— don’t worry about that much.
01:47 What it’s telling you is it’s linking to a CSS stylesheet that’s provided by Bootstrap. And now, when I hit back over to the site and reload it, it looks a whole lot different and a whole lot better.
02:00 That’s all because the Bootstrap styling gets applied to the HTML that’s sitting over there in our template. So, whatever you would have in here—you can get rid of all of this, just to give you an example…
02:45 And then if I add Bootstrap, you’re not going to see as many changes as before, but you can see that already, this gets applied. We have a different font, that’s easier to read, and that’s all the style that we have so far.
03:39 And as a result, now it looks like that. That’s only because I have Bootstrap included. For a final check, take this away and reload the page. None of this gets applied. All right, so, include Bootstrap, learn a bit about it, read in their excellent documentation, and you’re going to have a good way of quickly styling your website to make it much nicer to look at and, yeah, look like a modern website.
All that with just a simple link in the
<head> of your templates. Okay, that’s all for styling for this project. If you want to learn more about front end web development, there’s a lot you can do, obviously, but this is not the focus of this course, so I will just leave it at that for now.
Become a Member to join the conversation.