7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 18Length: 1.9 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.2 Buttons and Icons

Buttons and icons are two of the most common elements in web pages. In this lesson I'll show how Bootstrap works with them.

3.2 Buttons and Icons

Hey, welcome back. In the previous lesson, you saw the powerful grid system. Now I want to show you how to use the available button and icon styles. Bootstrap offers a lot of options for the buttons, from button styles to button sizes. So let me show you how you would use buttons. First, you would start with an HTML element. Either it's a button or an anchor tag. So I'm just gonna use an anchor tag. And then you would add the class of btn to it. For text, I'm gonna say a simple button. Now if you refresh, you would just have a link, right? No styling whatsoever. And actually let me just add a container here. So the content I'm writing is aligned properly. Now you need to add the class of btn-default. And this will create this, it's a simple button. On top of these, you can have different colors. So I'm just gonna copy this a bunch of times and show you each one. So the first one is btn-primary, which looks like this, the blue button. next, you can have a btn-success, which is the green button. Then you have a btn-info, which is another blue button, but it's a different kind of blue. Next, you have a btn-warning, which is orange, and then you would have a btn-danger, which is red. Now if for some reason, you don't want your button to look like a button you can have a special class, which is btn-link. And this will look like a very simple link, but it will align perfectly with any other button. So an example that I can think of here is to have like, let's do this. A with a class of btn and btn-primary plus A with a class of btn and btn-link. Now the first button, let's say something like buy it now. And the second, and second button would say get free trial. Right, so you can combine these two to create, like, a call to action area. While the primary button gets all the attention, but you're also offering an alternative like get a free trial. For buttons, you have a few different classes. Let's do another anchor tag, with a class of btn, and let's do btn-info because I like that blue color, and then four sizes. So this is the default one. It can a btn-lg, which is a large button. I'll just copy this. And then you can have a btn-sm, which is the smaller button. And let me just do the default size here. [BLANK_AUDIO] So you can see them. And then lastly, it can have an access button or extra small. So these are the four button sizes. Now if you want, you can create a block level element out of any button, which means it will span the full width of its parent. And to do that, you need to add btn-block. And this will make this extra small button span the entire width of its parent, and of course, go on a separate line. Okay, now in, in these examples, I used the button class on anchor tags alone. But you can use either an anchor tag or a button. So button type button, for example, or type submit. It's really up to you. And then class btn and btn-default. All right. And it's gonna look exactly the same. Or you can actually use it on a input type button or type submit. Let's do a type submit since this is the most common one. Class again, btn and btn-primary, let's say. And then value is gonna be an input. And there it is. And that's basically it for buttons. Now, the second part of this lesson refers to icons. In the previous versions of Bootstrap, icons were represented through images. And that was not good because images won't scale properly on the retina devices or high resolution screens, they will not look crisp. So in version three, Bootstrap replaced the image icons with an icon font. It's the Glyphicon Halflings font. You can see a full list by going to the getbootstrap.com website. And under Components, you'll find Glyphicons, and there's a full list of icons there, but I'm just gonna show you only a few icons and how to use them. So let's do another hr here, and I'm gonna start with this span with a class of glyphicon. And glyphicon, let's do search. This is a search icon. And that's it. You don't have to write anymore code. And now you have a search icon, which you can scale, which you can color, you can do pretty much anything you want with it, including adding it to a button, for example. So you can have an anchor tag, with a class of btn and btn-default. Let's start with the default class, of course. And then, I will do a span, or a class of glyphicon and glyphicon-search. Save. And now I have a search button. Now if you change the button style, the color of the icon will also change, so Bootstrap is very smart about this. If you also add a new size to the button, that icon will scale as well. And if you don't want to use the Bootstrap classes for different sizes, you can actually create various sizes yourself by manipulating the CSS. So if you do on the first icon here, you do style font-size, let's do 5 ems and refresh. You get a much bigger icon. Also, if we change the color to red, it's now red. And you can add gradients, you can add shadows, basically, whatever you can do with text, you can do with these icons. Now just a quick notice here, I'm using inline styling here. Not a good practice but I just wanted to demonstrate something. So if you are going to use your own styles to change the appearance of these icons, make sure you use them in a proper CSS file. And that's it basically these two are some components that are really easy to use. But very common at the same time. Another common element is the form element. You can find this in almost any website nowadays. More about forms in the next lesson.

Back to the top