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

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: Stores Mumbai Delhi Chennai Kolkata	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: <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>	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.

Contributors and Content Editors

Nirmala Venkat