This lesson is exclusive to members

Responsive Web Design Essentials - HTML5 CSS3 Bootstrap

How to customize the default Bootstrap 4 css styles

Daniel Walter Scott

Download Exercise Files Download Completed Files

Contents

Certificates

We’re awarding certificates for this course!

Check out the How to earn your certificate video for instructions on how to earn yours and click the available certificate levels below for more information.

Introduction

I recommend hosting your new website with Bluehost, you can get a big discount by signing up with this link: https://www.bluehost.com/track/byol/byol_webess_103

Comments

Video transcript

Good morning, everyone. Today we are going to look at how to override Bootstrap styles. It looks very Bootstrap-ey to start with. We're going to customize it a bit to change it to look like this. There we go, a lot less Bootstrap-ey. We're going to do a couple of things. We are going to show you how to completely override the styles, but also how to just work within the styles that Bootstrap have created. Often there are styles that have been applied, that we want to change, and Bootstrap's pretty helpful and have actually created alternatives for them. So we do a mixture of overriding, and just finding alternatives. All in this morning's video where I have the croakiest voice, that I can't get rid of, because it's real early. See you in the video. 

To override our styles we're going to close down our kind of like throw-away HTML we were using. We're going to open up our Index page by double clicking it. So let's have a look at the CSS. You can actually click on this link here, if you hover above it, on my Mac it's 'Command' and click, I'm sure on a PC it's 'Ctrl' and click. I'm going to click it, open it up, and that my friends, is the CSS Bootstrap. Holy smoke. It's a minified version, which looks more complicated than it is, just, but it's all in there, just cut down to the smallest possible size. 

So if I go 'Find', I'm just using my, 'Find', 'Find'. Let's look for our H1 and you can see, there's five occurrences; 1, 2, 3, 4, 5. And this first one is kind of more of a zeroing code by the looks of it Lots of stuff gets its margin set, I know, just a little bit. So the Margin top of 0, Margin Bottom gets overridden. Over here, the H1 size gets it to 2.5 

So there's some stuff going on that I can figure out and then start to override. Now what you don't want to do is actually start adjusting this file, because you can download bootstrap.min.css, and actually start editing it. getbootstrap actually has a non-minified version that you can start adjusting, but it's best to just leave Bootstrap do its own thing and override it. It gets way too complicated to start adjusting the specific files. So what we do is, in Visual Studio Code, is you create your own CSS sheet. Let's create it first over here, right click, 'New File'. Let's call it 'Styles', just call it 'style.css'. And in my - I'm going to drag it over here. - in HTML I'm going to, underneath my Bootstrap CSS, I'm going to add my own link, so link css, and it's happily called it style.css Not by default, just by luck. 

So the thing is, the big thing is it needs to be underneath Bootstrap for it to work properly. Let's go and change something. So at the moment, let's have a look, I'll start our browser. It is set to a specific font, let's go and change the Body Copy font. So in here we can say, 'body', we're going to pick a Font Style at the moment. I'm just going to pick one of the, no, not Font Style, Font Family. We're going to pick one of the defaults. This one is going to be something strange, we use 'impact'. I'm going to preview in the browser, you'll see everything is gone and changed. 

So we're going to leave their CSS all the way alone, and just work on the top of it, but what we're going to have to do is, sometimes figure out what Bootstrap has called things, to override it properly. I'll show you how to do that a little bit later on. Let me show you what will happen, and what you'll have to fight with, if you get this below your style.css 

Can you see, back to the way it was, and you're like, "Hey, but I said, be Body, be Impact," or that word. So just got to make sure that that's around that way. So that's overriding a style, very often though you won't actually have to override a style, you'll just find another appropriate Bootstrap style, because they're giving you loads. So what you end up doing is, let's say, let's look at this fella, I'm just going to get it here. That sliding thing down the bottom is annoying me, but let's say-- that's the H1, this thing here, let's figure out what that is first of all. 

So there's a little trick you can do in Chrome. You can right-click it, and go to 'Inspect', and whatever thing you had kind of highlighted, it will show you in the HTML what it actually is. You can see it's a P-class with P, with a Class of Lead on it. So it's going to have a look at our HTML. Where is it? So Navigation, it's underneath 'Navigation', 'Jumbotron'. So P-class with Lead on it. You're like,"Actually I just want it to be a regular P-class." So instead of trying to style the Lead Class, and you want to make it look like this, just a regular old P-tag, just go and remove this, or find out what it does, and see if there's an alternative that you like. 

So grab it, copy it, and let's have a look at the getbootstrap site. Documentation, and let's see if we can search for the Lead. A little bit faster, there it is there, so it is on their Typography. So it's under 'Content', 'Typography', and there's a bunch of different options in terms of styling. So these are the H1s by default, and this is weirdly a P-class with a Style of H1 applied. So you don't actually have to have it the Heading1 to be a nice big bit of type. 

Other things, there is a Class here, but muted text. You can see here, it's made it all kind of faded out. This is where you start kind of exploring Bootstrap, and finding things you like. A display option, so an H1 with a display of 1 gets huge. Lead makes a pair of standing out, by Lead. You can adjust it, you can go now and style this Class, because you want all the Leads on all the pages to be slightly different. Bits italicized, or something, or you can go through and actually just say, "I want to remove it." Let's go and, in our case just remove the Class. 

