Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
So in this next video, I want to talk a bit about custom styling with CSS. And there's a number of ways that we can do custom styling here with CSS. The very first way I want to talk about is, I just want to write a custom style for my footer of my webpage. So, a few videos back, we put in some small tags, to make the text a little bit smaller, and to indicate semantically that this is fine print. But it's really not that attractive of a footer. And, so I'd like to write a style for that. There is no styling for a footer per say inside of Bootstrap so I'm winding up writing a custom style from scratch, and that's very, very doable.
Very simple to do from bootstrap because you do just like you would any other web site. So I have open right now 03_08.html, and this is the HTML document I'm starting with for this video. You'll notice here up at the top of the file sheet, that we have a link right now to bootstrap.min.css. And, as I mentioned in an earlier video, this is all of Bootstrap's default styling that goes inside of that particular style sheet. But, if we want to write our own custom styles, we absolutely should make our own separate style sheet for that.
And the purpose of doing that, is so that we can separate out our own styles from bootstrap styles. So if we ever upgrade bootstrap, then we are able to separate out those custom styles from that. And preserve those. Because the moment that we upgrade bootstrap or we move to a new style sheet from bootstrap All of this styling and any tweaks that we made are completely wiped out. So it's better to use the power of the big C. The C in CSS stands for cascade. So let's use that with a separate style sheet. So I'm going to start by making that separate style sheet.
Actually we created that style sheet a little bit earlier here. If you look into your CSS folder inside of your bootstrap folder, you should have a blank document here called custom.CSS. But we have it actually called custom.CSS, inside of our html document. Let's go ahead and do that right now. We're going to add here, just after the linked to Bootstrap.min.css online eight. We're going to add a link to CSS/custom.css rel of stylesheet.
Okay, so now that these, these documents are linked together, I'm going to save my HTML. There is no styling in that style sheet so nothing's changed with the way that webpage looks. The first thing I'd like to do is style that footer. So I'm just going to go ahead and write myself a little style, just like I would for anything else. I'm going to use my footer html tag to do this. And I'm going to put in some styles here. Let's say, some padding of 2ems and zero. Remember, when you're working in responsive design, it's probably best to work with ems as a relative unit of measure or percentages.
And that's so that things are going to scale, with the various media queries, and so forth. Let's also give it a bit of margin. And let's say that's three ems, zero. Remember, of course, that that is. The first number refers to the top and bottom. And the second number refers to the left and right. So we're adding padding and margin by quite a bit on the top and bottom of the footer. And nothing on the left and the right. And let's also give this a nice border on the top of, let's say, one pixel solid, ddd.
Which seems to be a favorite color grey in Bootstrap. We'll also make our text a nice neutral gray, say 999. And let's align that text, make it centered on the page. So if you just go ahead and save that style. And we go ahead and refresh our webpage here. There we go, we have lovely footer styling. Isn't that great? That is demonstration number one. Just like you have always written CSS since you started developing web pages, you can just go and write a style inside of your custom style sheet, just the way you would with any other system.
The other thing you might want to do, though, is you might want to change some of the styling for styles that are already available to you in bootstrap. So, if you take a look at the glyphicons that are right here, these are a lovely shade of black. Why? Because that's the color of text that we have going on here, inside of our bootstrap document. What if I wanted those glyphicons to be a different color? Well that's actually quite easy to do. If you take a look at our HTML here, and we're going to scroll on down here to, let's say, line 34. Here's one of the first glyphicons that we have.
We have two classes in effect here, which is glyphicon, and glyphicon-pushpin. So the class of glyphicon will affect all of the glyphicons on the page and 'glyphicon-pushpin' is specific to that, glyphicon in particular. So, what I would try to do is I would say I want to change the color of the glyphicons on the page. To maybe a lovely tan color. So I can add that style here in my custom style sheet, glyphicon, and I can give this a color of, let's say, cdae51. And just by doing that and refreshing my webpage There my glyphicons all have this lovely tan color.
All of them at the same time. What if I wanted to have two of them be tan and two of them be chocolate brown? Let's say I'm just picking up the colors here from this logo up here on the upper left corner of the page. Well I could do that too. All I need to do here is just write another style, say dot glyphicon, hyphen, in this case let's say it's the push pin and glyphicon-heart and let's say for those too we would have a color of 3F2B22 which is the chocolate brown.
And if you go ahead and save that, refresh the page. There we go. Now, we have alternating colors for our glyphicons. The other cool thing about those glyphicons, of course, is that you can enlarge them. These are the sizes since they're inside of h4, those glyphicons are taking on the size of an h4, but there are vector graphics, and they do scale. If I was to increase the text size here on the page, you'll see that the glyphicons are going to grow in size directly in proportion to the text size on the page. You see how nicely that happens? And we got no unsightly jaggies associated with those pictures.
The way we would with a raster based graphic, such as we used to have in Bootstrap. So, aren't those cool? Those little glyphicons are just handy and so lovely. Alright the next thing I'd like to do is I'd like to address this image over here on the right side of the page. So it's a lovely image and things are looking great. But, one of the issues that it has is, all of this text is smashed right in to the edge of this picture. And, so, what I'd like to do is get a little bit more breathing room between the picture and this text.
And, as you know, we applied a class of pull-right to that image. Several videos ago. Which floats it to the right to the way it is right now. But what I'd like for it to do, is, I'd also like it to give a little bit of space around it. So I need a bit of margin on that picture. So, what is the selector that I need to do that? Well, once again, if you take a look at your HTML for that particular picture, that is up here. So, on line 29, here's the image of the cockatiel with a class of pull right. One of the thing's that's missing from this is that image-responsive.
So I'm going to go ahead and add that. And if I save that and I refresh my webpage, now that image will scale a bit as the page gets smaller. So maybe images that are pulled right and also have that class of image-responsive on it. Maybe those I would like to have a little bit more margin on those. Because if it's got class of image-responsive and a pull right. I'm probably talking about an image. And I'll probably want a margin on that no matter what, so how can I write a style for that? Well, that's also doable here, I can just say,.
pull-right.img-responsive and notice that, there is no space. Be very very clear there is no space between. pullright and. img-responsive this is all one word. The reason that that is so important is that both of these classes are applied to the same image element, and so if you put a space in between them, we're saying for all classes of image responsive inside of some other HTML tag with a class of pull-right. In this case, we're saying a HTML tag that has classes of pull right and img-responsive.
So, it's very, very important no spaces. So, here we could say something like a margin, of 0 0 1em 1em. Now remember when you see four numbers like that inside of this it's TRBL, Top, Right, Bottom, and Left. If you remember TRBL you'll stay out of trouble. Ooh, I wish I could claim credit for that one, but I can't. If you go ahead and save your CSS and if you refresh your web page, you should now see your text move away from your image a little bit.
You can add a little bit more space, if you want, but I think that looks pretty good. The last thing I'd like to style on this page are these buttons down here at the bottom. They are a lovely shade of light blue but, you know, that has nothing to do with my color scheme here whatsoever. So, I would like to change the way these are behaving. And, we know that, here inside of my html, that those buttons are getting that blue color. For say here on line 51 it's coming from button-info as you saw earlier as we were changing classes to button-success or button-warning or button-danger, the colors of the button were changing.
So we know that that button-info is where that color is coming from. So we can write a style to change that and so we can say something like. btn-info, and we can say something line a background-color of cd ae 51, and we can say a border-color of 3F2B22, which is the color we used earlier. And, we could also give this a color of white, because we won't be able to read the buttons otherwise.
So if you save that, and you refresh the page here in your browser. Hey, look, we have lovely buttons that match the page. But, hey, when you bounced over 'em, they're still blue. So, what's going on there, and where does that style come from. Well on occassion your not going to be able to guess at what these classes are and where they come from in boot strap and your going to have to track them down using a tool like fire bug so if you go the fire bug website. I'm happening to use FireFox here today. And Firebug is one of those indispensable developer tools which you can get at www.getfirebug.com.
And you should be able to just hit the Install Firebug button up here. Go ahead and download the recommended version, and say Add to Firefox. And say Install. And, in theory, firebug's already here and ready to go which is great. If you're using Chrome, you can use the developer tools console which comes with Chrome. Does the same kind of thing. I just happen to be a fan of Firebug. So if you go and click on Firebug which will now appear in the upper right corner of your web browser You will be able to then track down these buttons inside of Fire Bug.
The best way to do that is simply to hover your mouse over these lines of code here. And this is going to point you to the right area of the webpage. So it's probably in this row. And it's probably in the article. And it's probably in this row, and maybe, here, inside of the paragraph. There we go, there's our button. And here, as we roll over the button. You're going to see an indication of the style over here on the right side of the firebug console, and you'll see there there's button-info focus and active and open drop down toggle button info and so fourth.
There's all the styling that we need here. And that is controlling the color of the button. So, what we're going to need to do is we need to get that information and then plug in to our code. So, written down with that style is, so we can just go ahead and type it in or if you are in your exercise files. In chapter three, in video number eight, there is a little file here called custom.CSS that'll give you the styling that we want here. So I've changed these colors to match our site better.
I'm just going to go ahead and copy that code, and I'm going to paste that on into my custom.CSS. And save that. And now when I refresh the page, there we go. We have lovely read more buttons that do in fact match the page when we roll our mouse over them. Isn't that awesome? And to close Firebug, if you just click the red button on the far right here, then Firebug will go away again. So, styling custom styles inside of Bootstrap It's going to take you a few little tricks to do that. You can either write your own styles right out of the box using CSS that you've known and loved since the beginning of web development, or you can build on styles that are already there inside of Bootstrap.
And you can also track things down in Firebug and you can restyle them in your custom style sheet. Depends on the situation which one is right for you.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.