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

From Script | Spoken-Tutorial
Jump to: navigation, search


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