Bootstrap 3 Essential Training, Using input groups

Bootstrap has a really cool feature called input-groups, which allows you to combine fields together with other elements to create some really interesting controls. Let’s take a look at how they work and how we combine input fields with other types of form elements.

So, here I have a very simple form, really with just one input field, it’s surrounded by a form-group and it also has a label. And it’s the kind of thing that maybe you would see on a store somewhere where you can put in your price.  

So let’s go ahead and modify this. First, I’m going to get rid of this label altogether, and then I’m going to wrap this input field inside an input-group div here. Now if I want to add a text element to this input field, then what I can do is create a span with a class of input-group-addon, and I’m going to put a $ in here.  

And you can see that it looks like a little label to the left of my input field, which I think looks pretty nice. Let’s go ahead and add another one, you can do as many of these as you want, put this one at the end.

Leave a Reply

Notify of