Hello, in this video we are going to cover the different button types that bootstrap offers. It provides a very various buttons with loads of CSS styling applied to it, and they look really, really cool and they actually work really well and you probably use these a lot. So to use a button, really simply just do button tag. This button tag is just built into HTML, but it's the classes that you add, which really makes it stand out. So I'm going to put both turn and then put class two classes btn, which is a button, then btn dash, the type of style you want. There are six pre defined styles so I'm just gonna put primary first but primary, save that.

Now if I just refresh thinking got a button right yet obviously didn't do anything you would need to cope during maybe JavaScript Ajax or adding some sort of onClick method, it's going to copy and paste it in our I'm going to do the increases so we hit the law extra last when so so it's on a separate line. also going to do is add a new line. So there's a bit of a gap is so it looks a lot better. So I'm going to copy and paste this out they have six instances of these and show you all the different style for the secondary. There is success but pretty much a button for what ever part of your website your appointment button on so where danger button Since a warning or you're about to complete something, you could have that success. But turn awesome for continued danger.

And you'll see the different styles in a second, the final one is link. Then save the boy, refresh the browser, we got our six different buttons. So we've got primary secondary success, one danger and link link has no background to it at all. So those are the different button styles. At the moment, we've just use the button tag. It is created mainly for the button tag, but you could for example, use a h ref tag.

And I'm just gonna put dots sono systems coda, UK should just do roll. But we need a class. For this, we're gonna put btn and btn primary. Remember what we put in here? I was gonna put, but a href. Save that.

And there you go. That didn't quite work the way we wanted it. Let's have a look what went wrong. didn't put a dash just put a separate tag, refresh, there we go, we've got our button a href as well obviously it's taken us to website. So if we just go back, though this works with stuff like anchor tags, input tags as well because sometimes you'll want to use them instead of the button tag. The styling may look a little different depending on what browser you're on.

So if you can use the button tag, primarily use that one Beyond the basic styling, you can also do outline styling, so that you don't get any of your buttons. And then to get all of them I'm actually going to do break line, just so separates the code out. And I mean visually it should say, and instead of pouring btn dash primary, you put btn dash primary dash outline. And I think you guessed if you want an outline button for secondary, you do the same thing for success, warning, danger and link. So if we go and refresh our browser, actually add to these refresh. There we go.

We've got our out line button and they look really good as well. So depending on what style website you're looking for, okay, porn, all there. got rid of the car from there, so the styling didn't get applied. So if you refresh, we've got primary, secondary success, danger, warning, danger and link. So that's how you use the outline buttons. You can also set the size of the buttons at the moment they have a default size, obviously, you can add some CSS, change the width and the height but there's some default classes for sizes.

And for that, I'm just going to choose it's going to get the two right here. And I'm gonna change this to large. change this to more and for this doesn't really matter whether you have outline or not outline so I want to get rid of this so you can see they doesn't matter to change the size of btn dash LG for large I think you guessed it btn dash SM for small. So if we just refresh our browser, there you go. We have our two buttons. We have a large and we have a small button right here.

So it's really that simple to use them, like so. There are a bunch of other sizes, we're actually not a bunch. There's one other size which is the block size on just demonstrate that to do most of them too, and great chlorine to have them actually. So instead of btn dash FM or dash, LG, you put btn dash block. Call this block, refresh, and I think c span the entire width of its parent element, but there's no reason why you can't combine it with the btn dash small and btn dash large either btn dash SM if you admit btn dash sois very small or large, you're just default to the default size. So there you go, it's a lot smaller.

And obviously if you were to put algae as well, it's a lot larger. So beyond that, we can have a look at the active states. So first of all, as usual, just copy and paste these brake lines. And what we're going to do copy and paste and let's see what we got. We got a secondary btn block btn get rid of block but you can use the with block on this gonna keep the button Small, that's all. And I'm going to put primary call is active, save this.

At the moment, it's not active. I'm just going to show you what we're trying to get. When I click it, it goes on to an active state. And you can have that by default. So all you have to do is put active and the class. All of this is built in which I love about bootstrap enough to start coding any CSS refresh.

And it's got the active state by default. It's really that simple. There's also a disabled state. So if we just copy and paste this, put disabled. Disabled actually should be a lowercase D disabled. Save this bad boy.

Actually, no, it's not meant to be like that. It's meant to have the Element Attribute just empty. Don't ask Anything to just put disabled refresh, scroll down, our button is now disabled. And when we hover over it, it shows this little cross icon saying you can't use it. If, however, you're actually using a href like this, you can't make it disabled by putting an attribute, you have to add a class called disabled. So you put disabled refresh.

And there we go. The H ref tag is also now this state is also sorry, now disabled. So that's how to use buttons within bootstrap score a lot to take in. So there'll be a link in the description to all of this source code. So check that out. If you have any questions, feel free to post them on sonar learning code at UK for slash question dot php.

There'll be a link in the description to that as well. Please rate, comment and subscribe. It doesn't really help keep the content fresh. Plus also by doing that, it helps grow the channel. And inevitably, we can provide more content on a regular basis. And as usual, thank you for watching, and I hope you have a great day.