Multiline Input Form Field Using Bootstrap
Get in Touch Submit Clear 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...
<form class="span6">
<h2>Get In Touch</h2><br>
<input class="span6" type="text" placeholder="Your first name" required>
<input class="span6" type="text" placeholder="Your last name" required>
<input class="span6" type="email" placeholder="Your email" required>
<input class="span6" type="text" placeholder="Your phone number">
<input class="span6" type="text" rows="3" placeholder="What's up?" required><br>
<button type="submit" class="btn btn-primary">Submit</button>
<button type="clear" class="btn">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 class="span6" 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 class="form-horizontal">
<div class="form-group">
<div class="col-md-6">
<textarea class="form-control" 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.
Sarah Jenkins is a veteran tech journalist with over 12 years of experience covering artificial intelligence, mobile innovations, and digital ethics. Her insights have appeared in leading technology publications worldwide.
