Hello, in this video, I am going to show you buttons so button, but it's something that you usually
click on, but that's not really the point of this video to be had to click on button.
Obviously, you can implement one functionality.
You want link with some JavaScript Jaquie potentially back in, for example, whatever you want.
This is the Front-End component that they put in that bootstrap provides a basic bottom will look like
this and bootstrap.
And let's say if you have a toy call button and it could have a toy also made, for example, it could
be inside a form, that's fine.
You know, you can wrap it up and, you know, do extra stuff as you want to and for it to be a booster,
but need a couple of classes.
You need BTM and then you need basically the theme class.
So to success and are most of the ideas here.
This is optional.
We're going to be using this later in the video just to be able to detect clicking by jonquils.
And that's a cool thing to know as well.
Many things that we get this button.
So it is green and it doesn't do anything like that.
You can make into a submit button.
You can actually make a Anketell into a button up, which we're going to be doing later in this video
and link that however you want.
So opt for the link to this page.
We showed you all the button stuff.
We're going to cover pretty much all of it now.
But obviously, I won't be, you know, between all these different little, you know, themes, I'll
just covered the success one and I'll use a few of that was just a variable.
But you can see all the different ways of doing it.
Another way of creating a button is to.
Make an outline button that when you put the feme, but you play better and cloying dash and then the
FIM type, so it could be primary, could be go, it could be success in this case.
And I'm going to say I known, but apart from that, it's functionality is the same refreshed when I
climb.
But and no one we hover over it goes to the primary theme color, which in this case is green for success.
And again, all of this is covered here.
OK, so the next thing I want to show you is how to create a large.
So to do a nod button or you do it could be any top button.
It could be any female employee, not airplane could be an important an anchor button or stuff.
I am going to show you it could be a button inside of like a button group, which is a separate video
which I'll be doing as well.
Whether you want or you do it here, you push button dash L.G..
So for large and that's it.
And I'll show you the other side while I'm doing Soyuzes need to get rid of this, I should only ever
have one idea that's the same.
Plus we have we don't need it.
OK, so OK, we need one more copy again.
Just because have removed something now and the other side is fine for small so the only two buttons
are technically free.
And I'll explain that in a second.
The law is slightly bigger, small is slightly smaller, but the free side is large, small and the
regular normal medium, whatever you want to call it.
OK, so the next thing that I'm going to show you is a block level button.
So, again, we can copy and paste this and we can keep the size, the size of the matter to remove
it just for the purpose of this.
And to put it bluntly, leave it just to show that the block level element and the size of small law
can be used at the same time could block level sort of is so easy as well.
They btm the block, not block
level, but a refresh.
That's what we get.
So basically the actual button will fill the entire width of its parent container.
In this case is this div which has which spans 12 columns.
So yeah.
So that's what it does.
If I was to put it, for example, which is half the size, it now only spans that much if I go back
and this will always span if parents full with you can see when you need resiling.
So you'll see Bortolotti especially when he goes down to mobile sizes, you know, instead of having
Lobatón the same line to make it easy to have one big button on a single block level button.
And what about.
OK, so next, I'm going to show you the disabled, but the work I'm gonna do is I'll get rid of Sois,
then I'll get rid of Block again.
You can use these most.
I'm going to get rid of this.
I'm actually going to try a different same color primer, just, you know, to vary it up a bit.
And I'm going to put.
Disabled, disabled, botten.
And this is what we are going to do is not beat you and we'll beat him crime rates.
We need a class of disabled as well.
And we're also going to pay our TAB index
right.
Of negative one.
I'll explain that in a second.
I'm going to play a role of Bertelli to put these roles in well, for all the other.
And so to recommend to an area disabled for, you know, for disability readers so they can detect,
you know, basically the disabled or for poor area disabled and on patrol.
Equals.
Very
true.
And they save it refreshed.
There we go.
This is not clickable like the others.
Like I said, they don't do anything because you can program them whatever you want, but they still
have the functionality anymore.
So it's a great way of having a decent bottom that have things.
If I press tab selected a swarm, press it again because the next one's the next one.
The next one.
Unless you change the tab index or double click, click, click one more time, you would think it goes
to the disable bottom, but it goes back to because no more elements.
He goes to the you are out and then you go back onto the, you know, all the other buttons anyway to
get back on the page skipped this.
So that is great as well.
The next thing I want to show you is an active button.
So let me copy and paste this one.
And the two button, I'm going to put a new theme of danger for a class of active online data, although
you can use it for the other or depending on their functionality, if they're taken to it, know no
page doesn't really need it on the autocomplete or this toggle and remote area.
Pressed again, just for disability readers, are you going to be able to say this is an active talk
about why refresh it is toggles.
If I press it, it is now sort of going to lead to colorful press.
Again, it's a dog collar, so it toggles on and off the benefit of this idea that we might be able
for doing nighttime button.
So.
Because it's already togged, it's filled, if I press it, it's no longer filled in.
There we are so that they toggle button, so in case you have some sort of feature on your website,
I can toggle on and off.
You could use this, for example.
And it's a way of showcasing to the user that it's the you know, the toggle is on or it is off.
The last thing that I really just want to show you is that we've just been doing this with buttons.
But you could apply this sort of button, you know, bootstrap component to an eight page recipe.
Well, that is more than doable.
So on this Hasheem navigate to any page what you could do on a class.
You just put BTM in between that danger, for example, whether you want a roll button link and the
other one that we can have is an input class.
Again, this is not a demo tutorial.
And I do have an estimate for a series of feel free to check that out.
If you're just showcasing that, you can apply to anything that you would conventionally sort of use
as a sort of a button feature in HTML.
You can apply your bottom component from bootstrap because there may be specific functionality from
an input type, from a tag that you want, and you can still maintain that the type is going to turn.
The tide could be submitted well.
And I was telling you to value and put a button
refresh video and they essentially like they look indistinguishable from the others, but they will
have their own specific functionality, this being an ref, this being an input tag.
So that's it.
If you have any questions, feel free to drop me a message.
There will be a link to the source code in the description along with Desco page and a few other useful
links as well.
And I look forward to seeing you in the next video.