Textarea scrollbar

Bootstrap 5 Textarea scrollbar component

Responsive Textarea scrollbar built with Bootstrap 5. How to get a textarea scrollbar and change its height or width.

Basic example

A scroll bar will automatically appear when there is more text in the <textarea> element than it can hold.

Edit in sandbox 
        
            
                <div data-mdb-input-init class="form-outline w-25">
                    <textarea class="form-control" id="textAreaExample1" rows="6"></textarea>
                    <label class="form-label" for="textAreaExample">Message</label>
                </div>

                <div data-mdb-input-init class="form-outline w-25">
                    <textarea class="form-control" id="textAreaExample1" rows="6">Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum necessitatibus qui ipsa atque voluptate porro, aut odio hic magnam aperiam culpa sint ipsam iure ea ab suscipit nostrum commodi! Enim nihil modi pariatur laborum soluta? Labore, nostrum fugiat architecto tempore deleniti rerum a necessitatibus officia ea at, tenetur adipisci maiores.</textarea>
                    <label class="form-label" for="textAreaExample">Message</label>
                </div>

Size

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

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

Edit in sandbox 
        
            
                <div data-mdb-input-init class="form-outline w-50">
                  <textarea class="form-control" id="textAreaExample1" rows="6">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum necessitatibus qui ipsa atque voluptate porro, aut odio hic magnam aperiam culpa sint ipsam iure ea ab suscipit nostrum commodi! Enim nihil modi pariatur laborum soluta? Labore, nostrum fugiat architecto tempore deleniti rerum a necessitatibus officia ea at, tenetur adipisci maiores.</textarea>
                  <label class="form-label" for="textAreaExample">Message</label>
              </div>

              <div data-mdb-input-init class="form-outline w-50">
                <textarea class="form-control" id="textAreaExample1" rows="4">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum necessitatibus qui ipsa atque voluptate porro, aut odio hic magnam aperiam culpa sint ipsam iure ea ab suscipit nostrum commodi! Enim nihil modi pariatur laborum soluta? Labore, nostrum fugiat architecto tempore deleniti rerum a necessitatibus officia ea at, tenetur adipisci maiores.</textarea>
                <label class="form-label" for="textAreaExample">Message</label>
            </div>