Textarea

Bootstrap Textarea input free examples, templates & tutorial

Responsive Textarea with Bootstrap 5. How to change textarea height, size, width and style. Examples of textarea editor, comment, contact form, checkout & chat.

Basic textarea example

A basic example of a simple textarea input.

Show code

Definition

A Bootstrap Textarea is an input dedicated to a large volume of text. It may be used in a variety of components like forms, comment sections, chats and forums.

Textarea can hold an unlimited number of characters, and the text renders in a fixed-width font.

The name attribute is needed to reference the form data after the form is submitted (if you omit the name attribute, no data from the text area will be submitted).

The id attribute is needed to associate the text area with a label. 

Textarea Height

To change the height of the textarea you need to change the value of the rows attribute.

Show code

Width

To change the width of the textarea use bootstrap sizing utilities or bootstrap grid system.

To learn more read Sizing docs.

Textarea with class .w-25

Textarea with class .w-50

Textarea with class .w-75

Textarea without sizing class

Show code

Usage examples

A few practical examples of textarea usage.

Contact form

A typical subscription form used when subscribing to a newsletter, asking a question in a FAQ section, or leaving a testimonial / review for a product.

Show code

Checkout form

An example of the extended form with typical checkout inputs like address form or a credit card form. You will probably encounter a textarea used like this during the checkout or shopping cart steps while using eCommerce websites.

Show code

Simple comment card

Textarea usage in a comment under the post on a social newsfeed.

avatar
Lily Coleman

Shared publicly - Jan 2020

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip consequat.

Like

Comment

Share
avatar
Show code

Add a comment

A simple review comment with a star rating.

avatar
Add a comment
Show code

Chat

Message textarea inside of a chat UI.

Member
  • avatar

    Brad Pitt

    12 mins ago

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  • Lara Croft

    13 mins ago

    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

    avatar
  • avatar

    Brad Pitt

    10 mins ago

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Show code