Nirmala Venkat: Created page with " {| border="1" |- || '''VISUAL CUE''' || '''NARRATION''' |- |- || Slide: Title || Welcome to the Spoken Tutorial on '''“List Group in Bootstrap”.''' |- || Slide 2: Lear..."

2021-09-01T11:33:24Z

Created page with " {| border="1" |- || '''VISUAL CUE''' || '''NARRATION''' |- |- || Slide: Title || Welcome to the Spoken Tutorial on '''“List Group in Bootstrap”.''' |- || Slide 2: Lear..."

New page

{| border="1"
|-
|| '''VISUAL CUE'''
|| '''NARRATION'''
|-
|-
|| Slide: Title
|| Welcome to the Spoken Tutorial on '''“List Group in Bootstrap”.'''
|-
|| Slide 2:

Learning Objectives
|| In this tutorial, we will learn about:
* '''List group'''
* '''Active '''and''' disabled item'''
* '''List group '''with''' links '''and''' buttons '''and
* '''Contextual classes'''
|-
|| Slide 3:
System Requirements
|| This tutorial is recorded using:

* '''Ubuntu Linux OS v 18.04 '''
* '''Bootstrap 4.6.0'''
* '''HTML5'''
* '''gedit Text Editor '''and
* '''Firefox web browser'''
|-
|| Slide 4: Prerequisite
https://spoken-tutorial.org
||
* To follow this tutorial, you should be familiar with '''HTML''' and '''CSS.'''
* If not, please go through the '''HTML '''and''' CSS '''tutorials on this '''website'''.
|-
|| [Firefox- Mypage.html]
Highlight list group

|| In this tutorial, we will create a '''list group''' using '''Bootstrap classes'''.

This '''list group''' will display all the available store locations.

We will learn about all '''list group''' '''classes''' of '''Bootstrap.'''
|-
|| Slide: List Group
|| '''List group '''is used to display a series of content.

Generally, it is an '''unordered list''' with '''list items.'''

Let’s see how to create this.
|-
|| Point to Mypage.html in My-bootstrap folder

|| Locate the file '''Mypage.html '''in the '''My-bootstrap''' folder.

We will use the '''Mypage.html '''file''' '''which we had saved earlier''' '''for this demonstration.
|-
|| Slide: Code Files
||
* The file used in this tutorial is available in the '''Code Files''' link on this tutorial page.
* Please download and extract it.
* Make a copy and then use it while practising.

|-
|| Open Mypage.html in gedit
|| Open the file '''Mypage.html''' in any '''text editor.'''

I have opened it in the '''gedit Text Editor.'''
|-
|| [gedit - Mypage.html]

Type:
<ul class="list-group my-2">
<li class="list-group-item">Stores
</li>
<li class="list-group-item">Mumbai
</li>
<li class="list-group-item">Delhi
</li>
<li class="list-group-item">Chennai
</li>
<li class="list-group-item">Kolkata
</li>
</ul>
||
In the 3rd row, after the '''Sign Up''' button, type the code as shown.

Here, we have created a basic '''list group''' of an '''unordered list '''to display store locations.

For example, I have added stores Mumbai, Delhi, Chennai and Kolkata as '''list items'''.

'''.list-group class''' is used to add borders and '''padding''' around the '''list group''' and individual '''list items.'''

We have added the''' .list-group-item class''' to every '''list item''' for proper spacing and '''styling'''.

|-
|| Press Ctrl + S
|| Save the file.
|-
|| Open Mypage.html in Firefox
|| Open the file '''Mypage.html''' in a '''web browser'''.
|-
|| [Firefox]
Highlight list group

|| Notice that a '''list group''' to display all store locations, has been successfully created.

It has borders around the '''list''' '''group''' and individual '''list items.'''
|-
||
|| We can remove the border around the '''list''' '''group''' and rounded corners.
Let’s see how to do this.
|-
|| Switch to Mypage.html
|| Switch to the''' Mypage.html''' file in the '''text editor'''.
|-
|| [gedit - Mypage.html]

Update:

|| Add '''.list-group-flush class '''as shown here.

This '''class''' removes the border around the '''list group''' and rounded corners.

|-
|| Press Ctrl + S
|| Save the file.
|-
|| Switch to firefox
|| Switch to the '''browser''' and refresh the page.
|-
|| [Firefox]
|| Notice that now the border around the '''list''' is removed and the corners are not rounded.

But the borders between the '''list items''' remain.
|-
|| [Firefox]
|| Let’s see other '''classes''' for the '''list group''' in '''Bootstrap'''.
|-
|| Slide: Active & Disabled Item
|| '''.active class''' is used to indicate the current active '''list item''' selection.

'''.disabled class''' is used to make the '''list items''' appear disabled.

Let’s try one of them.
|-
|| Switch to Mypage.html
|| Switch to the''' Mypage.html''' file in the '''editor'''.
|-
|| [gedit - Mypage.html]
Update:
|| Here we have added the '''.active class''' to the first''' list item''' as shown.
In the same manner, you can try '''.disabled class'''.

|-
|| Press Ctrl + S
|| Save the file.
|-
|| Switch to firefox
|| Switch to the '''browser''' and refresh the page.
|-
|| [Firefox]
|| Now the''' “Stores”''' is an active '''list item '''and its color has changed to '''blue.'''

But notice that there is no change when we move the cursor over these '''list items.'''
|-
||
||

Next, let’s create actionable''' list group items '''by using''' <anchor>s '''and''' <button>s.'''
|-
|| Switch to Mypage.html
|| Switch to the''' Mypage.html''' file in the '''editor'''.
|-
|| [gedit - Mypage.html]

Update:

|| Update the '''list group''' as shown here.

We have created the same '''list group''' using '''<button>s.'''

We have added the '''.list-group-item-action class '''to every '''list item'''.

This '''class''' creates actionable '''list group items''' with '''hover''', '''disabled''', and '''active states'''.
|-
|| Press Ctrl + S
|| Save the file.
|-
|| Switch to firefox
|| Switch to the '''browser''' and refresh the page.
|-
|| Highlight list group
|| '''List group''' created using '''<button>s''' is looking the same as it was previously.
|-
|| [Firefox]
|| In a similar way, we can use '''<anchor>s '''for creating '''list groups'''.

Now move the cursor over '''list items'''.

Its background color darkens.
|-
||
|| We can also change the background color of the '''list group'''.

Let's see how to do this.
|-
|| Slide: Contextual Classes

list-group.png
|| Following are the '''classes''' to colour the '''list items''' according to '''hover, disabled, '''and '''active states'''.

Let’s use one of them.
|-
|| Switch to Mypage.html
|| Switch to the''' Mypage.html''' file.
|-
|| [gedit - Mypage.html]

Update:

<div class="list-group list-group-flush my-2">

<button type="button" class="list-group-item list-group-item-action list-group-item-secondary active">Stores</button>

<button type="button" class="list-group-item list-group-item-action list-group-item-secondary">Mumbai

</button>

<button type="button" class="list-group-item list-group-item-action list-group-item-secondary">Delhi

</button>

<button type="button" class="list-group-item list-group-item-action list-group-item-secondary">Chennai

</button>

<button type="button" class="list-group-item list-group-item-action list-group-item-secondary">Kolkata

</button>

</div>
|| Add '''.list-group-item-secondary''' class to all the''' list items''' as shown.
|-
|| Press Ctrl + S
|| Save the file.
|-
|| Switch to firefox
|| Switch to the '''browser''' and refresh the page.
|-
|| [Firefox]
|| Notice that the background color of the '''list group''' is now changed, according to the '''state'''.

The''' list item “Stores” '''has an '''active state'''.

So its background color is different as compared to the other '''items'''.
|-
||
|| Likewise, we can also add other '''HTML elements''' to the '''list group.'''

Like '''heading''', '''paragraph''', '''image''', etc.

In this way we can create custom '''list groups''' using '''Bootstrap classes.'''
|-
|| Only narration
|| With this we have come to the end of this tutorial.

Let us summarize.
|-
|| Slide 6: Summary
|| In this tutorial, we have learnt about:
* '''List group'''
* '''Active '''and''' disabled item'''
* '''List group '''with''' links '''and''' buttons '''and
* '''Contextual classes'''
|-
|| Slide 8: Assignment
|| As an assignment-

* Open the '''Mypage.html''' file.
* Remove '''.list-group-flush''' '''class'''
* Save the file.
* Observe the output on the '''web browser.'''
|-
|| Slide: About Spoken Tutorial project
|| The video at the following link summarises the Spoken Tutorial project.

Please download and watch it.
|-
|| Slide: Spoken Tutorial Workshops
|| The Spoken Tutorial Project team conducts workshops and gives certificates.

For more details, please write to us.
|-
|| Slide: Forum
|| Please post your timed queries in this forum.
|-
|| Slide: Acknowledgement
|| Spoken Tutorial project is funded by the Ministry of Education (MoE), Govt. of India.
|-
|| Slide: Thanks
|| The script and video for this tutorial was contributed by Neha Solanki.

This is Nancy Varkey from the Spoken Tutorial project team, IIT Bombay signing off.

Thanks for watching.
|-
|}

Bootstrap/C3/List-Group-in-Bootstrap/English - Revision history

Nirmala Venkat: Created page with " {| border="1" |- || '''VISUAL CUE''' || '''NARRATION''' |- |- || Slide: Title || Welcome to the Spoken Tutorial on '''“List Group in Bootstrap”.''' |- || Slide 2: Lear..."