Bootstrap input-group textarea with button

html, twitter-bootstrap

Solution

What you need to do is use the `input-group-addon` utility. This will allow the space of the button to take up the entire height. You will need to adjust the fill because it only works on hover (the color change). I'd recommend copying all the relevant class styles and make your own (for the color and background color so it's not the default Bootstrap style).

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="input-group">
    <textarea class="form-control custom-control" rows="3" style="resize:none"></textarea>     
    <span class="input-group-addon btn btn-primary">Send</span>
</div>

I know it's not in line with Bootstrap documentation, but their documentation assumes you aren't using a textarea.

Problem

I am trying to implement a simple submit input group. I currently have the following: ``` <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script> <div class="input-group"> <textarea class="form-control custom-control" rows="3" style="resize:none"></textarea> <span class="input-group-btn"> <button class="btn btn-primary"> <span>Send</span> </button> </span> </div> ``` I want the 'Send' button to take up the entire height of the text area. Is this doable?

Original source