Hello, in this bootstrap four video, we're going to cover background variants. And these are classes that allow you to change the color of the background and the border of your card really simple to use. So to show you how to actually use it, all you have to do is go to your div that is the outermost container for your card to another class of card and add an extra class. And we'll show you all of the different ones. So card dash primary first one, so these styles are very similar to what you will have used with buttons and other elements inside bootstrap. So if you're familiar with the different styles for bootstrap your flow writer Tom here, but let's I will show you all the different ones anyway.
Let's go back refresh and they go D vary, I mean, the background and the border color have changed for our code. I think that this black color doesn't look very good. So what you can do Just use the built in bootstrap, called dash inverse class, which just invert the color of the text and it just makes it look a little bit better. But if you don't want it like that, you can emit this and set your own color if you want to look so we want to show you all the different cards. So let's just copy and paste this diff. Next one we're going to show you is called success.
The third one is called dash info. Fourth one called dash warning. And the final one is called dash danger. So, let's just changed here. Now we're ready to refresh our browser, refresh. And there you go, we have four, five different cards.
And as you can see, the color is different for every single one and lock that they match the styles that you will have used for, say the bottom four examples cuz we got a button right here, we just go to one of the button got button dash success. If we go to the success card, it has a similar color, hence what you can't see. So that's the reason you would want a success button on a success card eugenic on sale, or you might want to that's your choice, but actually, I want you to as an extra task, just messing around with the different styles for the button and see what you can do. If you have any questions, feel free to post them on our education platform sonar learning Dakota, UK for slash question, PHP, there'll be a link in the description to the plus there'll be another link in the description to the source code from this video and All the source code from every single video in this series, please rate, comment and subscribe.
And as usual, thanks for watching and I hope you have a great day.