Bootstrap/C3/Dropdowns-in-Bootstrap/English

VISUAL CUE	NARRATION
Slide: Title	Welcome to the Spoken Tutorial on “Dropdowns in Bootstrap”.
Slide 2: Learning Objectives	In this tutorial, we will learn about: Dropdowns Dropdown classes Dropdown divider Dropdown position
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, CSS, JavaScript and JQuery. If not, please go through the relevant tutorials on this website.
[Firefox- Mypage.html]	In this tutorial, we will create a dropdown using Bootstrap classes. We will create a dropdown on the “Products” link. On clicking it, these dropdown menu items will become visible. Let’s see how to create this.
Slide: Dropdowns	Dropdowns can be expanded and collapsed i.e they open and close, on a click. They are generally used for displaying lists of options and links. They can be created on anchor or button elements.
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 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 Firefox	Open the file Mypage.html in a web browser.
[Firefox]	We will create a dropdown toggle on the link of nav item “Products”. On the right side, we see a list of product item links which we had created earlier. Now, we will remove them from here and will set them as dropdown items for “Products”. So here, the link “Products” will become a dropdown trigger element. Let’s start to implement this.
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] Delete: <a href="#" class="text-decoration-none text-danger"> Fruits & Vegetables </a> <a href="#" class="text-decoration-none text-danger"> Foodgrain </a> <a href="#" class="text-decoration-none text-danger"> Beverages </a> <a href="#" class="text-decoration-none text-danger"> Personal care </a> <a href="#" class="text-decoration-none text-danger"> Snacks & Branded Foods </a>	In the 3rd row, delete the links as shown here.
[gedit - Mypage.html] Delete: <a href="#" class="nav-item nav-link">Products</a> Update: <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Products</a> <a href="#" class="dropdown-item">Fruits & Vegetables</a> <a href="#" class="dropdown-item">Foodgrain</a> <a href="#" class="dropdown-item">Beverages</a> <a href="#" class="dropdown-item">Personal care</a> <a href="#" class="dropdown-item">Snacks & Branded Foods </a>	In the navbar, replace the 2nd nav item “Products” with the code as shown here. Using the <anchor> tag we have created a link for “Products”. And we have made this anchor element as a dropdown trigger element. For this, we have added .dropdown-toggle class along with the attribute data-toggle="dropdown". Then, we have added all the links as dropdown menu items wrapped by .dropdown-menu class This class is used for proper spacing and styling elements. We’ve wrapped them with .nav-item and .dropdown classes.
Press Ctrl + S	Save the file.
Switch to firefox	Switch to the browser and refresh the page.
[Firefox]	Notice the nav item “Products” with a dropdown symbol. Click on it. All the dropdown menu items are now visible. Again click on the “Products” Now the dropdown menu items are not visible. So we have successfully created dropdowns.
	We can also separate groups of related menu items in the dropdown. Let’s do this.
Switch to Mypage.html	Switch to the Mypage.html file in the text editor.
[gedit - Mypage.html] Update: <a href="#" class="dropdown-item">Fruits & Vegetables</a> <a href="#" class="dropdown-item">Foodgrain</a> <a href="#" class="dropdown-item">Beverages</a> <a href="#" class="dropdown-item">Personal care</a> <a href="#" class="dropdown-item">Snacks & Branded Foods</a>	Before the last dropdown menu item, type the code as shown. .dropdown-divider class is used to separate groups of related menu items. Here we have separated the “Snacks & Branded Foods” item.
Press Ctrl + S	Save the file.
Switch to firefox	Switch to the browser and refresh the page.
[Firefox]	Click on “Products”. Notice that the dropdown is now separated into two parts. By default, the dropdown is triggered to the bottom. But we can change the position of it. We can trigger the dropdown menus to the top, left or right of the element.
Slide: Dropup Dropup.png	.dropup class is used to trigger the dropdown menus to the top.
Slide: Dropleft Dropleft.png	.dropleft class is used to trigger the dropdown menus to the left.
Slide: Dropright Dropright.png	.dropright class is used to trigger the dropdown menus to the right. You can try these classes on your own later on for your own understanding. In this way, we can create different types of dropdowns using Bootstrap.
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: Dropdowns Dropdown classes Dropdown divider and Dropdown position
Slide 8: Assignment	As an assignment- Open Mypage.html in the web browser. Change the screen size suitable for tablet and Mobile devices Observe the dropdown. Hint : Enable the responsive design mode. Decrease the screen size
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 Spoken Tutorial project team, IIT Bombay signing off. Thanks for watching.

Contributors and Content Editors

Nirmala Venkat