Textarea
Angular Bootstrap Textarea input free examples, templates & tutorial
Responsive Angular 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.
-
<section class="gradient-custom">
<div class="container py-5">
<div class="row">
<div class="col-md-6 col-lg-5 col-xl-5 mb-4 mb-md-0">
<h5 class="font-weight-bold mb-3 text-center text-white">
Member
</h5>
<div class="card mask-custom">
<div class="card-body">
<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>
<span class="badge bg-danger float-end">1</span>
</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>
</div>
</div>
</div>
<div class="col-md-6 col-lg-7 col-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" />
<div class="card mask-custom">
<div class="card-header 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">
<i class="far fa-clock"></i> 12 mins ago
</p>
</div>
<div class="card-body">
<p class="mb-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</li>
<li class="d-flex justify-content-between mb-4">
<div class="card mask-custom w-100">
<div class="card-header 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">
<i class="far fa-clock"></i> 13 mins ago
</p>
</div>
<div class="card-body">
<p class="mb-0">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium.
</p>
</div>
</div>
<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" />
<div class="card mask-custom">
<div class="card-header 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">
<i class="far fa-clock"></i> 10 mins ago
</p>
</div>
<div class="card-body">
<p class="mb-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</li>
<li class="mb-3">
<mdb-form-control class="form-white">
<textarea mdbInput class="form-control" id="textAreaExample" rows="4"></textarea>
<label mdbLabel class="form-label" for="textAreaExample">Message</label>
</mdb-form-control>
</li>
<button type="button" class="btn btn-light btn-lg btn-rounded float-end">
Send
</button>
</ul>
</div>
</div>
</div>
</section>
.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, .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);
}