Hello in this bootstrap four video we are going to look at input groups, which allow you to easily extend Normal Form controls by adding buttons, texts or bottom groups on either side of the input form type. So to do this, it's really really simple. All you have to do is just create a div. It's gonna have a class of input group. Now you just do your input type. So for me, I'm going to do a text field.

And for the type is going to be text class, I'm gonna have form dash control, placeholder. I was gonna put use a name area dash described boy equals, I don't want this to just be the ID of our group add on. So I'm just gonna add it before span oopsy Daisy trying to snap her here. Didn't mean to do that. So it's gonna add span. And then we got to do a class the classes input dash group, dash add on, and I've misspelled input impt still put in.

Now just need to add an ID. So this will just be an add on one. And inside here I'm simply going to put dollar. So save that, go back to browser refresh, and also we have a input types, which is our tech foot, but the side of it. We don't interact with this. But we have a input type.

I mean, we have a group add on. So this is really cool. Even though I've put username, actually, I want to chain the tech from username to something a bit more appropriate. And yeah. Okay. So for example, you're on some sort of payment website, or you're creating a payment website, and you have the option to send money to someone at the left, you could have this little group, I don't want to show what currency you're dealing with.

So this is an easy way of displaying to the user. This is $5,000. But you don't have to have this input group add on. On the left hand side, you can have on the right hand side simply by printing after the input type for refresh. Now it's on the right hand side. And what you can also do poorly on both sides if you need to.

It's that simple. So just go back and just make sure it's on the left. So that's empower groups. to actually change the sizing of the input group, what you do is put in put group dash LG for a large size. Go back refresh. As you can see, it has now increased in size.

If we want a smaller one, we put s m, if we just want them the regular size, we just admit the size in. So there you go. It's slightly smaller now. But for this little input group add on, you don't have to have just something with plain text. You can even have checkboxes, radio buttons, buttons, buttons with drop downs and to simply add them all you Have to do it, put them inside this span, span tag right here. So we're going to leave that to you because we have videos covering those other features and components of bootstrap.

So let's combine them with the input groups, and you'll get some really cool looking elements for your website. If you have any questions, feel free to post them on sonar learning Dakota, UK for slash question dot php, there'll be a link in the description to that plus w another link in the description to the source code from this video and every other video in the series. So if you're having any problems, check that out as well. Please rate, comment and subscribe as it does really help us provide you more content on a regular basis. And as usual, thanks for watching, and I hope you have a great day.