Hello, in this bootstrap four video, we're going to cover the advanced features of list groups. So the first feature we're going to look at is linked items, which allow you to select a certain item, make it active. So it essentially looks like the user has clicked on it and selected the item. So the user know what they're on. To do this was gonna copy and paste this, paste it down here, and to make one active, so I'm gonna make property free activity simply for a class of active refresh, and there we go. Got one active, it's that simple.

The next feature we're gonna show you in button items. And to do this, I'm gonna copy and paste again. I'm just going to change this to a div changes to a daisy chain. To a div. And what we're going to do is change this to button, need a type of button, copy, paste this, everything else in the opening tag can remain the same because we still need the classes. We just need to change this to button.

Save that refresh. If we scroll down, we can hover over these and it's essentially emulating a clickable item. And we haven't had added any functionality for critical items. But that's dependent on your website mode thinking, why do you want to do this? The reason is, because some of those items might be clickable. For example.

In our for sonar learning, we actually use a combination of labels which are right here. The regular list group, the highlighted attempt the link lists and the button items. So what you can do, you can go on to your like profile, and then select a particular part of your profile by clicking it, and it reloads the page. But when he reloads it, the one that you collect is now selected. So that's an example of where you can use it if you want to check that out. Don't so no learning Dakota, UK, if you don't already have an account, it's free to create one just create one does the log a few posts, post a few things or just do something within the community in questions and answers and then go to your profile section.

And you can check that out in well live. The next thing we're going to show you actually before I do anything else, we're going to add a common cause there'll be a link to the source code just so you know what is going on. So linked items Alright, we're gonna copy and paste this. And change this to disabled item to the next property is gonna be disabled, you can do it for the list item as well, or the button inside the div anyone can do. So for example, we're going to make this one disabled, save that refresh, scroll down. As you can see, when we hover over it, it shows us the no entry plus is grayed out, because maybe the user is not allowed to access this particular part of our website.

And the final thing we are going to cover is copy and paste this is custom content. So let's get rid of that. So if we refreshed at the moment, all we have is just some regular text in there. But what if you want to add a title you want to add some text in there. bootstrap easily allows you to do that. So if we want to add a header, image h4 and the header needs to have a class of lifted dash group, dash item dash heading, and inside here we'll just put our heading heading one.

Next, we're going to put some text so like the body and for this you need a class of Lyft dash group, dash altom dash text. And inside here, it's gonna go to web browser, type in random graph general Do you use this website a lot or random paragraph generated a lot? Yeah, that looks a okay. So let's copy that. paste that in. And what we'll do with this, copy this and paste it into every single item changes to Heading Two.

She might be quick if I copy it this way. Let's see how well this works. Oh yeah, that worked exactly the way we wanted. So let's just change this to heading three. Heading for longbow changing the body because we can show you what's happening without changing the body refresh. And as you can see, they look significantly different from the regular list groups.

We have title in there we have text in there, you can add images you can add essentially what you want if you have any questions Feel free to post them on sonar learning Dakota UK for slash question dot php. There'll be a link in the description to that. It will not be a link in the description to source code from this video. Please rate, comment and subscribe as it really does help and plus it also lets us know what you like and what you don't like so we can improve our future videos. And the usual Thank you for watching and I hope you have a good day.