Javascript Drop-Down Button

| | | | | | | | | | | | |

It doesn’t matter if you’re building a simple one-page portfolio website, a monolithic app for a large business, a blog, or a forum, chances are you need a drop-down menu.

A drop-down menu is especially useful when you have many links or actions, but there isn’t enough room on the page to see them all at once.

Usually, menus in descriptions require a little JavaScript.

If you haven’t started learning it yet or just want a quick fix, Bootstrap is the perfect solution.

What is Bootstrap ?

You’ve probably heard the word a few times, but what is Bootstrap ?

It’s a front-end CSS framework (with JavaScript). This means that it is a kind of pre-made scaffolding to dramatically speed up development. Programmers spend some time developing a standard to meet and including all the necessary prerequisites within the framework itself, so we don’t have to do this every time.

Standard styling is applied to some Bootstrap components that are often built, such as button elements, button groups, and navigation bars. This means that we can apply all of these styles using a few predefined keywords instead of repeatedly writing many lines of code.

This helps a lot with consistency because a team of several developers working on larger applications does not have to worry about applying the same styles. All styles are defined in the framework.

Configure Bootstrap

To use Bootstrap we need to add a few lines of code to our HTML structure.

We’ll be using the Bootstrap CDN for faster and easier setup.

First of all, we need a suitable HTML5 template, which is easily achievable in modern code editors. In VSCode, just type! and hit enter or tab to get the structure of the HTML5 document which looks like this:

Now inside the tag, paste the following lines into- above any other style sheet:

all the configuration we need. We are now ready to start our project.

Using Bootstrap

The power of Bootstrap is used using its keywords as HTML tag classes. Using it you can completely style your page without even creating a CSS file!

For example, here is a simple group of buttons:

And the result:

 ZFJ JTQYbq8vOI6hLA1aUs60WdEwX XT0M89G D1svpW6NvMSZdnoDebe YZqUTnc3GZbiDE0365azBUzu2zjfkdIegNRieaVUFZsr2ZaTR5CJPw6vLOKNSB5gB1GKlOVE0i9O

We have created a group of buttons with all the predefined Bootstrap colors (the sound is muted because it is reserved for text).

Now let’s go to the drop-down menus.

Bootstrap drop-down menu, different ways

In previous versions of Boo tstrap we had to use tags exclusively for drop-down menus. From version 4, Find your Bootcamp match

Drop-down list with buttons

We collect everything in one element (usually a or