Locked lesson.
About this lesson
Exercise files
Download this lesson’s related exercise files.
Modifying Bootstrap.docx59 KB Modifying Bootstrap - Solution.docx
59.1 KB
Quick reference
Modifying Bootstrap
Customizing Bootstrap can be done by creating a custom css file.
When to use
Any time you want to modify Bootstrap to do something other than the default, use thse instructions.
Instructions
To customize Boostsrap, create a custom CSS file (I like to name it custom.css but call it whatever you like).
Reference that custom CSS file in your web page in the <head> and </head> tag:
<link href="css/custom.css" rel="stylesheet">
Make sure that reference is added UNDER the Bootstrap reference:
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
Add any CSS you'd like to that custom CSS sheet.
Copy and past the CSS class you want to modify from your bootsrap.css file into your custom.css file and then make whatever changes you like.
Hints & tips
- Create a custom CSS file
- Be sure to reference your custom CSS file in your <head> tag on your web page.
- 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.