Bootstrap list groups Video Lecture - Learn Bootstrap From Basics to Building

this is part well of bootstrap tutorial
in this video let's discuss bootstrap
list groups let's understand list groups
with examples first let's create a basic
list group that looks like this at the
moment we have got an unordered list
right here if we view this in the
browser this is how the unordered list
looks like let's convert this unordered
list - a list group to do that there are
two modifications that we need to do
first on the unordered list element we
use list group class and on the
individual list items we use list group
item class let's save our changes and
when we reload this page we should get a
list group and here is the HTML required
now let's create a list group item with
a badge now if you look at this list
group right here
Australia is a new country since it's a
new country I want to display this badge
new on the right-hand side of the
country like this let's see how to
create this list group item with a badge
to create a list group item with a badge
all we need to do is include a span
element inside the list item and then
use badge class on that span element so
let's create a new list item for country
Australia and we want a badge as well so
I'm going to include a span element and
the badge should say new and on the span
element I am going to include badge
class let's save our changes and when we
reload this page notice we get country
Australia and the badge new is also
displayed and here is the HTML required
now let's discuss creating list group
with hyperlinks here is what we want to
do we want to create a list group with
three company names whenever we click on
any of the list items we want to be
redirected to that respective company
website to create a list group with
hyperlinks there are two things that we
need to do first instead of using an
unordered list element use a development
instead of using a
SkyTeam element use anchor element and
here is the HTML notice we are using a
development instead of unordered list
element and we are using an anchor
element instead of list item element
anchor element can also have href
attribute and the href attribute is
pointing to the respective company
website let's save our changes and when
we reload this page notice we get a list
group with hyperlinks when I hover the
mouse over these list items look at that
first of all the cursor changes to a
hand symbol indicating that we can click
on that list item and also the
background color changes to gray and
whenever we click on any of the list
item we are being redirected to that
respective company website here is the
HTML now let's discuss how to apply
styles to list group items to apply
styles to list group items we can use
one of the for contextual classes
provided by bootstrap we have list group
item danger info success and warning
these different classes provide
different styles as you can see on the
Left let's apply these contextual
classes to list group items and see what
we get let's flip to visual studio so
here we've got full list items and to
each of the list items we are applying a
different contextual class provided by
bootstrap so for the first item we are
applying lists group item danger for the
second one info success warning let's
see what we get I'm going to save the
changes and when we reload this page
notice four different list items we get
different colors that are applied by the
bootstrap contextual classes is the
example that we just looked at now let's
discuss how to highlight and disabled
list group items to highlight the list
group item use active class and disable
a list group item use disabled class
let's look at this in action notice in
the example right here on the first list
group item we are using disabled class
which is going to make this item
disabled
and on the second list group item we are
using active class which is going to
highlight this item with a different
color let's look at this in action
notice when we reload the page look at
the first item within the list group the
first item is disabled look at this when
I hover the mouse over the cursor
changes to a stop symbol indicating that
item is a disabled item and look at the
second list group item it is highlighted
with a different color and here is the
example let's now discuss creating list
groups with custom content when creating
list groups with custom content we can
use nearly any HTML we want I'm going to
make use of these three bootstrap
classes list group item list group item
heading and list group item tags notice
within the list group that we have here
we've got three list group items each
list group item is an anchor element
meaning when we click on any of these
list group items we will be redirected
to the website that we have specified as
the value for the href attribute on that
anchor element within each anchor
element which is our list group item we
also have two other elements the first
element is displaying the list group
item heading and the second element is
displaying a paragraph of tags on the
anchor element which is going to be our
list group item we'll use this class
list group item and on this element
which is displaying the list group
heading we are going to use list group
item heading and on this element which
is displaying this paragraph of text
will be using list group item text and
the same is true for the rest of the to
list group items that we have let's look
at this within visual studio notice here
we have our development with list group
class and within the development we've
got three anchor elements which are
going to be our list group items notice
on each of the anchor elements we have
used list group item class within each
anchor element we've got an h4 element
and a paragraph element this h4 element
is the one which is going to display
the list group item heading so on that
h4 element I'm using list group item
heading class and this paragraph element
is the one which is displaying this line
of text that we have here so on that
element I'm using list group item text
class the same is true for the rest of
the two anchor elements that we have
here so let's save our changes and when
we reload this page we should get a list
group with custom content notice when I
hover the mouse over it changes to a
hand symbol indicating that we can click
on that list group item at the moment we
have set the href attribute value to
hash but you can set it to any value
that you want and when you click on that
list item it will take you to the
website that you have specified and here
is the HTML that we just looked at thank
you for listening and have a great day