Hello, in this bootstrap four video, we're going to cover alerts. Let's provide feedback messages to the user based on their actions. So there are a great way of let's say, telling the user if they've done something wrong, or if they've input some data, and it's correct or it's valid for them. So on a user login system on summer learning on our education platform, when the user inputs incorrect login details, we show an alert to say incorrect login details. And if let's say they sign up, and they've successfully signed up, and we sent them an email to activate their account, we let them know for an alert, there's different types of alerts with different styling that suit something gone wrong. Give them some information, or perhaps something's gone, right.

And we're going to show you all of them, implement them. They are really simple. It's just pre div and the div tag how two classes, firstly is alert. Second is alert dash D alert type. And like I said we're going to cover every single one of them. First one is alert success, put the role as alert.

And then inside here, you can simply pop your message. So I'm just gonna put strong success. And at the end, I'm just gonna put this is this is a alert. But if we just save this, go to our web browser refresh and there we go, we have our alert should actually be this is an alert and to do all the different ones format is essentially the same for lessons copy. paste them, kind of change that to info, change this to info, change this to Warning. Warning.

Final one is danger. So if we just put danger here, refresh, go to web presence. There you go, we have the four different alerts. So when someone's gone, right, given the user some information, warning them, and I keep telling them don't do this or something has gone wrong. Also, you may want to add a link inside of the alert that's more than possible. And bootstrap provides a class called alert dash link, which just provides some extra styling.

So if we just show you that, so I'm just going to copy this one. also going to per break client here. I'm just gonna put a link. And this entire thing is done enclosed into a link, and you do it as normal. So a href equals accounts gonna enclose this amount so you can see the difference. And then simply you put a class of alert link, you'll have to use this, this Oh, sorry, interrupting the class, not the href you don't have to use this class is just really suits the alert that bootstrap provides.

So if we refresh, there we go. We have our link, and it has some styling that matches the rest of the alert. So that is alerts and one last thing that you can also do with it, and that is add a dismiss button. So to do that, it's really really simple. It's gonna on get the info on giving you some info about the dismissal. Just keep Alert as it is you can use any one of these for it.

But at the start you just put a button tag. This button tag has a type of button class is close data dash, this Miss Daisy, this Miss is alert to the area. Label. statistic close. One thing I forgot you also got to add an extra class. A few extra classes actually and they are alert this Missy bow, fade and in now inside the button it's Let's do the span tag.

And the span tag, we're going to have area dash hidden equals true. Just set this to ampersand times semi colon. Then finally add a nervous span classes, the last one I promise inside a class of SSR dash only. So this is just for screen readers. So it's good practice to do stuff like this just for screen readers. So save that.

Refresh. There you go, we have our alert, but the difference is gone x right. And if we click that, as you can see, it fades away. That's a great way I'll provide an alert to the user because the more you provide several alerts, and the user can just dismiss them when they have dealt with instead of cluttering up your website. If you have any questions, feel free to post them on our education platform. So no learning Dakota UK for slash questions dot php.

There will be a link in the description to that website. Plus I'll be another link in the description to the source code from this video so if you have any issues, check that out. And as usual, thanks for watching and I hope you have a great day.