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.

  • 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.

        
            
            <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
                   }
                 }
               };