Join Jen Kramer for an in-depth discussion in this video General form styling, part of Bootstrap 2: Adding Interactivity to Your Site.
- View Offline
Now that we have our boxes in place on our form. And they have been assigned a size via those span classes. It's time to turn our attention to some of the other troubling little display issue that are going on with our form. So, if I just go ahead and open this up in a browser, you'll see what I'm talking about. I'm sure you've noticed that these radio buttons don't quite line up with the text next to them. As you can see here neither does the checkbox. And there's probably a little bit of styling that can be applied here. To clean all that up and make it look better.
Also we have this big box up here at the top for your name. But I haven't been really clear about what is suppose to go in there. Is it just your first name, your last name, both names. So it might be good to have a little pointer that would indicate what it is that I'm looking for in that box. And then finally down here, towards the bottom of the page, we have a Submit button. It's a functional Submit button, if it was actually hooked up to some kind of function. But it's not terribly attractive. We could make that button look a whole lot more interesting than that, so let's go ahead and address these problems one by one. Back here in your HTML, if you scroll on down to line number 20, this is the blank where you're going to put in your name.
What we can add here is a HTML5 attribute, and that is the place holder attribute, placeholder= First and last, please. And placeholder is a new attribute in HTML5. What this will do, is it will give you text that will appear in the box. It will be grayed back a little bit. But when you click in the box and you start typing, then that text is going to disappear. And that is again an HTML5 thing, not a Bootstrap thing.
If you go ahead and save your page and then open this up in a browser, you'll see here there's that text, first and last page. You can see it's kind of grayed back. When I click inside and I start to type my name, then that text is going to disappear. So that's very nice. The next thing we should address is those radio buttons. Bootstrap has a way of dealing with that, and the way we deal with it is to the labels that go around your radio buttons. You're going to add a class, and that class is going to be radio.
And we have several places that we're going to need to apply this class.So this is the first radio button here for HTML5. So I'm just going to go on down and apply this class in all of these buttons for the favorite session. Also down here where I've got, would you come to this conference again, the Yes and No buttons, they're also going to get that treatment inside of the label tag. Alright? So if we just go ahead and Save that, and put that in a browser, you'll see now that our radio buttons are lined up with the text next to them. One of the things we might want to do for, Would you come to this conference again? We just have Yes and No, and they sort of push the content down the page a little bit.
They're just short answers. And it might look better if these were side by side. And Bootstrap does have a way of doing that. We can add a class of in line to those radio buttons. So, here where we have on line 31 the label for the class of radio, we can add to that a class of inline, likewise down here on line 34. So the two classes of in line there and if I put that in my browser you'll see now that these buttons are appearing next to each other.
The next thing that we should do is address this check box down here towards the bottom of the page, which isn't lining up. Down a little bit further here in the label that goes around your checkbox. Let's go ahead and add a class of checkbox. And then finally down here at the bottom, here's our button. And it's a of type submit and doesn't have any classes associated with it at all. So let's go ahead and put some classes on. A class of btn at the very least that would just give it buttony sort of styling.
In fact lets just take a look at what that looks like so far. If you go ahead and save this and put that in a browser you'll see that our button looks much more buttony. Its not quite so square and small, its pushed out a little bit. Its got a nice gradient to it, its got this nice hover effect when I roll over it. But it's still kind of grey and blends in to the page. A little color would make it pop out. So, I can add a couple of other classes to this. Btn-warning will make it orange and btn-large will make it big. So, if we go ahead and Save that and put that inside of our browser. Now we have a nice big orange button down here at the bottom of the page that we can click on to submit this form.
So with just a few Bootstraps standard styling classes, we've managed to improve the look of this page by quite a bit. Making sure that those radio buttons were all lined up, and adding a little color to the button has definitely improved the look of this page.
- Setting up your working environment
- Planning the thumbnail gallery
- Creating modal windows
- Creating an image carousel
- Linking images and adding captions
- Changing the carousel rotation
- Laying out and styling a contact form