Join Jen Kramer for an in-depth discussion in this video Search form layouts and styling, part of Bootstrap 2: Adding Interactivity to Your Site.
The last thing I wanted to show you is how we can make a search box look kind of pretty using Bootstrap. So, to start with here, this is the only thing that I have on this particular web page. I've just got my standard sort of grid place holder stuff here, the container, the row, and a spam 12, and then inside of that I have a form, and the form contains two things. It contains the input. And it contains a button. So, if we just take a look at what we've got so far. If we just go ahead and open that up in the browser, you'll see it's not terribly attractive. I mean they don't line up next to each other real well to start with.
And it's kind of a boring looking search box, so we might want to find some way of making that a little bit more attractive. The best way to do this is up here in the input type of text, we're going to add a class. And that class is going to have a class of search hyphen query. And that's actually all you need to do. If you just add the class with the search hyphen query, save that. And put that back in your browser. Things are going to line up again. Notice also that the search box has these lovely rounded outsides on it. So, that's really quite attractive, but now it's kind of odd looking also in that your search is rounded and pill like, but the search button next to it is still kind of square looking.
Just as we saw in the last video where we attached that at sign to the Twitter username field. You can do the same thing here with a search box. I'm going to show you how to do that now. So, here's what we're going to need to do, first of all in the form tab itself we're going to need to add a class. Of form hyphen search. Then the next thing we going to want to do is add another div and the div will have a class of input-append, just like we kind of saw before.
And the slash div is going to come after the button. And what I'll do here is just a little bit of tabbing to make these things line up. There we go. Then, to the button itself, we can add some additional classes and so forth. But this is the most simple thing that we need to do. Just simply adding a class of form-search and then adding this div of input hyphen append and wrapping that around both the input box and the button. If you go ahead and save this and put it in a browser you'll see here now that my search box is nicely attached to the search blank that's next to it. That's kind of the default look for this.
Now what we can do is attach any of the other classes that we've seen in action to tweak the search box just a little bit more. For example, we can change the size of our search box, via class, just as we saw towards the beginning of this chapter. I could give it a span 3, for example. Maybe I don't want the search box quite that big. I could also change my button here, so I can add some additional classes for my search button like button hyphen info which makes our search button a lovely shade of light blue. Go ahead and save that, and look at that in the browser, now we have a different size search box, with a blue button next to it. If I wanted the search box smaller, I could certainly make a span of 1. Which would make a very small search box.
In fact, that's sort of cut in half there, doesn't it look like? So, maybe not quite that small, maybe more like a span of 2. And open that up in the browser. That's sort of more like your average search box size there. And of course you can make your search box as big or as little as you want using those span classes. So, this is a lovely treatment for a search, lots of sites have search these days. Or, this type of treatment where you have, a blank, and then a button next to it, this could be one of those Subscribe boxes, for example, instead of Search, the button might say Subscribe, and that would subscribe you to a newsletter also.
So, this is a great pattern that you can use. When you encounter these type of form controls on your website.
- 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