Set textarea width to 100% in bootstrap modal

Solution 1:

Try add min-width: 100% to style of your textarea:

<textarea class="form-control" style="min-width: 100%"></textarea>

Solution 2:

If i understand right this is what your looking for.

.form-control { width: 100%; }

See demo on JSFiddle.

Solution 3:

The provided solutions do resolve the issue. However, they also impact all other textarea elements with the same styling. I had to solve this and just created a more specific selector. Here is what I came up with to prevent invasive changes.

.modal-content textarea.form-control {
    max-width: 100%;
}

While this selector may seem aggressive. It helps restrain the textarea into the content area of the modal itself.

Additionally, the min-width solution presented, above, works with basic bootstrap modals, though I had issues when using it with angular-ui-bootstrap modals.

Solution 4:

You can also just simply add the attribute row="number of rows" and cols="number of columns" like

<div class="modal-body">
    <textarea class="form-control col-xs-12" rows="7" cols="50"></textarea>
</div>

This will increase the number of rows in the textarea that is much similar to style="min-height: 100%" 100% or 80% and min-width: 50% for width etc. Also row=7 changes the height and cols=50 changes the width of textarea.