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
-
John Doe
Hello, Are you there?
Just now
1 -
Danny Smith
Lorem ipsum dolor sit.
5 mins ago
-
Alex Steward
Lorem ipsum dolor sit.
Yesterday
-
Ashley Olsen
Lorem ipsum dolor sit.
Yesterday
-
Kate Moss
Lorem ipsum dolor sit.
Yesterday
-
Lara Croft
Lorem ipsum dolor sit.
Yesterday
-
Brad Pitt
Lorem ipsum dolor sit.
5 mins ago
-
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.
-
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
}
}
};