Hello, in this bootstrap four video, we're going to show you radio buttons. Unlike a conventional button, even though we have different styles and different types, there are just a single click and perform a certain action button, you click it into something simple as that. Whereas a radio button, you can select it so it's active, and it's usually within a group of other radio buttons. So you can select one or the other. So if you select one, you can't deselect anything new one is usually selected by default. And if you select another one, the previous one gets D selected is not active anymore, and the new one is selected.
You may have seen these when you're on some sort of survey, and it's just asking you your sort of age range. And you have to let say select one of them may be the one that's selected by default is you choose not to say and then there's other categories as well like 18 to 25 2025 to 30. That sort of stuff is really easy to code. bootstrap does an amazing job of handling all of this stuff for you. First of all, let's just create some new nines. So you want to create a div, and the div is going to have a class of btn dash group which is pushing group because it's going to be a group of buttons and data dash toggle.
Today, the equals button because while you're talking between buttons, that's what they are. They're radio buttons. Now we're gonna have a label. And the label is gonna have a class of btn btn primary and we'll go To set it to active, which just means this particular radio button is selected by default on a port input type equals radio, then you just put a name for the name, just port options. You can put an ID on option one. But the idea is more used in something like JavaScript or jQuery or some sort of server side language like PHP.
So you can detect which one has been selected and then perform a certain piece of code accordingly. But that's more specific to your website is going to put autocomplete equals off. And then simply in need to also put an empty attribute of checked, which just goes hand in hand with the active class. So just state that this radio button is selected by default. I'm just going to use the example that I used before I'm gonna say choose not to say this is essentially gonna be age and by default is from choose not to say is selected and to save time is going to copy and paste this is going to get rid of the active from here because only one can be active at any given time. This increment this two option to get rid of the checked attribute will again only one can be active at any given time.
For this I'm going to put less than a no less than 18. Copy and paste this a couple more times and change the ID so unique. change this to 18 to 40 slide From from what I said, but so good 40 220. So we got a low wide range here, I bet you're ever come across a survey with a question like this and answered like this. Let's go to a browser refresh. If we scroll down, we have our four radio buttons.
And they're within a radio group, I mean, within a button group, and the first radio button is selected. By click it, it doesn't D select itself, that's the thing with radio button one has to always be selected. And you can be selected to essentially D selected, ie D, select another one. So I am 23. So if I were to click this 18 to 40, it's now 18 to 40. And as I see this is no longer active, or on 55 and I want to click 40 228 can click less than 18 as well.
So that's radio buttons and bootstrap. Also you might be thinking that these don't really localize where your button that you've seen before, but usually like no so called and they're not little black black.in there to signify they've been selected. And yeah, they look different, but they perform the same if you want them to look like that just remove some of these classes like the button styling classes, and apply some CSS to make it look the way you want it to. Also you may have noticed we use btn and btn primary and this is also used in some of the other buttons that we have looked at. You can also easily mix and match it for something like btn danger dash outline, we actually recommend that check that out. Just try using these different button types in your radio buttons.
If you have any questions, feel free to post them on sonar learning.co.uk forward slash question dot php there'll be a link in the description. To that, so you don't need to remember it. There'll be another link in the description to the source code from this video. Please rate, comment and subscribe, and it doesn't really help keep the content free. Plus it also helps us create more great videos like this one on a regular basis. And as usual, thank you for watching and have a great day.