From the course: Bootstrap 3 Essential Training

Working with Bootstrap buttons - Bootstrap Tutorial

From the course: Bootstrap 3 Essential Training

Start my 1-month free trial

Working with Bootstrap buttons

“

- In this chapter, I'm going to work with Bootstrap's non-typography CSS styles. We'll start by taking a look at Bootstrap buttons. Now there's three different types of elements that can be made to look like buttons: links; of course, the button tag; as well as input fields. To create a button, you simply add the class of btn, and technically, you are supposed to also add a contextual color. Let's go ahead and do that. We can say a and then class, btn. And you're supposed to also say btn-default. And this is what a default button looks like right here. And if you add that same class to these other buttons, you will see that they all look exactly the same. So if we say button and then we use the same class, then you can see that, that button looks the same. And it also works with input fields. So either a normal input field, or an input field with a type of submit. And links are used when you want to create an element that will navigate somewhere when it is clicked on. Although you can use button classes on anchor or button elements, only button elements are going to work within nav and navbar components. When you want to use an anchor tag to trigger in-page functionality instead of navigating to another page, you're supposed to give them a role of button like this. But if that's the case, you should probably just use a button instead. Now different contextual classes are available for different buttons. They show up in different colors but are also meant to convey some meaning. So for example, we have the class that I showed you before, so we can say btn and btn-default here, and let's go ahead and copy that and add it to all these other ones right here. And instead of default, we can use the names here, Primary, which looks blue; Success, which looks green; Info, which is going to look sort of light blue or cyan; and then Warning, and that one is going to look orange; as well as Danger, which will look red. Buttons also come in four sizes: the default, as well as a large version, a small and an extra small version. So let's go ahead and try those. Let's go ahead and use this class of btn-default here, and we'll add it to all of these. And then we're going to add the different subclasses. So this first one is going to be the default. And if we say btn-lg, it's going to show you a larger version of that button. If we say btn-sm, it'll be a smaller version. And btn-xs is the extra small version of that. You can also create a button that spans the full width of it's parent using btn-block. So if we add btn-block here, you'll see that this button goes the full width of the parent. To indicate that a button is active, you can add an active class to a button. It's going to appear pressed. So let's go ahead and copy this one again. So you say btn btn-default, and then you can add the active class right here. You can see that it looks like it's pushed down over here. Showing a disabled state is a bit different depending on the type of button you are using. To show that a button is disabled, use the disabled="disabled" attribute. So let's go ahead and add again the same class of btn btn-default. And we'll go ahead and do it to both of these, the button, as well as this link right here. So they should both show up like buttons. And if you are choosing the button to be disabled you would say disabled="disabled" and that shows the button of course looking disabled. It gives you this nice sort of pointer change right here, but if you want to do that with an anchor tag, you simply add the disabled class to the button. So you can say a and then all the regular classes, and then disabled. And that will do the same thing. Now remember that if the link isn't going to another page, you should add the role="button" here. That's a usability best practice to make sure that you pass that information to screen readers for the disabled. Bootstrap's default buttons look great and are almost perfect. But anytime I use contextual colors, I usually try to customize their colors with CSS.

Contents