From the course: Bootstrap 3 Essential Training

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Using input groups

Using input groups - Bootstrap Tutorial

From the course: Bootstrap 3 Essential Training

Start my 1-month free trial

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…

Contents