Using Bootstrap we can add style to list groups.
This HMO page shows an example of basic list group formatting.
Here we have three items around.
Each item is some padding and also a border in order to create this.
We start with an unordered list is shown here.
We then create a class attribute and set it to list.
Group
next we create our list items.
Each list item must have a class attribute set to list group item
then it's just a matter of inserting your labels for the.
For this demonstration we've set it to item 1 2 and 3.
We can also add badges and icons to our list items by creating a spend element with the badge class
inside the list item so if we wanted to add a badge to item number 1 we can do so as follows.
As you can see we've added a badge on the first item with the value of 12 and you can copy and paste
this code and we'll make one for Item number 2 as well
next.
By converting the list items to links we can also create a mouse over effect so we'll go ahead and do
that we'll just delete our list items.
And insert this code will create 3.
So just go ahead and insert your links.
As shown here
you can see that it's just an A element which with an H R you have attribute in the class attribute
set to list group item and it's the same for each item just have to change the label.
So now when we save our file and refresh you can see that we have a hover effect a mouse over effect
on each list item.
We can set a list item to active by applying the active class.
So if we just take an active year you can see that it's activated.
Item 1.
The same can be done for a disabled item.
You can type in disabled an Item 2 is now disabled and cannot be put on
contextual classes can also be added by creating the necessary classes in the list items so let's go
ahead and just delete the disabled in active class and we'll start with the success contextual class.
So type in list rule
success and refresh.
So that's the first one we'll add a couple of others
and the others were warning
and we'll add one last one just.
What we're going to add the danger contextual class and so you can see some pretty neat styling on this
loop.
Another great benefit of working with lists is you can add nearly any HMO element inside the list group
item.
We have two classes available to us in bootstrap including list group item heading and list group item
text which can be used to add custom content.
So we'll go ahead and create a custom list so you can you can follow along.
First insert in place of Item 1
insert this line of code
so here we've used the list group item heading.
So we've given our list item a heading and now we can insert some basic text content in a paragraph
element give the paragraph element the class list group item text and so when you refresh it you can
see that there's some heading and some text inside the first list item and now you can copy and paste
this blog.
And do the same where the other items
then that's what the final result should look like.