Modifying Bootstrap

Quick reference

• 00:05 In this video I wanna talk about how to customize Bootstrap and
• 00:07 there's a bunch of different ways to it, so let's dive right in.
• 00:10 So the first way you can do it is, you can come to getbootstrap.com and
• 00:13 click on this Customize link.
• 00:15 If you scroll down here, you get to see all of the things that are in Bootstrap.
• 00:19 So ,for instance, Navbar, if you wanna change something about your Navbar,
• 00:22 you don't want it to be 50 pixel you want it to be 80 pixels.
• 00:25 You change that right there.
• 00:26 You go through, you change all the things, and
• 00:28 you scroll down to the bottom and you compile and download.
• 00:31 And it will compile this into a new zip file that you can download and install.
• 00:35 So that is one way to do it, definitely.
• 00:37 I do not recommend that you do it that way because we know CSS,
• 00:41 we don't need to do this clumsy method right here.
• 00:43 Instead, we can come back and we can do a couple of different things.
• 00:46 First, the bad way, you could just come to your CSS folder.
• 00:50 And this is bootstrap.css, this is the main CSS file.
• 00:54 And you can see in our page here, bootstrap.html,
• 00:57 we are referencing this min CSS, min stands for minimized.
• 01:01 So, what they do, is they take this Bootstrap file and
• 01:03 they scrunch it all together.
• 01:05 In fact, we can look at the minimized version and
• 01:07 you can see it's all smushed together, you can't read this it's all on one line.
• 01:12 But you can read this Bootstrap.
• 01:14 This is, it's spaced out normal so humans can read it, right?
• 01:17 So one way to change this is just to scroll through here and
• 01:20 find the thing that you want to change and change it.
• 01:23 Now I don't recommend that you do that because, for one, this thing is huge.
• 01:27 And if you do do that, you need to come back here and
• 01:29 reference that Bootstrap file in your HTML page.
• 01:33 Otherwise, it'll still be pointing at this minimized one, and you won't have changed
• 01:37 the minimized one, you'll have changed this main bootstrap.css file.
• 01:41 So that's one way to do it, that's sort of a hacky way, I would not do it that way,
• 01:45 just cuz you don't wanna mess with these default files.
• 01:48 A better way is to just come up here, click right on the CSS and
• 01:51 create a new file.
• 01:52 And I'm gonna call this custom.css.
• 01:55 Now if we come up here, we can designate more than one style sheet in an HTML page.
• 02:00 So, I'm just gonna add a new one and I'm gonna reference custom.css.
• 02:05 Now if we save this, we can click on here.
• 02:08 So I come down here and I click on the Navbar, and let's say the default color.
• 02:13 Now, these things are a little tricky.
• 02:14 This is not actual CSS classes, but it's enough to give you an example.
• 02:19 So if we come up here and highlight this, and let's open up our bootstrap.css file.
• 02:24 And I just wanna, I'll push this in, I'll hit Ctrl + F to get this search bar,
• 02:29 and you see nothing comes up.
• 02:30 But if we start to remove this, boom all of a sudden we have 3 of 41.
• 02:35 So navbar-default, that's what we probably want.
• 02:37 And we can see right here, this is what it is right now, navbar default,
• 02:42 the background color is sort of gray.
• 02:44 So if we copy this, bring it over to our custom.css sheet and
• 02:48 I don't care about the border color, I'll change that.
• 02:50 Let's change this to red.
• 02:52 We save this, oops, we don't want the hash tag, we change this to red,
• 02:57 come back here, hit reload, boom, we get this got awful ugly red.
• 03:01 So that's a way to do it.
• 03:02 If you don't like the button colors, like the primary button colors,
• 03:07 let's come back here and just scroll down here until you see buttons.
• 03:12 And button primary-color.
• 03:16 So I'm gonna highlight all of this, save it, come back here,
• 03:19 click on my bootstrap.css, hit my Ctrl+F, paste that in, no results.
• 03:24 If I start to scroll back, boom, btn-primary.
• 03:26 So here we see all of this different stuff, so I'm just gonna highlight it and
• 03:30 copy it, come back here to our custom sheet, pop it in there.
• 03:33 So color fff,
• 03:34 that's white, background color, that's probably blue, let's change this to green.
• 03:40 Save this, come back and hit reload, and that did not work, ooops, hashtag.
• 03:44 Sometimes you have to play around a little bit to find the right CSS.
• 03:48 Boom, now it turns into green.
• 03:49 So that is how you customize Bootstrap.
• 03:51 That's the best way to do it.
• 03:53 Like I said, you could come in here and try and find the stuff and
• 03:56 change it in the actual Bootstrap, .css file.
• 03:59 I don't recommend you to do that cuz then things start to get wonky.
• 04:02 Much better to put it in your own custom.css file.
• 04:04 And another thing I should mention, when you add this custom.css line,
• 04:09 it goes underneath this Bootstrap reference.
• 04:11 So don't put it on top.
• 04:15 That can make things a little weird.
• 04:17 Put it beneath, save it and that's how you do that.
• 04:19 And that's all for this video.

Lesson notes are only available for subscribers.