How to Restrict Resizing of Bootstrap Textarea

By default, Bootstrap’s textarea allows users to resize it both vertically and horizontally.

Here’s how to restrict resizing to vertical only.

If you simply want to override Bootstrap’s textarea, you can do so like this:

<!-- custom.css -->

textarea {
  resize: vertical;
}

In the view (Haml):

= text_area_tag :text, '', class: 'form-control'

However, directly overriding can cause issues later. It’s better to use Sass to inherit Bootstrap’s default textarea styles and customize them.

Using Sass’s @extend, we inherit Bootstrap’s default textarea styles and create a new textarea-vertical class.

<!-- custom.scss -->

.textarea-vertical {
    @extend textarea !optional;
    resize: vertical;
}

Add the textarea-vertical class to the view:

In the view (Haml):

= text_area_tag :text, '', class: 'form-control textarea-vertical'