Dropdowns

The dropdown is one of the easiest BS components, so it's a good place to start.

What is a dropdown?

Say you're writing a choose-your-own-adventure game. One of these things:

Here's what your page might look like:

The choices are a tags. Each one jumps to a different page. You can try it.

Making one

We'll:

• Find example HTML
• Paste it into a page
• Change it to do what we want

This is the process for all the components.

Remember, use the sample BS template given earlier.

Find some template HTML

The best place is on the official BS site. There are other templates on the web, lots of them. If you use one, make sure it's for BS 5.

I always use templates from the official site, just to be safe.

Take a look at the official dropdown page. It has many examples.

Here's what we want.

It has two pieces:

• The trigger button that shows the options list
• The options list.

Here's the code from the BS docs:

Lines 1 and 10 wrap the component. Lines 2–4 make the trigger button. Lines 5–9 make the options list.

You can change btn-secondary on line 2 to change how the button looks. btn-secondary makes a button like this:

Class btn-secondary

If you use btn-primary:

Class btn-primary

There are nine different styles, listed on the buttons page.

Here's the options section again:

It's just a list of links to other pages. Replace each # with a URL.

Paste the code

The next step is to paste the code into our BS template. Here's the template again:

You know how to paste. Copy-and-paste is good.

Customize

Here are the steps again:

• Find example HTML >>Done<<
• Paste it into our page >>Done<<
• Change it to do what we want >>Now<<

Here's what I wrote.

You should be able to match up the tags with the output:

Here's the component's code again:

That's used by the JavaScript code that makes the dropdown work. Don't worry about what it means. Just be certain it's there. If it's not, the code won't work.

Same with aria-expanded on the same line. Just make sure it's there.

Using BS components is like that. You paste code, without knowing exactly what each piece does. That's OK, but you might have to mess around to get things to work. There are many examples in the docs to help you. Ask me (Kieran) if you get stuck. Gather.Town is the best place.

Checking for JavaScript errors

Things like dropdowns and navbars rely on code in the programming language JavaScript. The code is inserted into your pages at the bottom of the BS template. Don't worry, you don't need to know how it works. You can ignore it most of the time.

However, sometimes you get JS errors if your code isn't correct. The error messages can help you figure out what's wrong.

To see them, use the browser's dev tools we talked about earlier. Press F12 (on a PC). Click the console tab:

You'll see errors there.

Not every problem creates error messages, unfortunately. Life would be easier if they did.

Exercise

Up next

Let's talk about navbars.