Dropdowns

Jeppe Schaumburg Jensen
A free video tutorial from Jeppe Schaumburg Jensen
Front-end developer, interaction designer and musician
4.2 instructor rating • 10 courses • 24,858 students

Lecture description

In this lecture we'll learn about the dropdown component. Dropdowns are contextual overlays that can be toggled to show a list of links.

Learn more from the full course

Master Bootstrap 4 (4.3.1) and code 7 projects with 25 pages

Master the latest version of Bootstrap 4 and create real projects and themes while learning HTML, web design and coding

22:32:56 of on-demand video • Updated March 2019

  • Learn how to create and use all components and utilities of the Bootstrap 4 framework
  • Learn how to create seven different responsive websites using the Bootstrap 4 framework
  • Practice with 5 quizzes, 70 coding exercises and a special built Bootstrap 4 Learning Kit (100+ source files)
  • Master the latest version: Bootstrap 4.3.1 (from February 2019)
  • How to create fluid and responsive layouts
  • How to use breakpoints and the grid system
  • How to structure all kinds of content
  • How to build all of the 24 components
  • How to use all of the 19 utilities
  • How to build 14 different web page templates
  • Project 1: Create a landing page
  • Project 2: Create an online forum
  • Project 3: Create a blog
  • Project 4: Create a knowledge base
  • Project 5: Create a resume and CV page
  • Project 6: Create a small business website
  • Project 7: Create a survey
  • How to customize the default styling
  • Advanced Bootstrap 4: How to use JavaScript triggers, options, methods and events
  • How to use Google Fonts
  • How to add icons with Font Awesome 4
  • How to add icons with Font Awesome 5
  • Accessibility best practices
English [Auto] Drop downs you will see the different drop downs that we can make with bootstrap birth. We have a regular dropdown created with a button as the trigger. Then we have a dropdown with a link as a trigger. We can make it small and large we can have a split button design where we need to click on the split button to access the dropdown menu. We can make it drop up instead of down. We can use buttons as our menu items instead of links. We can write a line our dropdown menu that the form is left the line and we can add that dropdown header a dropdown divider line and we can disable an item. Let's see how we do all this. To create a dropdown we start with a Dave check with the class dropdown and said this We start with creating our trigger. First we'll use that button Jack with the top button. The class BGN BGN secondary to create a secondary looking pattern and then we need to add the dropdown Chako class to style it as a dropdown button will also give it an ID dropdown and then to initialize this with javascript. We need to add the data toggle attribute with the value dropdown for accessibility. We will also add the area has pop up attribute value true and the area expanded attribute with the value falls. Now we'll give our bottoms and sexts. So this is our trigger for our trip down. We need to create the menu. This is that they take the class drop down menu and for accessibility the area labeled by attribute with the value dropdown. This is the ID of our dropdown for the ID. So I will drop down bottom here inside. We create some anchor checks but the class drop down item just copy this two times. All right. Now we can see that we have our dropdown working if we wanted to we could use a link instead of the button. So just change the buttons section and get tech like so using the same classes and attributes we can see that this still works or just undo these changes we can make our dropdown button smaller by adding the class BGN S.M. and we can make it larger by adding Reclast BGN Elgie we can create a split button design by first adding an extra button. Check the type button the same button classes BGN BGN secondary. And now we will have our label here. So for this other button isn't all at the dropdown charcoal split class. And then we will remove the text and create a space in the class s only and the value chargable dropdown this Spain is only for screen readers. Finally we need to change the dropdown class of our wrapping. Dave tag jus BGN group to make our two buttons stick together like this. Now we see that we have our dropdown menu attached to our split button with the down arrow let's just revert back to normal dropdown So if we want this to be a trouble up that pops up instead of down we can add the class to up to the dropdown element. Now it will pop up but we can't see it right now since there's not enough space above it. So I'll just quickly chalk this in the c section and creates American let's say 200 pixels. Now when we click it we can see that it will drop up instead of drop down. We can also make this trip down to the right side. So instead of a class drub up we use the gas drug right now wouldn't quite get it right. And we see that the arrow has been changed. Finally we can make it appear in the left side. So we use it as drug left. Right now there's no space to show it. So it appears on the right side of the arrow has been changed and placed in the other side. But if we had margin left 200 pixels like so we'll have space at the drop left. So now we see it appearing in the left side. Let's do this again. I said in the beginning we can use contacts instead of anchor checks in the dropdown menu. So let's just try to do this and see how this goes. Now when you click it we can see that it looks the same but now it's actually buttons in the first e-mail and not in context. OK let's just revert back to the egg attacks again. We can create a dropdown header by adding elements to the dropdown menu. For example 1 8 6 with the class dropdown header. Now when we open our dropdown we can see we have this header with some other font styling. We can add a dropdown divider by adding an empty div tech with the class dropdown divider like this. Now when we open our dropdown we see that we have this line separating two menu items. You can also use plain text as a menu item. So if you do this or just at Spain take you with the class drop down Aizen text and then you can write some text here and close the Spanswick again. Now when we open up our dropdown we can see that this has the same styling but as you can see the cursor changes so this is just simple text that you can't click on like the other items. To make an item active simply at the class acted like so and now when we were dropped down we can see and it's been highlighted to make an item disabled. We simply have the class disabled. So now when we know more about dropdown we can see that it's been great out and you can click on it actually for anchor text right now. It's still possible to click on it. It's only the styling that's been changed. But if you were using a button TAC instead like so you can use the disabled attribute like this. Now when we open it up. It's greyed out and you can click on it. So that's the best version. If you need to disable it then you should use the button Jack finally. Let's look at two ways where we can offset our drop down menu first we can use the data offset attribute and provide some bad news for the horizontal and vertical offset. For example 20 comma 30 then we can see now that it's been offset only by 20 pixels and vertically by 30 pixels. Let's try to change this. Two hundred here. Now it's been upset still 20 pixels horizontally but now 100 pixels vertically. So let's say we have a problem with the split button design. I'll just paste in the code that we saw earlier in this lecture. Right now the menu sticks to the split button to the right. Here we can offset this so it reference the parent element and aligns with this button by adding the class data reference or the attribute data reference with the value parent. Now it will reference the parent element which is that Dave or the button group wrapping these two buttons. So that's a way you can change that behavior. This was all about the dropdown component.