So everything, except for the square brackets, now it should just be a regular old bit of text, like the top one, or we can say, let's use one of the other ones we found. What have we found? Let's use display 1. I'm not sure if you-- what happens when you put display 1 on a P-tag. It's exciting, let's do it, in here, my P-tag is going to have a Class. Class of, not Lead, what was it called? 'display-1', I think. 'display-1'. Let's check it. Checking in the browser, whoa, it's a big first paragraph, and then that font that we picked, don't worry, we're not sticking with that font, it was just a for-instance impact. 

There's going to be a bit of time at the beginning where you're like, "Oh man, how much time do I want to spend going and learning this stuff?," versus just overriding it. There's nothing wrong with overriding it. I'm just saying, I'm going to add my own Class and do it, but it is handy to start understanding what these things do, figuring out if some of the hard work is being done for you, but in our case, like Lead isn't super exciting. You can just override it or make your own one, but have a little look through the rest of this typography one. 

You can see there's lots of cool stuff here, bold, italicize. You can see all the shortcuts for it all, you can see there's a highlight one. You could add that as a little Span tag, wraps around the outside, and it will highlight it ; oh, fancy. We're not going to go through them all. What I really wanted to point out was that, sometimes you override it by actually just going and doing it over the top, and then sometimes you actually just figure out, what the Class that currently is applied, and then go and change it. There's lots of stuff that we're going to cover later on in the course, that are just like, this is kind of a weird cool one, really like it. 

This is adding a margin of 4 rems to the Y-axis. So up and down, so there's a horizontal ruler, which is this fellow here. Where is my ruler? Had it a moment ago, there it is there. See this line, this line running through the center there? You have to zoom in there because it's pretty small and thin, but there is Padding of 4 rems, top and bottom. Not left and right, top and bottom. So it uses the Y-axis, so there's some kind of like, naming conventions that we're going to get used to as we go along. So for the rest of this video I'm just going to do stuff we've done before, just to tidy this thing up. First of all I'm going to get rid of my Display Class, and add back my Lead. I'm going to bring in some fonts, we've done this before, but if you want to practice, follow along with me. So google.com/fonts, and you end up at fonts.google.com 

I'm looking for two fonts for this particular website. So ones I want is this one here called Abril Fatface, and the rest of the text is going to be Open Sans Light. Probably Open Sans Light, plus with a bit of Open Sans Bold. I think that's the only two that I used. So let's do this, let's do Abril Fatface, I'm going to add him, and I'm going to do Open Sans. Cool. Let's have a look down here. Let's say, Open Sans, let's customize it. I want-- I don't think I used Regular, I just use that in Bold, and when I get to Abril Fat Face, oh, I get lost, that's Open Sans and underneath it is Abril. Yeah, just there's only one size for that font, so we're just going to use the Regular. And what we're going to do is we're going to embed it. We're going to grab this at the top, copy it. Make sure it goes above our CSS sheet. Hint there, you remember? Does it go above Bootstrap or below Bootstrap? Works either way. 

Let's save it, and what else we need? We need to actually apply that to our Styles. So let's grab both of these because we will use both of them. So over here I want my-- I'm just going to dump them in here, willy-nilly, because I want all of my Font Family to be a default of Open Sans, and I'll make it a default of, I need to change it to white, but probably a little later on once I start coloring my site. How does that look at the moment? If I do white too early, I'm not going to be able to see all this text. Yeah, we'll change it a little bit later on, but I want it to be a Font Weight of the Light that I was using, and over here it's described as 300, that's the Light for that one; cool. 

Another font that I want to do, I want to do an H1, and that's what I want to use my Abril for. Actually I deleted the wrong one. Go back, Dan. Remember, fonts, it just says, I want you to be Abril, If you can't find it go and find the default cursor font. It's the one that's going to be the fanciest one on your machine. This one says, Open Sans, if you can't find it, whatever the default Sans Serif is, which is probably going to be Arial or Helvetica, but it should load because we've told it up here, load from Google, and Google is pretty consistent. So we've overridden some bits, let's have a little look. Where's the document? There it is there. So everything that's not our H1 is now Open Sans Light, and our Heading here is Abril. 

One last thing I want to do is add a Background Gradient. We're going to jump in here, and I'm going to say, you pause it now, and see if you can do it. Remember, our Background Gradient, it's going to be a-- I got the colors in your, where are they? Your 'Exercise Files', in 'Project 4', there's a document in there called 'Project4 Text', open that up. Those are the two I want you to go for. See if you can do it without checking, and just see how you go, if you can remember it. So go on, pause it now. How did it go? Do you remember where to put it? It went on the Body. Do you remember what it was called, because it's a weird one, right? It's 'background-image', then you decide where it's going. 

We're going to use Linear Gradient, and inside these brackets here we decide the direction. I love this, normally it's all abbreviated short stuff, but, to bottom right. Means it's going to go from top left to bottom right, comma, then we're going to put it in our two colors. So at these two, can't use the hyphen, just added that in there. I should take it out of the text, actually. It's confusing, and just a comma between them. So don't need that little hyphen there. Those are the two colors. Just going to make sure I close it off, can't see the side. Let's move it over here. Run the edge there. 

Now that one's doing it by default, why isn't it wrapping on this side? I'm sure I turned it on. It's just at the edge of where it should wrap. There we go, turn it back on. Let's save it, let's have a little look, and there we go. Look at that; beautiful. 

So we've customized our Style Sheet a little bit, overriding things, and also, you're going to spend a lot more time probably figuring out what these Classes, what is this BG Light, and what does it do, and can I-- is there a BG Dark? I bet you, there is. And kind of having a look at the documentation, and either finding something already exists, or at least close to what you want, and then doing a slight adjustment over the top. 

That my friends, is Bootstrap life. All right, on to the next video.