Join Ray Villalobos for an in-depth discussion in this video Creating basic page styles, part of Bootstrap Layouts: Responsive Single-Page Design.
- View Offline
- One of the top complaints that I hear about bootstrap websites is that they all look the same. And that's because a lot of people don't take the time to customize the way that their sites look. So we're gonna start to make our site look unique in the rest of this chapter. So the first thing I wanna do is change the default fonts that we're using for our web page. And that's because that's usually the first thing that people notice is the fact that this is all Helvetica and it's a very common font, especially if you're using the bootstrap framework.
So let's go ahead and do that. I'm gonna go to the Google fonts page. I already know which fonts I wanna pick. However, this is a great site if you want to find some interesting fonts that are free to use on your website. So, I'm gonna type in the two that I want here. I want open sans and once you find a font that you like, you hit add to collection. And then I'm also gonna ask for Roboto slab. I like to use this one for the body copy. It has a very tall x height.
And x height is the height of the letter x. A font's size is measured from the top of the ascender, so it would be the top of this d right here, to the bottom of the descender. So that would be the bottom of this p. That's what you call the font size. So fonts with a very large x height are very readable because the lowercase letters these like As and Rs right here are very tall compared to the ascenders so even at a small size, this font would be a lot more readable.
So I'm gonna add this to collection and what you wanna do once you've picked the fonts that you like. Then you wanna click on this use button right here. And then you pick the weights that you're gonna use on your page. You wanna choose as few of these as possible. When you're designing though, it's okay to pick a few extra. But, whenever you're gonna launch into production, see if you can get rid of some of these options here so that you're not loading fonts that you don't need. So I'm gonna choose 300, I have 400, and then 700 and 800.
I'll leave 600 out and in roboto slab, I'm just gonna pick all of them. So, pick thin, light, normal, and bold. And then I'm gonna scroll down. What I wanna do here then is figure out which way I want to load this into my website. This first option is for how you would load it into your html document. I like to use this option because this is how I can import it directly into my style sheet. So that way since I'm already making a call to the style sheet, this style sheet is gonna make the call to the fonts directly.
So I'm gonna select that, copy it, and then go back into my code. And I'll put this at the very top of the page. And this is just gonna import the font, but not implement them into your design. So you'll have to do that by actually using the fonts in some of the other selectors. So here what I wanna do is in the body section, I wanna ask for a font family. I'm gonna ask for roboto or roboto slab.
And if somebody doesn't have that font, then I'll tell the browser to show a sans serif font. And then I'm gonna ask for a font weight of 300. A font size of two Ms. M values are essentially the width of the letter M on any particular font. So this is more of a responsive type size. Although, you're not gonna see anything different. I'm gonna set the position of this to relative.
It's gonna be important for some of the other work that we're gonna be doing. We're going to be using a plugin called scroll spy from bootstrap. And it requires that you add this position relative to your body section. So, other than this, I also wanna change all the headlines. So I'm gonna modify all of them by putting them all with commas. If you wanna apply multiple styles, at the same time, then you can specify them like this in a comma. So h1, two, three, four, five, and six are all of the available ones.
And for headlines, I'm gonna use the font family open sans. And if somebody doesn't have that, I'll just use a sans serif font and my weight going to be a hundred. So I want it to be a lighter font on the headlines. And I'm also gonna set the margin to zero. Just clear out margins. Headlines usually have a lot of margins. So, I just clear them out so that I can do them individually as needed.
So let's go ahead and save that. Okay, so, the next thing I wanna do is just a couple of other styles that are gonna help make things look a little better. Primarily, I want to focus on some of the page styles. So, I'm gonna leave this stuff as it is right now and let's go ahead and insert them right after these. We will say page, so find anything with a class of page and add a bit of padding.
So padding is going to be 50 pixels on the top and bottom. And zero pixels to the right and left. What that's gonna do is I'm gonna save this and preview the site. So you'll notice that these different things that I'm calling pages so for example mission is a page. When I click on them, they normally would be behind this navigation, but I need to add a little bit of padding at the top and bottom of them so that they show up properly on my layout.
Otherwise they would just sort of be right now behind the navigation. And that's something that's not going to be a problem forever. But, it also creates a bit of a division between sections. I'm also gonna do a page h2 modify the headlines. And I'm gonna align these to the center. I want it to be centered. And then I'm gonna add a little bit of margin of 30 pixels. So, when I go back into my design, you can see that now these quote unquote page headlines are centered.
And I've built up enough room in them to make sure that if I click on some of these they are after my navigation. So that's gonna be a little more apparent later but that looks good already right now. Now you notice that there's a little bit of a jump occasionally between the different pages? You saw a little one right there. And that's because these images are sliding right now. And as they slide, some of them are slightly bigger than other ones. So this one, I think is one of the slightly bigger ones. If I click on this forward arrow, you can see that maybe the size of some of them changes.
And what this says is how you can control the carousel manually by parsing in different commands that are in this table. And so what we wanna do is just copy this section right here. This says okay using jquery, find any element on the page with a class of carousel. And then execute the carousel method. And then parse along some parameters. The one that we're parsing right here, as the example, is the interval. I think by default the interval is 5000 which means five seconds.
Now if you had multiple carousels on your page, that might be a problem. Because you may want to turn off the automatic sliding of all carousels or just a specific one. So the way that jquery works, if you wanna target just a specific carousel, then you would maybe use an ID. This carousel already has an ID of featured. And remember, we're using that to make sure that when we click on these arrows right here and here that the arrows understand that they're targeting the carousel that has the ID of featured.
If you want to see a different photo when this loads, just move this active class into any one of these and that will fix that issue. So now our page is looking a little bit better. You can already see that the fonts have changed the way that the site looks. It already doesn't look like a generic bootstrap website except for maybe this navigation menu is maybe a giveaway. But it's already a lot better than it used to be. Just with a few simple style changes. Even if the only thing you do on a bootstrap website is change the font, that can make a huge difference and make it look like you haven't designed it with the same style as everybody else.
- Analyzing your markup
- Creating simple column layouts
- Creating basic navigation and a simple carousel
- Modifying Bootstrap styles
- Working with branding and toggle styles
- Adding interactivity