From the course: Bootstrap 3 Essential Training

Styling headings and body copy - Bootstrap Tutorial

From the course: Bootstrap 3 Essential Training

Start my 1-month free trial

Styling headings and body copy

“

- In this chapter, I'm going to go over some of the basic styles that come with the Bootstrap framework and I'm also going to take the time to work with some unique and super useful utility classes that you might not be aware of. I have a very simple sample page here with all the headlines as you can see. Now Bootstrap uses Helvetica Neue if it's available and then tries to look for Helvetica, Arial, and if nothing else is available, it uses the default CSS sans-serif font. Whatever might be there for your machine. Now, of course, you have the standard styles for headlines level one through level six, as you can see, but what you might not be aware of is that you can also use the classes h1 through h6 and that will actually emulate a headline of that level. You can very easily say something like div, with a class of "h1" and I'll do a Headline 1 and if I save that, you'll see that it looks pretty much like the Headline Level 1. Actually, it uses the same style. You can use that to emulate that same style somewhere else or if you want to, for example, have a certain word look like the same font as your headline, you can do that by adding "span" class here, and let's go ahead and put this word in there, and I'll do a class of "h1". Now that word looks to be the same size and the same font as our headline. So you can use it not just for emulating a headline somewhere else, but also to create an inline headline element, which you wouldn't be able to do with an "h1" tag. You can also create secondary text inside a headline or inside body copy using the small tag. You've probably done this. You can use, say, a small tag here and then put in secondary text here. But Bootstrap actually creates a style for that text. You can see that it not only is smaller, but also has slightly lighter text. That's definitely something that you can target with CSS later on. Now, in the same way that you have the "h1" through "h6" classes, you can also have a small class to use within your inline elements. In here you can say, "span small" and then put a word in there, and it behaves in a similar fashion making that piece of text small. You can see that word is right here. It looks a little bit smaller than some of the other text. Now within body copy, the global defont size is 14 pixels, with a line height of about 1.428 and paragraphs also get a bottom margin of half their computed height, which is 10 pixels by default. You can also check this out by doing inspect element and if you've got Google Chrome, you'll be able to see what those different parameters are. So you can see margin of 10 pixels is right here, and you can dig through some of those other defaults. Here's the 14 pixel size plus the line height of 1.4 etcetera, and you can see, as I mentioned before, the actual margin that gets added at the bottom of every paragraph right here. There's also a special style that you can apply called "lead". So if we grab this second paragraph, let's go ahead and undo some of these other styles here. I'm just going to get rid of this and get rid of our spans here. I'm going to save this and if I want to I can grab this second piece of text and apply a lead style to it. So I can say, "p class = lead" and that will try to make this piece of text stand out a little bit from the rest of the text. That can be useful when you're writing some content, to sort of have a paragraph that stands out. Remember this is something that you can also style with CSS to make it look completely different. Just having that built-in class helps you a little bit. So I'm sure you already knew about default headline and paragraph styles, but Bootstrap offers all types of little utility classes. Like substitutes for things like headlines, the lead class and a lot of other ones that we'll cover throughout this chapter. Those types of things are going to help you create sites a little bit quicker.

Contents