Bootstrap input-group textarea with button

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="https://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-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.

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)