Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Bootstrap comes with a number of built-in styles, which you can use in your site designs. There's a few particular you might find quite useful, but you've probably already noticed there's a ton of styling that's coming with Bootstrap right out of the box, and we haven't even really applied much of anything. So I'm taking a look at exercise file 03_01. Comes from your exercise files folder, just copy it into the Bootstrap folder and then open it op here inside of Sublime Text and if you right click anywhere on the screen and choose Open in Browser, you will see that this is the home page that we've been working with.
In several of the previous videos on the grids. And there's a lot of styling that's going on in this page that's just right out of the box in terms of the typography, taking a look at the treatment of the headings and the treatment of the text in the jumbotron and so on and so forth. And, as we make this page smaller you'll see that some of the text is even scaling a bit. It's really obvious if you look at the jumbotron. There we go. When we hit this, probably around 768 pixels, you'll see that the text here really scales its size quite a bit here, as part of the jumbotron, and we have some other things that are going on here as well.
I'm going to add just a couple of HTML tags here. In this video, just to show you some other styling that can happen here inside of Bootstrap with this basic typography. And as always, if you go to, getbootstrap .com, if you take a look at CSS, and if you take a look at the section on typography, this is going to describe all kinds of typography that's available to you right out of the box. Headings, body copy, emphasis, abbreviations, block quotes. All kinds of wonderful things that you can use on your site. Very very basic stuff, but so important. So what I'd like to do now, is, for my footer of this webpage down here on row four.
Where, around lines 60 or so, there's a couple of paragraphs of information here. And if you read that, you'll see that it's all legal kind of disclaimer stuff. So, one of the things that we can add to this is the small tag. And this small tag was something that was sort of frowned upon for using for many, many years, because it was said, well, it makes your text small and that should be done with CSS and with HTML. These days the small tag is frequently used to indicate that this is more like fine print. Something like, that will go in a legal agreement that would be sort of disclaimer kind of text.
Sometimes it's displayed as very small or grayed out type of thing. But again, the idea is, this is something you don't necessarily need to read unless you were really looking for the legal background or all the details about how something works. So, I think, semantically, this tag makes sense to use. So we can add the small text down here inside of our paragraph. And, of course, don't forget your slash small. We're going to put it inside of the paragraph tag. Because small is a inline element, not a block level element. So make sure that you put the inline element inside of the block level element.
Whether this is important rules of HTML. And if you just add that small tag there and save your page, you'll notice, this is what it looks like before I refresh the page. This is the same size as everything else. When I do refresh the page, you'll see that this has gone down a type size or so. Which is in response to using that small tag. So it did, in fact, make the text a little bit smaller, which is actually done through CSS. The small tag itself though is just indicating that this is sort of disclaimer kind of text, down at the bottom of the page. The other thing that we could do is, over here, for the little article here about the German Shepherd.
This is a quote from the person who owns this particular dog. So, we can add a blockquote tag, to indicate that this is a quote from somebody. So, in Sublime Text, if we go to that particular part of the page which is around line 36. We have the h4 here on 35. Thank you for helping our German Shepherd, and then, this is the quote here. So, instead of the p tag, we should probably use a block quote tag. So, I'm going to change the p to a block quote. And, Bootstrap has some nice styling that's associated with the block quote tag.
So if you'll save that and then, take a look at your webpage again, you'll see here that we've got this nice little line that shows up here next to the block quote and we have our text here underneath of that, which indicates that this is something that somebody said as opposed to, just regular old paragraph text the way that it is for these other various blocks on the page. So that's just a couple of little things that you can do with typography inside of Bootstrap. If you go to the Bootstrap Documentation site and read through it, you'll find many other little tricks that you can use inside of Bootstrap for working with typography.
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.