Hello, in this video, I am going to show you the toast component in Bootstrap, no toast isn't in
bootstrap, something that you can eat, unfortunately, but or a toast component is kind of like a
notification on the website itself.
So, you know how you might get some sort of notification, like on your OS, on your phone, you might
get something on the website, maybe something completed.
Maybe you want to let the user that they've got a message.
You can do that with a toast component.
This is what it is.
Will provide a link to the Bootstrap API guide in the description.
So you can actually, you know, check out all the all the different features.
I going to show you how to implement a basic one.
And first of all, what we are going to do is add a button and the button is what is going to trigger
the toast notification class ETN beauteous there.
Feel free to check on my video on buttons for more information about, well, buttons and say UNCLICK
is going to call a method called Toastie, which we will implement in JavaScript shortly and closed
down.
So you get a bit more room to play with and I'm going to make the button, say, Tofte me up.
OK, so now what we're going to do up there and the wired up now will then do is actually implement
toast.
So you need a device and this will have a class of toast.
Keep really wanted to now add to this morning idea because epic toast and this is what we will be using
to refer to it in the in the JavaScript code.
When I say roll equals alert area dash because of assertive.
Then we're going to have an area dash atomic and there might be a sequel to True and we're going to
have some styling as well on this one show, you all look like without the style and basically regarding
position, there's more information about that on the bootstrap page.
So you can check that up.
I will show you that as well.
I want to show you what it looks like without it.
The first of all.
Well, the two main components within a toast, you have the header, which is signified by this, and
you also have a toast body.
And let me copy and paste this set of toasted toast body.
Realistically, there's no limitation on what you can put in the images.
You can put anything really probably want to keep it simple and text like the title in here and, you
know, just some text in the body explaining what this.
Toast is about so strong, again, this is just total formating, and you can do it however you want.
I'm going to say class because I am all that sort of modern boy to auto just looks nice on a beach.
Steptoe's you might say something like if you're a social media website, might say Bob has commented
on this post for example, and then I'd say old.
I want some toast and we're going to have a bottom.
This is going to be the bottom in the top, right?
I loved it to close that toast and the toast will automatically disappear after a little bit of time
anyway.
So we will disappear.
You can make it stay there forever.
There's more information about down the bootstrap page, so feel free to check that out.
And the type of button we're going to have a class per month and margin left to where I've just checked
out.
It looks pretty good.
It meant to be inside the class and we want it to be close.
So we have the X.
The stolen data does dismiss people as toast because that's what it is essentially dismissing.
And we also need a area that's able to close.
Now, we're going to do it here.
We're going to have a fun area.
Dash hidden equals true.
I'm going to put some time semicolon.
OK, so I was going to put some, you know, somebody in here.
So hello world.
I am eating toast.
So if I save that, go back, refresh.
This does nothing at the moment because we haven't implemented any JavaScript.
Let's go down here after we've included all the libraries.
Just open up some script tags if you have a separate jobs file for this particular page.
Feel free to put in there because my example is very simple.
I'm going to put all on the same page.
OK, so what we want to do is, first of all, create an option array and this is basically going to
have some options.
Some say animation just looks the nice with animation, delay in files.
And so two seconds is measured in milliseconds and you can check out all the options if we scroll down
to here.
So the really only three options or to hide is what I was talking about.
So if you set that to folks, it will hide after X amount of time, which is what the delay property
represents.
OK, so if you want to add more in this case, one more put a comma and then add the next one is basically,
you know, these bases are required.
I just prefer the look of them.
So let me kolon form months ago about Taino fans.
Jobs were pretty loose with it.
We should still pretend it's a good habit.
Now I'm going to function sheepfold Toastie and this toasties refers to this unclick right unclick.
This will get triggered in here.
First of all, we need to get the Hastey amount element.
You know that the toast that does not appear yet to get that you have to document doget element by day.
And the idea is.
This right here, I have a copy that paste it here.
Now we've got the element.
You can't actually show the toast until you've actually created a bootstrap toast component out of this
element.
So what we're doing involves toast element equals new boot structure, toast, and you need to specify
toast, take them out element.
And we specify this options as well.
Next problem, there is a toast element.
So this one right here, this is now a bootstrap component dot show and the three different methods.
If we go here, you can see them right here.
So the show hide and dispose.
If I reload, click it.
We get the toast.
And after I think after two seconds it disappears.
But I can make it disappear by clicking the F.
That's why it looks like it's pretty simple stuff.
It doesn't go away for the click off it.
Now it goes way up second, but you can make it go away if you click away from me again, that's all
available here.
But this shows up literally just below waithe being traded from me in this case button.
Usually you have them like pop up in the top right or in the bottom right or something like that.
Let's put it in the top right.
That's the story line that I was talking about that I didn't implement.
I just wanted to show you what it looks like without any styling.
You feel free to obstruct this out into some style tags or into access file.
But again, simple, only the key.
I'm going to put position absolute gold on top for hour instead of a semicolon.
Top 20 pixels.
I'll put zero for now.
Show you what that looks like.
Right.
Zero go back refreshed.
Dabwido is in the top right.
Doesn't look very good just being there with that tiny gap on the the edges of the presence of the top
and the right of it.
So on top.
Right, 20 pixels and 20 people.
I just find this looks really cool.
Click it.
There we go.
We got to toss notifications.
You can stack them as well.
That's part of the API go.
It should be here somewhere.
There we go.
Placement stacking.
Feel free to.
You know, have a look at that, an experiment, so that's it, really simple stuff.
If you have any questions, feel free to pop me a message.
And as usual, I look forward to seeing you in the next video.