Bootstrap/C3/Dropdowns-in-Bootstrap/English

From Script | Spoken-Tutorial
Jump to: navigation, search
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

Retrieved from "https://script.spoken-tutorial.org/index.php?title=Bootstrap/C3/Dropdowns-in-Bootstrap/English&oldid=55506"