Textarea

Vue Bootstrap Textarea input free examples, templates & tutorial

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

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.

Edit in sandbox 
<template>
  <section class="gradient-custom">
    <MDBContainer class="py-5">
      <MDBRow>
        <MDBCol md="6" lg="5" xl="5" class="mb-4 mb-md-0">
          <h5 class="font-weight-bold mb-3 text-center text-white">
            Member
          </h5>

          <MDBCard class="mask-custom">
            <MDBCardBody>
              <ul class="list-unstyled mb-0">
                <li
                  class="p-2 border-bottom"
                  style="
                    border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
                  "
                >
                  <a
                    href="#!"
                    class="d-flex justify-content-between link-light"
                  >
                    <div class="d-flex flex-row">
                      <img
                        src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-8.webp"
                        alt="avatar"
                        class="
                          rounded-circle
                          d-flex
                          align-self-center
                          me-3
                          shadow-1-strong
                        "
                        width="60"
                      />
                      <div class="pt-1">
                        <p class="fw-bold mb-0">John Doe</p>
                        <p class="small text-white">
                          Hello, Are you there?
                        </p>
                      </div>
                    </div>
                    <div class="pt-1">
                      <p class="small text-white mb-1">Just now</p>
                      <MDBBadge color="danger" class="float-end"
                        >1</MDBBadge
                      >
                    </div>
                  </a>
                </li>
                <li
                  class="p-2 border-bottom"
                  style="
                    border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
                  "
                >
                  <a
                    href="#!"
                    class="d-flex justify-content-between link-light"
                  >
                    <div class="d-flex flex-row">
                      <img
                        src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-1.webp"
                        alt="avatar"
                        class="
                          rounded-circle
                          d-flex
                          align-self-center
                          me-3
                          shadow-1-strong
                        "
                        width="60"
                      />
                      <div class="pt-1">
                        <p class="fw-bold mb-0">Danny Smith</p>
                        <p class="small text-white">
                          Lorem ipsum dolor sit.
                        </p>
                      </div>
                    </div>
                    <div class="pt-1">
                      <p class="small text-white mb-1">5 mins ago</p>
                    </div>
                  </a>
                </li>
                <li
                  class="p-2 border-bottom"
                  style="
                    border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
                  "
                >
                  <a
                    href="#!"
                    class="d-flex justify-content-between link-light"
                  >
                    <div class="d-flex flex-row">
                      <img
                        src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-2.webp"
                        alt="avatar"
                        class="
                          rounded-circle
                          d-flex
                          align-self-center
                          me-3
                          shadow-1-strong
                        "
                        width="60"
                      />
                      <div class="pt-1">
                        <p class="fw-bold mb-0">Alex Steward</p>
                        <p class="small text-white">
                          Lorem ipsum dolor sit.
                        </p>
                      </div>
                    </div>
                    <div class="pt-1">
                      <p class="small text-white mb-1">Yesterday</p>
                    </div>
                  </a>
                </li>
                <li
                  class="p-2 border-bottom"
                  style="
                    border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
                  "
                >
                  <a
                    href="#!"
                    class="d-flex justify-content-between link-light"
                  >
                    <div class="d-flex flex-row">
                      <img
                        src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-3.webp"
                        alt="avatar"
                        class="
                          rounded-circle
                          d-flex
                          align-self-center
                          me-3
                          shadow-1-strong
                        "
                        width="60"
                      />
                      <div class="pt-1">
                        <p class="fw-bold mb-0">Ashley Olsen</p>
                        <p class="small text-white">
                          Lorem ipsum dolor sit.
                        </p>
                      </div>
                    </div>
                    <div class="pt-1">
                      <p class="small text-white mb-1">Yesterday</p>
                    </div>
                  </a>
                </li>
                <li
                  class="p-2 border-bottom"
                  style="
                    border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
                  "
                >
                  <a
                    href="#!"
                    class="d-flex justify-content-between link-light"
                  >
                    <div class="d-flex flex-row">
                      <img
                        src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-4.webp"
                        alt="avatar"
                        class="
                          rounded-circle
                          d-flex
                          align-self-center
                          me-3
                          shadow-1-strong
                        "
                        width="60"
                      />
                      <div class="pt-1">
                        <p class="fw-bold mb-0">Kate Moss</p>
                        <p class="small text-white">
                          Lorem ipsum dolor sit.
                        </p>
                      </div>
                    </div>
                    <div class="pt-1">
                      <p class="small text-white mb-1">Yesterday</p>
                    </div>
                  </a>
                </li>
                <li
                  class="p-2 border-bottom"
                  style="
                    border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
                  "
                >
                  <a
                    href="#!"
                    class="d-flex justify-content-between link-light"
                  >
                    <div class="d-flex flex-row">
                      <img
                        src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-5.webp"
                        alt="avatar"
                        class="
                          rounded-circle
                          d-flex
                          align-self-center
                          me-3
                          shadow-1-strong
                        "
                        width="60"
                      />
                      <div class="pt-1">
                        <p class="fw-bold mb-0">Lara Croft</p>
                        <p class="small text-white">
                          Lorem ipsum dolor sit.
                        </p>
                      </div>
                    </div>
                    <div class="pt-1">
                      <p class="small text-white mb-1">Yesterday</p>
                    </div>
                  </a>
                </li>
                <li class="p-2">
                  <a
                    href="#!"
                    class="d-flex justify-content-between link-light"
                  >
                    <div class="d-flex flex-row">
                      <img
                        src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-6.webp"
                        alt="avatar"
                        class="
                          rounded-circle
                          d-flex
                          align-self-center
                          me-3
                          shadow-1-strong
                        "
                        width="60"
                      />
                      <div class="pt-1">
                        <p class="fw-bold mb-0">Brad Pitt</p>
                        <p class="small text-white">
                          Lorem ipsum dolor sit.
                        </p>
                      </div>
                    </div>
                    <div class="pt-1">
                      <p class="small text-white mb-1">5 mins ago</p>
                      <span class="text-white float-end"
                        ><i class="fas fa-check" aria-hidden="true"></i
                      ></span>
                    </div>
                  </a>
                </li>
              </ul>
            </MDBCardBody>
          </MDBCard>
        </MDBCol>

        <MDBCol md="6" lg="7" xl="7">
          <ul class="list-unstyled text-white">
            <li class="d-flex justify-content-between mb-4">
              <img
                src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-6.webp"
                alt="avatar"
                class="
                  rounded-circle
                  d-flex
                  align-self-start
                  me-3
                  shadow-1-strong
                "
                width="60"
              />
              <MDBCard class="mask-custom">
                <MDBCardHeader
                  class="d-flex justify-content-between p-3"
                  style="border-bottom: 1px solid rgba(255, 255, 255, 0.3)"
                >
                  <p class="fw-bold mb-0">Brad Pitt</p>
                  <p class="text-light small mb-0">
                    <MDBIcon iconStyle="far" icon="clock" /> 12 mins ago
                  </p>
                </MDBCardHeader>
                <MDBCardBody>
                  <p class="mb-0">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                    sed do eiusmod tempor incididunt ut labore et dolore
                    magna aliqua.
                  </p>
                </MDBCardBody>
              </MDBCard>
            </li>
            <li class="d-flex justify-content-between mb-4">
              <MDBCard class="mask-custom w-100">
                <MDBCardHeader
                  class="d-flex justify-content-between p-3"
                  style="border-bottom: 1px solid rgba(255, 255, 255, 0.3)"
                >
                  <p class="fw-bold mb-0">Lara Croft</p>
                  <p class="text-light small mb-0">
                    <MDBIcon iconStyle="far" icon="clock" /> 13 mins ago
                  </p>
                </MDBCardHeader>
                <MDBCardBody>
                  <p class="mb-0">
                    Sed ut perspiciatis unde omnis iste natus error sit
                    voluptatem accusantium doloremque laudantium.
                  </p>
                </MDBCardBody>
              </MDBCard>
              <img
                src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-5.webp"
                alt="avatar"
                class="
                  rounded-circle
                  d-flex
                  align-self-start
                  ms-3
                  shadow-1-strong
                "
                width="60"
              />
            </li>
            <li class="d-flex justify-content-between mb-4">
              <img
                src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-6.webp"
                alt="avatar"
                class="
                  rounded-circle
                  d-flex
                  align-self-start
                  me-3
                  shadow-1-strong
                "
                width="60"
              />
              <MDBCard class="mask-custom">
                <MDBCardHeader
                  class="d-flex justify-content-between p-3"
                  style="border-bottom: 1px solid rgba(255, 255, 255, 0.3)"
                >
                  <p class="fw-bold mb-0">Brad Pitt</p>
                  <p class="text-light small mb-0">
                    <MDBIcon iconStyle="far" icon="clock" /> 10 mins ago
                  </p>
                </MDBCardHeader>
                <MDBCardBody>
                  <p class="mb-0">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                    sed do eiusmod tempor incididunt ut labore et dolore
                    magna aliqua.
                  </p>
                </MDBCardBody>
              </MDBCard>
            </li>
            <li class="mb-3">
              <MDBTextarea
                white
                v-model="textarea"
                id="textAreaExample"
                label="message"
                rows="4"
              ></MDBTextarea>
            </li>
            <MDBBtn color="light" rounded class="float-end"> Send </MDBBtn>
          </ul>
        </MDBCol>
      </MDBRow>
    </MDBContainer>
  </section>
