Hello, in this bootstrap four video, we're gonna look at button drop downs. A button drop down is a mixture between a button group and a regular button. Basically you have a button group and within that you have a button which is what you click and then a drop down menu appears. So to actually get started the first thing that we need to do, obviously, these brake lines yet, just so it looks a lot better on the website, but you don't need to do that. So that's the first thing you'll need is a div. And this div is going to be the button group.

We have a separate video on button groups in this series. So check that out to be best if you watch that before watching this video. And within it, we're going to add a button like we had before where that's going to add one particular type of bots installed in a particular way. But you can add an outline button, a small button, whatever type of button you One that's totally up to you. So for the type from the button for the class can be btn btn. Primary like I said you can add whatever type of button you want.

I'm going to keep it simple and add a primary button and you just put a class or drop down dash toggle. Now we need to do data dash toggle. And within this we have to drop down and we need to do area dash has pop up. This is about pop up correctly. equals true for this just allows you to actually pop up area dash x banded equals false. And now what we can just do a close button and just put some text inside the button on the Gonna put, I'm gonna put Click me, exclamation mark.

Now after the button itself, we're gonna add a nother div. And inside this div or portion size, the student needs to have a class of drop down menu. So this is all the menu items that will appear once you click the button, and the drop down menu appears. For this, just put a href equals drop down dash item that is per href. I'm just gonna keep it simple and just put it over the report our website, but you can obviously put whatever you want and put a particular part on your web page, reload the Chrome Web page and send the get variable or just go somewhere else entirely. and install it I'm just gonna put one And that's how you create a basically a drop down menu.

I'm gonna copy and paste this. So got several drop down items, the format is exactly the same. Yes, three should be enough. I'm gonna put two to three. Save that, if we go to our web browser refresh, so we've got our butcher, he got a little ugly, that's called the carrot symbol right there. And if I click that button Now, that's not how it's meant to look.

And let's go back to our code and have a look at what is missing or what has gone wrong. Cuz locsin should look like that. Man. Let's make sure we get everything Correct. Correct. drop down menu, drop down, I turn to the everything looks all good.

Here. Seven look before this. So we got button btn primary Drop down dash, toggle data dash toggle drop down then for the area has popped up, make sure I spelled all of this correctly equals true area dash expanded equals false. So something about this in an oil analysis of an overlook your btn dash group type people got turn on pause do something need to to this up. There we go. I didn't put it as a class a pre HRF you're probably laughing at me thinking what is this guy doing adding two h refs and st class to go back refresh.

This doesn't look different when I click on it. This is how it's meant to look. So we've got two free different menu items. You may have seen in websites that have dropped downs, they have locked a load divider that devoid some of the menu items that's built into bootstrap as well and to add a device a simple A div where you want to divide it to be placed. Make sure you have a class of drop down. void.

Don't need to put any text inside equals empty. And now you can simply just pour in over items arms gonna copy and paste this oopsy Daisy, the wrong keyboard shortcut for copying. And I'm actually gonna just put the text out, doesn't do anything. There you go, we've got our divider, and we got our fourth button, which is after the divider. The reason I just put sign out is because on a lot of websites when you are logged in on sonar learning as well, our education platform, when you go to something like the top right click a drop down is usually like a Profile button. You have something like my profile.

So there's some more info with more pages that are all linked to your profile, and then usually separated and phase thought I thought for you just be pretty cool to show you that what you can also do is a split drop down button. And a split drop down button is very similar, but the button itself and the drop down toggle are separated. So you could have a default click action alternative. Alternatively, he could have a drop down as well. So let's just show you that it's really simple to implement. So what I'm going to do is copy and paste this because it's essentially the same as this.

So all we need to do is add a nother button and this button right here but it's just like we've done button before type of button class equals btn btn primary for this one, let me know that this is all set up for you just save it, it's gonna look slightly dodgy when we click on it. I mean when we refresh, we got essentially two buttons we clicked this on this is just a regular button as part of this drop down, or when we click this one, we have a drop down menu. We don't want this text text it doesn't look very good you can have if you want it, but generally what you want to do is enclose the text inside a span tag, which has the class of s are only which is for screen readers. So that way, the actual drop down itself is empty in terms of text but screen readers have have something to go by when they when they are being used.

So we are regular button and we got our alternative drop down as well. So usually these items will be linked in some way to the original button but they will provide alternative options. So to make your drop down bigger or smaller, all you have to do, we're not actually going to do this for you, we want you to try this out yourself, but simply where you use buttons, add a button size in. So if you just check out the buttons video in this series, we'll see how to do sizing with buttons. Just add the class, and you're all good to go. That's the beauty of this.

It's no different from how you usually would do button in terms of styling and sizing and that sort of stuff. It's just an extension of dice just using buttons and enhancing them. Finally, the last thing we're going to show you is drop up because at the moment, when I click any of these, they drop down, but you may want them to drop off and to do that, you simply add a class to the div that has btn dash group, cord drop up simple refresh And now we have this dropping up, as all you have to do to make your drop down menu be a drop up menu. If you have any questions, feel free to post them on sonar learning Dakota, UK for slash questions dot php. That's our free education platform with thousands of completely free videos, there'll be a link in the description, so you don't need to remember it.

Plus, there'll be another link in the description to the source code from this video and the source code from all the videos in the series. So check that out. Please rate, comment and subscribe. And it'll really help keep the content free. Plus, he also helps us provide more content like this. If you got any requests in terms of video for let us know.

So you can post it on sonar learning or there'll be there'll be an email address in the description as well. So just ask if you want a video and we will help accommodate that. And as usual, thanks for watching and hope you have a great day.