Hello, in this bootstrap four video, we're going to show you check box buttons. Up to now we've just done regular buttons, though we've got different types, this essentially styling. So if let's say I were to click on this one, or were to click on this one, or this one, or this one is essentially just the user clicking on it, and it performing an action where the checkbox has two different states on and also the user can toggle between them. The usage of something like this can be for surveys, so you can select something like a certain selection item. Also, you can also use it for login forms. When the user logs in.
You can check a little check box is very common on user logging systems over the web, that it keeps you signing the info, let's say X amount of days. So that's where a check box from you for locally bootstrap really simplifies the process and it's really just an extension of what we've learned in terms of buttons. Escape code in go to your cloud is going to add it after all the other buttons, you can do it in a fresh project is not a problem. I'm gonna put some brake lines. On first of all you want a div, the div is going to have a class of btn dash group because it's going to be a button group is going to contain buttons with in it. So we want data, dash toggle equals buttons.
And now you need to put a label and the label is gonna have a class of btn btn dazs primary, I want to make the first one active is just going to be selected by default. Obviously, if you don't want any selected by default, then you don't have to, if you do, you just simply have to put this active class and Alec seocho btn primary and btn. This is essentially what we've been doing for the different types and different styles of buttons. So what I recommend is after you've watched this video, actually mix and match some of these different styles in to the check box, it will be fine. We definitely do recommend that you check that out. What you're going to need within the label is an input so the input is going to have a type of checkbox.
And if you want it to be active checked, aka selected need to pour an empty attribute called checked for autocomplete. pleat equals off. And now just simply put some text I'm going to put check box one is selected. And to actually save some time, I'm just going to copy and paste this and show you what a checkbox looks like when it's not selected. So you just get rid of the active class and get rid of the empty checked attribute. somes gonna change this to checkbox, too.
And that looks a Okay, so if we save this now, go to our web browser refresh. There you go. We have a checkbox. You may be thinking that you've seen checkboxes for before and they don't look like this. They usually just look like a square. And yeah, they do.
If you want, they can just remove some of these classes, add a bit of styling, get a look into where you want it. But in terms of functionality, this is a checkbox so far. Click this, it's no longer checked, is checked, no longer checked for click, it is checked, whereas a regular button like this one, if I click it, it's no longer selected when I go when I take focus off it, whereas if I select this, I'll go somewhere else, it is still selected. So that's how you use checkboxes within bootstrap version four. Obviously, to actually use this in your project, you want to use some sort of jQuery or some sort of PHP language, and actually detect where it's been selected or not, and code it so it does something accordingly that's specific to your website. 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.
There'll be another link in the description to the source code from this video. So if you have any query these want to check out the code. Check that out. Please rate, comment and subscribe. It does really help keep the content free. Plus it also helps us provide more content on a regular basis.
And as usual, thanks for watching and have a great day.