</template>
.gradient-custom {
  /* fallback for old browsers */
  background: #fccb90;

  /* Chrome 10-25, Safari 5.1-6 */
  background: -webkit-linear-gradient(
    to bottom right,
    rgba(252, 203, 144, 1),
    rgba(213, 126, 235, 1)
  );

  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  background: linear-gradient(
    to bottom right,
    rgba(252, 203, 144, 1),
    rgba(213, 126, 235, 1)
  );
}

.mask-custom {
  background: rgba(24, 24, 16, 0.2);
  border-radius: 2em;
  backdrop-filter: blur(15px);
  border: 2px solid rgba(255, 255, 255, 0.05);
  background-clip: padding-box;
  box-shadow: 10px 10px 10px rgba(46, 54, 68, 0.03);
}
import {
   MDBTextarea,
   MDBContainer,
   MDBRow,
   MDBCol,
   MDBBadge,
   MDBCard,
   MDBCardBody,
   MDBCardHeader,
   MDBIcon
 } from "mdb-vue-ui-kit";
 import { ref } from "vue";
 export default {
   components: {
     MDBTextarea,
     MDBContainer,
     MDBRow,
     MDBCol,
     MDBBadge,
     MDBCard,
     MDBCardBody,
     MDBCardHeader,
     MDBIcon
   },
   setup(){
     const textarea = ref('');
     return {
       textarea
     }
   }
 };