Multiline input form field using Bootstrap

<form> <h2>Get In Touch</h2><br> <input type="text" placeholder="Your first name" required> <input type="text" placeholder="Your last name" required> <input type="email" placeholder="Your email" required> <input type="text" placeholder="Your phone number"> <input type="text" rows="3" placeholder="What's up?" required><br> <button type="submit">Submit</button> <button type="clear">Clear</button> </form><!--/.span6--> 

Here's my form I'm using in Bootstrap. I'm trying to make my last input field span 6 columns across and 3 rows down, but it's only showing as 6 columns across and 1 row down. Any ideas on how to make my input box larger? Thanks.

2 Answers

I think the problem is that you are using type="text" instead of textarea. What you want is:

<textarea rows="3" placeholder="What's up?" required></textarea> 

To clarify, a type="text" will always be one row, where-as a textarea can be multiple.

The answer by Nick Mitchinson is for Bootstrap version 2.

If you are using Bootstrap version 3, then forms have changed a bit. For bootstrap 3, use the following instead:

<div> <div> <div> <textarea rows="3" placeholder="What's up?" required></textarea> </div> </div> </div> 

Where, col-md-6 will target medium sized devices. You can add col-xs-6 etc to target smaller devices.