Advanced List Groups

6 minutes
Share the link to this page
You need to have access to the item to view this lesson.
One-time Fee
List Price:  $139.99
You save:  $40
List Price:  €131.19
You save:  €37.48
List Price:  £112.24
You save:  £32.07
List Price:  CA$192.60
You save:  CA$55.03
List Price:  A$217.25
You save:  A$62.07
List Price:  S$190.37
You save:  S$54.39
List Price:  HK$1,096.25
You save:  HK$313.23
CHF 90.89
List Price:  CHF 127.26
You save:  CHF 36.36
NOK kr1,101.16
List Price:  NOK kr1,541.68
You save:  NOK kr440.51
DKK kr699.21
List Price:  DKK kr978.92
You save:  DKK kr279.71
List Price:  NZ$236.19
You save:  NZ$67.48
List Price:  د.إ514.11
You save:  د.إ146.90
List Price:  ৳15,319.96
You save:  ৳4,377.44
List Price:  ₹11,694.97
You save:  ₹3,341.66
List Price:  RM669.64
You save:  RM191.34
List Price:  ₦181,567.03
You save:  ₦51,880
List Price:  ₨38,857.05
You save:  ₨11,102.81
List Price:  ฿5,147.32
You save:  ฿1,470.77
List Price:  ₺4,550.80
You save:  ₺1,300.32
List Price:  B$732.62
You save:  B$209.33
List Price:  R2,665.20
You save:  R761.54
List Price:  Лв256.41
You save:  Лв73.26
List Price:  ₩192,455.38
You save:  ₩54,991.18
List Price:  ₪530.55
You save:  ₪151.59
List Price:  ₱8,009.48
You save:  ₱2,288.58
List Price:  ¥21,617.62
You save:  ¥6,176.90
List Price:  MX$2,374.63
You save:  MX$678.51
List Price:  QR509.31
You save:  QR145.52
List Price:  P1,929.29
You save:  P551.26
List Price:  KSh18,618.67
You save:  KSh5,320
List Price:  E£6,790.31
You save:  E£1,940.22
List Price:  ብር7,942.45
You save:  ብር2,269.43
List Price:  Kz117,241.62
You save:  Kz33,500
List Price:  CLP$137,040.41
You save:  CLP$39,157.20
List Price:  CN¥1,013.40
You save:  CN¥289.56
List Price:  RD$8,251.22
You save:  RD$2,357.66
List Price:  DA18,826.63
You save:  DA5,379.42
List Price:  FJ$317.87
You save:  FJ$90.82
List Price:  Q1,085.64
You save:  Q310.20
List Price:  GY$29,225.48
You save:  GY$8,350.73
ISK kr14,084.59
List Price:  ISK kr19,718.99
You save:  ISK kr5,634.40
List Price:  DH1,416.82
You save:  DH404.83
List Price:  L2,505.87
You save:  L716.01
List Price:  ден8,074.51
You save:  ден2,307.16
List Price:  MOP$1,125.87
You save:  MOP$321.70
List Price:  N$2,657.05
You save:  N$759.21
List Price:  C$5,137.77
You save:  C$1,468.04
List Price:  रु18,685.75
You save:  रु5,339.16
List Price:  S/525.19
You save:  S/150.06
List Price:  K530.57
You save:  K151.60
List Price:  SAR525.14
You save:  SAR150.05
List Price:  ZK3,528.03
You save:  ZK1,008.08
List Price:  L652.66
You save:  L186.48
List Price:  Kč3,316.71
You save:  Kč947.70
List Price:  Ft51,682.51
You save:  Ft14,767.48
SEK kr1,089.22
List Price:  SEK kr1,524.96
You save:  SEK kr435.73
List Price:  ARS$121,682.87
You save:  ARS$34,769.02
List Price:  Bs966.66
You save:  Bs276.20
List Price:  COP$547,598.77
You save:  COP$156,467.96
List Price:  ₡69,943.14
You save:  ₡19,985.18
List Price:  L3,446.12
You save:  L984.67
List Price:  ₲1,033,044.43
You save:  ₲295,176.63
List Price:  $U5,445.86
You save:  $U1,556.07
List Price:  zł568.23
You save:  zł162.36
Already have an account? Log In


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.

Sign Up


Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.