Chat

Bootstrap 5 Chat component

Responsive Chat built with Bootstrap 5. Many variants of chatbox UI, mobile app, messages box, chat window, chatbot UI, group chat, chat widget, web chat & more

Basic example

Simple chatbox template for Bootstrap, you can use it as a popup chat window on your website or even create your own chatbot based on this UI.

Live chat

avatar 1

Hello and thank you for visiting MDBootstrap. Please click the video below.

Thank you, I really like your product.

avatar 1
avatar 1

...

        
            
          <section style="background-color: #eee;">
            <div class="container py-5">

              <div class="row d-flex justify-content-center">
                <div class="col-md-8 col-lg-6 col-xl-4">

                  <div class="card" id="chat1" style="border-radius: 15px;">
                    <div
                      class="card-header d-flex justify-content-between align-items-center p-3 bg-info text-white border-bottom-0"
                      style="border-top-left-radius: 15px; border-top-right-radius: 15px;">
                      <i class="fas fa-angle-left"></i>
                      <p class="mb-0 fw-bold">Live chat</p>
                      <i class="fas fa-times"></i>
                    </div>
                    <div class="card-body">

                      <div class="d-flex flex-row justify-content-start mb-4">
                        <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava1-bg.webp"
                          alt="avatar 1" style="width: 45px; height: 100%;">
                        <div class="p-3 ms-3" style="border-radius: 15px; background-color: rgba(57, 192, 237,.2);">
                          <p class="small mb-0">Hello and thank you for visiting MDBootstrap. Please click the video
                            below.</p>
                        </div>
                      </div>

                      <div class="d-flex flex-row justify-content-end mb-4">
                        <div class="p-3 me-3 border" style="border-radius: 15px; background-color: #fbfbfb;">
                          <p class="small mb-0">Thank you, I really like your product.</p>
                        </div>
                        <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava2-bg.webp"
                          alt="avatar 1" style="width: 45px; height: 100%;">
                      </div>

                      <div class="d-flex flex-row justify-content-start mb-4">
                        <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava1-bg.webp"
                          alt="avatar 1" style="width: 45px; height: 100%;">
                        <div class="ms-3" style="border-radius: 15px;">
                          <div class="bg-image">
                            <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/screenshot1.webp"
                              style="border-radius: 15px;" alt="video">
                            <a href="#!">
                              <div class="mask"></div>
                            </a>
                          </div>
                        </div>
                      </div>

                      <div class="d-flex flex-row justify-content-start mb-4">
                        <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava1-bg.webp"
                          alt="avatar 1" style="width: 45px; height: 100%;">
                        <div class="p-3 ms-3" style="border-radius: 15px; background-color: rgba(57, 192, 237,.2);">
                          <p class="small mb-0">...</p>
                        </div>
                      </div>

                      <div class="form-outline">
                        <textarea class="form-control" id="textAreaExample" rows="4"></textarea>
                        <label class="form-label" for="textAreaExample">Type your message</label>
                      </div>

                    </div>
                  </div>

                </div>
              </div>

            </div>
          </section>
          
        
    
        
            
          #chat1 .form-outline .form-control~.form-notch div {
          pointer-events: none;
          border: 1px solid;
          border-color: #eee;
          box-sizing: border-box;
          background: transparent;
          }

          #chat1 .form-outline .form-control~.form-notch .form-notch-leading {
          left: 0;
          top: 0;
          height: 100%;
          border-right: none;
          border-radius: .65rem 0 0 .65rem;
          }

          #chat1 .form-outline .form-control~.form-notch .form-notch-middle {
          flex: 0 0 auto;
          max-width: calc(100% - 1rem);
          height: 100%;
          border-right: none;
          border-left: none;
          }

          #chat1 .form-outline .form-control~.form-notch .form-notch-trailing {
          flex-grow: 1;
          height: 100%;
          border-left: none;
          border-radius: 0 .65rem .65rem 0;
          }

          #chat1 .form-outline .form-control:focus~.form-notch .form-notch-leading {
          border-top: 0.125rem solid #39c0ed;
          border-bottom: 0.125rem solid #39c0ed;
          border-left: 0.125rem solid #39c0ed;
          }

          #chat1 .form-outline .form-control:focus~.form-notch .form-notch-leading,
          #chat1 .form-outline .form-control.active~.form-notch .form-notch-leading {
          border-right: none;
          transition: all 0.2s linear;
          }

          #chat1 .form-outline .form-control:focus~.form-notch .form-notch-middle {
          border-bottom: 0.125rem solid;
          border-color: #39c0ed;
          }

          #chat1 .form-outline .form-control:focus~.form-notch .form-notch-middle,
          #chat1 .form-outline .form-control.active~.form-notch .form-notch-middle {
          border-top: none;
          border-right: none;
          border-left: none;
          transition: all 0.2s linear;
          }

          #chat1 .form-outline .form-control:focus~.form-notch .form-notch-trailing {
          border-top: 0.125rem solid #39c0ed;
          border-bottom: 0.125rem solid #39c0ed;
          border-right: 0.125rem solid #39c0ed;
          }

          #chat1 .form-outline .form-control:focus~.form-notch .form-notch-trailing,
          #chat1 .form-outline .form-control.active~.form-notch .form-notch-trailing {
          border-left: none;
          transition: all 0.2s linear;
          }

          #chat1 .form-outline .form-control:focus~.form-label {
          color: #39c0ed;
          }

          #chat1 .form-outline .form-control~.form-label {
          color: #bfbfbf;
          }
          
        
    

Simple Chat Application

This chat application theme also includes an emoji and file input buttons. Check out our plugin to implement an advanced file uploadfunctionality or use a basic file input form to make it work on production.

Chat
avatar 1

Hi

How are you ...???

What are you doing tomorrow? Can we come up a bar?

23:58

Today

Hiii, I'm good.

How are you doing?

Long time no see! Tomorrow office. will be free on sunday.

00:06

avatar 1
avatar 1

Okay

We will go on Sunday?

00:07

That's awesome!

I will meet you Sandon Square sharp at 10 AM

Is that okay?

00:09

avatar 1
avatar 1

Okay i will meet you on Sandon Square

00:11

Do you have pictures of Matley Marriage?

00:11

avatar 1
avatar 1

Sorry I don't have. i changed my phone.

00:13

Okay then see you on sunday!!

00:15

avatar 1
        
            
          <section style="background-color: #eee;">
            <div class="container py-5">

              <div class="row d-flex justify-content-center">
                <div class="col-md-10 col-lg-8 col-xl-6">

                  <div class="card" id="chat2">
                    <div class="card-header d-flex justify-content-between align-items-center p-3">
                      <h5 class="mb-0">Chat</h5>
                      <button type="button" class="btn btn-primary btn-sm" data-mdb-ripple-color="dark">Let's Chat
                        App</button>
                    </div>
                    <div class="card-body" data-mdb-perfect-scrollbar="true" style="position: relative; height: 400px">

                      <div class="d-flex flex-row justify-content-start">
                        <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava3-bg.webp"
                          alt="avatar 1" style="width: 45px; height: 100%;">
                        <div>
                          <p class="small p-2 ms-3 mb-1 rounded-3" style="background-color: #f5f6f7;">Hi</p>
                          <p class="small p-2 ms-3 mb-1 rounded-3" style="background-color: #f5f6f7;">How are you ...???
                          </p>
                          <p class="small p-2 ms-3 mb-1 rounded-3" style="background-color: #f5f6f7;">What are you doing
                            tomorrow? Can we come up a bar?</p>
                          <p class="small ms-3 mb-3 rounded-3 text-muted">23:58</p>
                        </div>
                      </div>

                      <div class="divider d-flex align-items-center mb-4">
                        <p class="text-center mx-3 mb-0" style="color: #a2aab7;">Today</p>
                      </div>

                      <div class="d-flex flex-row justify-content-end mb-4 pt-1">
                        <div>
                          <p class="small p-2 me-3 mb-1 text-white rounded-3 bg-primary">Hiii, I'm good.</p>
                          <p class="small p-2 me-3 mb-1 text-white rounded-3 bg-primary">How are you doing?</p>
                          <p class="small p-2 me-3 mb-1 text-white rounded-3 bg-primary">Long time no see! Tomorrow
                            office. will
                            be free on sunday.</p>
                          <p class="small me-3 mb-3 rounded-3 text-muted d-flex justify-content-end">00:06</p>
                        </div>
                        <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava4-bg.webp"
                          alt="avatar 1" style="width: 45px; height: 100%;">
                      </div>

                      <div class="d-flex flex-row justify-content-start mb-4">
                        <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava3-bg.webp"
                          alt="avatar 1" style="width: 45px; height: 100%;">
                        <div>
                          <p class="small p-2 ms-3 mb-1 rounded-3" style="background-color: #f5f6f7;">Okay</p>
                          <p class="small p-2 ms-3 mb-1 rounded-3" style="background-color: #f5f6f7;">We will go on
                            Sunday?</p>
                          <p class="small ms-3 mb-3 rounded-3 text-muted">00:07</p>
                        </div>
                      </div>

                      <div class="d-flex flex-row justify-content-end mb-4">
                        <div>
                          <p class="small p-2 me-3 mb-1 text-white rounded-3 bg-primary">That's awesome!</p>
                          <p class="small p-2 me-3 mb-1 text-white rounded-3 bg-primary">I will meet you Sandon Square
                            sharp at
                            10 AM</p>
                          <p class="small p-2 me-3 mb-1 text-white rounded-3 bg-primary">Is that okay?</p>
                          <p class="small me-3 mb-3 rounded-3 text-muted d-flex justify-content-end">00:09</p>
                        </div>
                        <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava4-bg.webp"
                          alt="avatar 1" style="width: 45px; height: 100%;">
                      </div>

                      <div class="d-flex flex-row justify-content-start mb-4">
                        <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava3-bg.webp"
                          alt="avatar 1" style="width: 45px; height: 100%;">
                        <div>
                          <p class="small p-2 ms-3 mb-1 rounded-3" style="background-color: #f5f6f7;">Okay i will meet
                            you on
                            Sandon Square</p>
                          <p class="small ms-3 mb-3 rounded-3 text-muted">00:11</p>
                        </div>
                      </div>

                      <div class="d-flex flex-row justify-content-end mb-4">
                        <div>
                          <p class="small p-2 me-3 mb-1 text-white rounded-3 bg-primary">Do you have pictures of Matley
                            Marriage?</p>
                          <p class="small me-3 mb-3 rounded-3 text-muted d-flex justify-content-end">00:11</p>
                        </div>
                        <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava4-bg.webp"
                          alt="avatar 1" style="width: 45px; height: 100%;">
                      </div>

                      <div class="d-flex flex-row justify-content-start mb-4">
                        <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava3-bg.webp"
                          alt="avatar 1" style="width: 45px; height: 100%;">
                        <div>
                          <p class="small p-2 ms-3 mb-1 rounded-3" style="background-color: #f5f6f7;">Sorry I don't
                            have. i
                            changed my phone.</p>
                          <p class="small ms-3 mb-3 rounded-3 text-muted">00:13</p>
                        </div>
                      </div>

                      <div class="d-flex flex-row justify-content-end">
                        <div>
                          <p class="small p-2 me-3 mb-1 text-white rounded-3 bg-primary">Okay then see you on sunday!!
                          </p>
                          <p class="small me-3 mb-3 rounded-3 text-muted d-flex justify-content-end">00:15</p>
                        </div>
                        <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava4-bg.webp"
                          alt="avatar 1" style="width: 45px; height: 100%;">
                      </div>

                    </div>
                    <div class="card-footer text-muted d-flex justify-content-start align-items-center p-3">
                      <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava3-bg.webp"
                        alt="avatar 3" style="width: 40px; height: 100%;">
                      <input type="text" class="form-control form-control-lg" id="exampleFormControlInput1"
                        placeholder="Type message">
                      <a class="ms-1 text-muted" href="#!"><i class="fas fa-paperclip"></i></a>
                      <a class="ms-3 text-muted" href="#!"><i class="fas fa-smile"></i></a>
                      <a class="ms-3" href="#!"><i class="fas fa-paper-plane"></i></a>
                    </div>
                  </div>

                </div>
              </div>

            </div>
          </section>
          
        
    
        
            
          #chat2 .form-control {
          border-color: transparent;
          }

          #chat2 .form-control:focus {
          border-color: transparent;
          box-shadow: inset 0px 0px 0px 1px transparent;
          }

          .divider:after,
          .divider:before {
          content: "";
          flex: 1;
          height: 1px;
          background: #eee;
          }
          
        
    

Chat window

A bigger chat window would be a perfect fit for chat rooms and group chat apps.

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

        
            
          <section style="background-color: #eee;">
            <div class="container py-5">

              <div class="row">

                <div class="col-md-6 col-lg-5 col-xl-4 mb-4 mb-md-0">

                  <h5 class="font-weight-bold mb-3 text-center text-lg-start">Member</h5>

                  <div class="card">
                    <div class="card-body">

                      <ul class="list-unstyled mb-0">
                        <li class="p-2 border-bottom" style="background-color: #eee;">
                          <a href="#!" class="d-flex justify-content-between">
                            <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-muted">Hello, Are you there?</p>
                              </div>
                            </div>
                            <div class="pt-1">
                              <p class="small text-muted mb-1">Just now</p>
                              <span class="badge bg-danger float-end">1</span>
                            </div>
                          </a>
                        </li>
                        <li class="p-2 border-bottom">
                          <a href="#!" class="d-flex justify-content-between">
                            <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-muted">Lorem ipsum dolor sit.</p>
                              </div>
                            </div>
                            <div class="pt-1">
                              <p class="small text-muted mb-1">5 mins ago</p>
                            </div>
                          </a>
                        </li>
                        <li class="p-2 border-bottom">
                          <a href="#!" class="d-flex justify-content-between">
                            <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-muted">Lorem ipsum dolor sit.</p>
                              </div>
                            </div>
                            <div class="pt-1">
                              <p class="small text-muted mb-1">Yesterday</p>
                            </div>
                          </a>
                        </li>
                        <li class="p-2 border-bottom">
                          <a href="#!" class="d-flex justify-content-between">
                            <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-muted">Lorem ipsum dolor sit.</p>
                              </div>
                            </div>
                            <div class="pt-1">
                              <p class="small text-muted mb-1">Yesterday</p>
                            </div>
                          </a>
                        </li>
                        <li class="p-2 border-bottom">
                          <a href="#!" class="d-flex justify-content-between">
                            <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-muted">Lorem ipsum dolor sit.</p>
                              </div>
                            </div>
                            <div class="pt-1">
                              <p class="small text-muted mb-1">Yesterday</p>
                            </div>
                          </a>
                        </li>
                        <li class="p-2 border-bottom">
                          <a href="#!" class="d-flex justify-content-between">
                            <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-muted">Lorem ipsum dolor sit.</p>
                              </div>
                            </div>
                            <div class="pt-1">
                              <p class="small text-muted mb-1">Yesterday</p>
                            </div>
                          </a>
                        </li>
                        <li class="p-2">
                          <a href="#!" class="d-flex justify-content-between">
                            <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-muted">Lorem ipsum dolor sit.</p>
                              </div>
                            </div>
                            <div class="pt-1">
                              <p class="small text-muted mb-1">5 mins ago</p>
                              <span class="text-muted 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-8">

                  <ul class="list-unstyled">
                    <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">
                        <div class="card-header d-flex justify-content-between p-3">
                          <p class="fw-bold mb-0">Brad Pitt</p>
                          <p class="text-muted 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 w-100">
                        <div class="card-header d-flex justify-content-between p-3">
                          <p class="fw-bold mb-0">Lara Croft</p>
                          <p class="text-muted 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">
                        <div class="card-header d-flex justify-content-between p-3">
                          <p class="fw-bold mb-0">Brad Pitt</p>
                          <p class="text-muted 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="bg-white mb-3">
                      <div class="form-outline">
                        <textarea class="form-control" id="textAreaExample2" rows="4"></textarea>
                        <label class="form-label" for="textAreaExample2">Message</label>
                      </div>
                    </li>
                    <button type="button" class="btn btn-info btn-rounded float-end">Send</button>
                  </ul>

                </div>

              </div>

            </div>
          </section>
          
        
    

Awesome Chat Messages Box

You can also experiment with details of your chat design. For example you could use a more detailed send time & date format or add unread messages notifications with Badges.

Chat messages
20

Timona Siera

23 Jan 2:00 pm

avatar 1

For what reason would it be advisable for me to think about business content?

23 Jan 2:05 pm

Johny Bullock

Thank you for your believe in our supports

avatar 1

Timona Siera

23 Jan 5:37 pm

avatar 1

Lorem ipsum dolor sit amet consectetur adipisicing elit similique quae consequatur

23 Jan 6:10 pm

Johny Bullock

Dolorum quasi voluptates quas amet in repellendus perspiciatis fugiat

avatar 1
        
            
          <section style="background-color: #eee;">
            <div class="container py-5">

              <div class="row d-flex justify-content-center">
                <div class="col-md-8 col-lg-6 col-xl-4">

                  <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center p-3"
                      style="border-top: 4px solid #ffa900;">
                      <h5 class="mb-0">Chat messages</h5>
                      <div class="d-flex flex-row align-items-center">
                        <span class="badge bg-warning me-3">20</span>
                        <i class="fas fa-minus me-3 text-muted fa-xs"></i>
                        <i class="fas fa-comments me-3 text-muted fa-xs"></i>
                        <i class="fas fa-times text-muted fa-xs"></i>
                      </div>
                    </div>
                    <div class="card-body" data-mdb-perfect-scrollbar="true" style="position: relative; height: 400px">

                      <div class="d-flex justify-content-between">
                        <p class="small mb-1">Timona Siera</p>
                        <p class="small mb-1 text-muted">23 Jan 2:00 pm</p>
                      </div>
                      <div class="d-flex flex-row justify-content-start">
                        <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava5-bg.webp"
                          alt="avatar 1" style="width: 45px; height: 100%;">
                        <div>
                          <p class="small p-2 ms-3 mb-3 rounded-3" style="background-color: #f5f6f7;">For what reason
                            would it
                            be advisable for me to think about business content?</p>
                        </div>
                      </div>

                      <div class="d-flex justify-content-between">
                        <p class="small mb-1 text-muted">23 Jan 2:05 pm</p>
                        <p class="small mb-1">Johny Bullock</p>
                      </div>
                      <div class="d-flex flex-row justify-content-end mb-4 pt-1">
                        <div>
                          <p class="small p-2 me-3 mb-3 text-white rounded-3 bg-warning">Thank you for your believe in
                            our
                            supports</p>
                        </div>
                        <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava6-bg.webp"
                          alt="avatar 1" style="width: 45px; height: 100%;">
                      </div>

                      <div class="d-flex justify-content-between">
                        <p class="small mb-1">Timona Siera</p>
                        <p class="small mb-1 text-muted">23 Jan 5:37 pm</p>
                      </div>
                      <div class="d-flex flex-row justify-content-start">
                        <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava5-bg.webp"
                          alt="avatar 1" style="width: 45px; height: 100%;">
                        <div>
                          <p class="small p-2 ms-3 mb-3 rounded-3" style="background-color: #f5f6f7;">Lorem ipsum dolor
                            sit amet
                            consectetur adipisicing elit similique quae consequatur</p>
                        </div>
                      </div>

                      <div class="d-flex justify-content-between">
                        <p class="small mb-1 text-muted">23 Jan 6:10 pm</p>
                        <p class="small mb-1">Johny Bullock</p>
                      </div>
                      <div class="d-flex flex-row justify-content-end mb-4 pt-1">
                        <div>
                          <p class="small p-2 me-3 mb-3 text-white rounded-3 bg-warning">Dolorum quasi voluptates quas
                            amet in
                            repellendus perspiciatis fugiat</p>
                        </div>
                        <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava6-bg.webp"
                          alt="avatar 1" style="width: 45px; height: 100%;">
                      </div>

                    </div>
                    <div class="card-footer text-muted d-flex justify-content-start align-items-center p-3">
                      <div class="input-group mb-0">
                        <input type="text" class="form-control" placeholder="Type message"
                          aria-label="Recipient's username" aria-describedby="button-addon2" />
                        <button class="btn btn-warning" type="button" id="button-addon2" style="padding-top: .55rem;">
                          Button
                        </button>
                      </div>
                    </div>
                  </div>

                </div>
              </div>

            </div>
          </section>
          
        
    

Chat window with gradient background

Customize your chat with different backgrounds and styles. In the example below we've used our Gradient Generator for creating a colorful background and Mask Generator to make the chat bubbles resemble glass panels with glassmorphism effect.

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

        
            
          <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,.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,.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,.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,.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,.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,.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,.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,.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,.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">
                      <div class="form-outline form-white">
                        <textarea class="form-control" id="textAreaExample3" rows="4"></textarea>
                        <label class="form-label" for="textAreaExample3">Message</label>
                      </div>
                    </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);
          }
          
        
    

Chatroom template with scrollbar

If the recipients list in your chatroom app gets too long to display, you should consider adding a Scrollbar to it.

avatar 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

12:00 PM | Aug 13

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

12:00 PM | Aug 13

avatar 1
avatar 1

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

12:00 PM | Aug 13

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

12:00 PM | Aug 13

avatar 1
avatar 1

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

12:00 PM | Aug 13

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

12:00 PM | Aug 13

avatar 1
avatar 1

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

12:00 PM | Aug 13

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?

12:00 PM | Aug 13

avatar 1
avatar 3
        
            
          <section style="background-color: #CDC4F9;">
            <div class="container py-5">

              <div class="row">
                <div class="col-md-12">

                  <div class="card" id="chat3" style="border-radius: 15px;">
                    <div class="card-body">

                      <div class="row">
                        <div class="col-md-6 col-lg-5 col-xl-4 mb-4 mb-md-0">

                          <div class="p-3">

                            <div class="input-group rounded mb-3">
                              <input type="search" class="form-control rounded" placeholder="Search" aria-label="Search"
                                aria-describedby="search-addon" />
                              <span class="input-group-text border-0" id="search-addon">
                                <i class="fas fa-search"></i>
                              </span>
                            </div>

                            <div data-mdb-perfect-scrollbar="true" style="position: relative; height: 400px">
                              <ul class="list-unstyled mb-0">
                                <li class="p-2 border-bottom">
                                  <a href="#!" class="d-flex justify-content-between">
                                    <div class="d-flex flex-row">
                                      <div>
                                        <img
                                          src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava1-bg.webp"
                                          alt="avatar" class="d-flex align-self-center me-3" width="60">
                                        <span class="badge bg-success badge-dot"></span>
                                      </div>
                                      <div class="pt-1">
                                        <p class="fw-bold mb-0">Marie Horwitz</p>
                                        <p class="small text-muted">Hello, Are you there?</p>
                                      </div>
                                    </div>
                                    <div class="pt-1">
                                      <p class="small text-muted mb-1">Just now</p>
                                      <span class="badge bg-danger rounded-pill float-end">3</span>
                                    </div>
                                  </a>
                                </li>
                                <li class="p-2 border-bottom">
                                  <a href="#!" class="d-flex justify-content-between">
                                    <div class="d-flex flex-row">
                                      <div>
                                        <img
                                          src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava2-bg.webp"
                                          alt="avatar" class="d-flex align-self-center me-3" width="60">
                                        <span class="badge bg-warning badge-dot"></span>
                                      </div>
                                      <div class="pt-1">
                                        <p class="fw-bold mb-0">Alexa Chung</p>
                                        <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                      </div>
                                    </div>
                                    <div class="pt-1">
                                      <p class="small text-muted mb-1">5 mins ago</p>
                                      <span class="badge bg-danger rounded-pill float-end">2</span>
                                    </div>
                                  </a>
                                </li>
                                <li class="p-2 border-bottom">
                                  <a href="#!" class="d-flex justify-content-between">
                                    <div class="d-flex flex-row">
                                      <div>
                                        <img
                                          src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava3-bg.webp"
                                          alt="avatar" class="d-flex align-self-center me-3" width="60">
                                        <span class="badge bg-success badge-dot"></span>
                                      </div>
                                      <div class="pt-1">
                                        <p class="fw-bold mb-0">Danny McChain</p>
                                        <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                      </div>
                                    </div>
                                    <div class="pt-1">
                                      <p class="small text-muted mb-1">Yesterday</p>
                                    </div>
                                  </a>
                                </li>
                                <li class="p-2 border-bottom">
                                  <a href="#!" class="d-flex justify-content-between">
                                    <div class="d-flex flex-row">
                                      <div>
                                        <img
                                          src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava4-bg.webp"
                                          alt="avatar" class="d-flex align-self-center me-3" width="60">
                                        <span class="badge bg-danger badge-dot"></span>
                                      </div>
                                      <div class="pt-1">
                                        <p class="fw-bold mb-0">Ashley Olsen</p>
                                        <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                      </div>
                                    </div>
                                    <div class="pt-1">
                                      <p class="small text-muted mb-1">Yesterday</p>
                                    </div>
                                  </a>
                                </li>
                                <li class="p-2 border-bottom">
                                  <a href="#!" class="d-flex justify-content-between">
                                    <div class="d-flex flex-row">
                                      <div>
                                        <img
                                          src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava5-bg.webp"
                                          alt="avatar" class="d-flex align-self-center me-3" width="60">
                                        <span class="badge bg-warning badge-dot"></span>
                                      </div>
                                      <div class="pt-1">
                                        <p class="fw-bold mb-0">Kate Moss</p>
                                        <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                      </div>
                                    </div>
                                    <div class="pt-1">
                                      <p class="small text-muted mb-1">Yesterday</p>
                                    </div>
                                  </a>
                                </li>
                                <li class="p-2">
                                  <a href="#!" class="d-flex justify-content-between">
                                    <div class="d-flex flex-row">
                                      <div>
                                        <img
                                          src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava6-bg.webp"
                                          alt="avatar" class="d-flex align-self-center me-3" width="60">
                                        <span class="badge bg-success badge-dot"></span>
                                      </div>
                                      <div class="pt-1">
                                        <p class="fw-bold mb-0">Ben Smith</p>
                                        <p class="small text-muted">Lorem ipsum dolor sit.</p>
                                      </div>
                                    </div>
                                    <div class="pt-1">
                                      <p class="small text-muted mb-1">Yesterday</p>
                                    </div>
                                  </a>
                                </li>
                              </ul>
                            </div>

                          </div>

                        </div>

                        <div class="col-md-6 col-lg-7 col-xl-8">

                          <div class="pt-3 pe-3" data-mdb-perfect-scrollbar="true"
                            style="position: relative; height: 400px">

                            <div class="d-flex flex-row justify-content-start">
                              <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava6-bg.webp"
                                alt="avatar 1" style="width: 45px; height: 100%;">
                              <div>
                                <p class="small p-2 ms-3 mb-1 rounded-3" style="background-color: #f5f6f7;">Lorem ipsum
                                  dolor
                                  sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                                  dolore
                                  magna aliqua.</p>
                                <p class="small ms-3 mb-3 rounded-3 text-muted float-end">12:00 PM | Aug 13</p>
                              </div>
                            </div>

                            <div class="d-flex flex-row justify-content-end">
                              <div>
                                <p class="small p-2 me-3 mb-1 text-white rounded-3 bg-primary">Ut enim ad minim veniam,
                                  quis
                                  nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                                <p class="small me-3 mb-3 rounded-3 text-muted">12:00 PM | Aug 13</p>
                              </div>
                              <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava1-bg.webp"
                                alt="avatar 1" style="width: 45px; height: 100%;">
                            </div>

                            <div class="d-flex flex-row justify-content-start">
                              <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava6-bg.webp"
                                alt="avatar 1" style="width: 45px; height: 100%;">
                              <div>
                                <p class="small p-2 ms-3 mb-1 rounded-3" style="background-color: #f5f6f7;">Duis aute
                                  irure
                                  dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                                </p>
                                <p class="small ms-3 mb-3 rounded-3 text-muted float-end">12:00 PM | Aug 13</p>
                              </div>
                            </div>

                            <div class="d-flex flex-row justify-content-end">
                              <div>
                                <p class="small p-2 me-3 mb-1 text-white rounded-3 bg-primary">Excepteur sint occaecat
                                  cupidatat
                                  non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                                <p class="small me-3 mb-3 rounded-3 text-muted">12:00 PM | Aug 13</p>
                              </div>
                              <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava1-bg.webp"
                                alt="avatar 1" style="width: 45px; height: 100%;">
                            </div>

                            <div class="d-flex flex-row justify-content-start">
                              <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava6-bg.webp"
                                alt="avatar 1" style="width: 45px; height: 100%;">
                              <div>
                                <p class="small p-2 ms-3 mb-1 rounded-3" style="background-color: #f5f6f7;">Sed ut
                                  perspiciatis
                                  unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam
                                  rem
                                  aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
                                  dicta
                                  sunt explicabo.</p>
                                <p class="small ms-3 mb-3 rounded-3 text-muted float-end">12:00 PM | Aug 13</p>
                              </div>
                            </div>

                            <div class="d-flex flex-row justify-content-end">
                              <div>
                                <p class="small p-2 me-3 mb-1 text-white rounded-3 bg-primary">Nemo enim ipsam
                                  voluptatem quia
                                  voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos
                                  qui
                                  ratione voluptatem sequi nesciunt.</p>
                                <p class="small me-3 mb-3 rounded-3 text-muted">12:00 PM | Aug 13</p>
                              </div>
                              <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava1-bg.webp"
                                alt="avatar 1" style="width: 45px; height: 100%;">
                            </div>

                            <div class="d-flex flex-row justify-content-start">
                              <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava6-bg.webp"
                                alt="avatar 1" style="width: 45px; height: 100%;">
                              <div>
                                <p class="small p-2 ms-3 mb-1 rounded-3" style="background-color: #f5f6f7;">Neque porro
                                  quisquam
                                  est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non
                                  numquam
                                  eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
                                <p class="small ms-3 mb-3 rounded-3 text-muted float-end">12:00 PM | Aug 13</p>
                              </div>
                            </div>

                            <div class="d-flex flex-row justify-content-end">
                              <div>
                                <p class="small p-2 me-3 mb-1 text-white rounded-3 bg-primary">Ut enim ad minima veniam,
                                  quis
                                  nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea
                                  commodi
                                  consequatur?</p>
                                <p class="small me-3 mb-3 rounded-3 text-muted">12:00 PM | Aug 13</p>
                              </div>
                              <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava1-bg.webp"
                                alt="avatar 1" style="width: 45px; height: 100%;">
                            </div>

                          </div>

                          <div class="text-muted d-flex justify-content-start align-items-center pe-3 pt-3 mt-2">
                            <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava6-bg.webp"
                              alt="avatar 3" style="width: 40px; height: 100%;">
                            <input type="text" class="form-control form-control-lg" id="exampleFormControlInput2"
                              placeholder="Type message">
                            <a class="ms-1 text-muted" href="#!"><i class="fas fa-paperclip"></i></a>
                            <a class="ms-3 text-muted" href="#!"><i class="fas fa-smile"></i></a>
                            <a class="ms-3" href="#!"><i class="fas fa-paper-plane"></i></a>
                          </div>

                        </div>
                      </div>

                    </div>
                  </div>

                </div>
              </div>

            </div>
          </section>
          
        
    
        
            
          #chat3 .form-control {
          border-color: transparent;
          }

          #chat3 .form-control:focus {
          border-color: transparent;
          box-shadow: inset 0px 0px 0px 1px transparent;
          }

          .badge-dot {
          border-radius: 50%;
          height: 10px;
          width: 10px;
          margin-left: 2.9rem;
          margin-top: -.75rem;
          }
          
        
    

Collapsible Chat App

You can allow your users to hide the chat box on your website by combining it with the Collapse functionality.

avatar 1

Hi

How are you ...???

What are you doing tomorrow? Can we come up a bar?

23:58

Today

Hiii, I'm good.

How are you doing?

Long time no see! Tomorrow office. will be free on sunday.

00:06

avatar 1
avatar 1

Okay

We will go on Sunday?

00:07

That's awesome!

I will meet you Sandon Square sharp at 10 AM

Is that okay?

00:09

avatar 1
avatar 1

Okay i will meet you on Sandon Square

00:11

Do you have pictures of Matley Marriage?

00:11

avatar 1
avatar 1

Sorry I don't have. i changed my phone.

00:13

Okay then see you on sunday!!

00:15

avatar 1
        
            
          <section style="background-color: #eee;">
            <div class="container py-5">

              <div class="row d-flex justify-content-center">
                <div class="col-md-8 col-lg-6 col-xl-4">

                  <!-- Buttons trigger collapse -->
                  <a class="btn btn-info btn-lg btn-block" data-mdb-toggle="collapse" href="#collapseExample"
                    role="button" aria-expanded="false" aria-controls="collapseExample">
                    <div class="d-flex justify-content-between align-items-center">
                      <span>Collapsible Chat App</span>
                      <i class="fas fa-chevron-down"></i>
                    </div>
                  </a>

                  <!-- Collapsed content -->
                  <div class="collapse mt-3" id="collapseExample">
                    <div class="card" id="chat4">
                      <div class="card-body" data-mdb-perfect-scrollbar="true"
                        style="position: relative; height: 400px">

                        <div class="d-flex flex-row justify-content-start">
                          <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava5-bg.webp"
                            alt="avatar 1" style="width: 45px; height: 100%;">
                          <div>
                            <p class="small p-2 ms-3 mb-1 rounded-3" style="background-color: #f5f6f7;">Hi</p>
                            <p class="small p-2 ms-3 mb-1 rounded-3" style="background-color: #f5f6f7;">How are you
                              ...???</p>
                            <p class="small p-2 ms-3 mb-1 rounded-3" style="background-color: #f5f6f7;">What are you
                              doing
                              tomorrow? Can we come up a bar?</p>
                            <p class="small ms-3 mb-3 rounded-3 text-muted">23:58</p>
                          </div>
                        </div>

                        <div class="divider d-flex align-items-center mb-4">
                          <p class="text-center mx-3 mb-0" style="color: #a2aab7;">Today</p>
                        </div>

                        <div class="d-flex flex-row justify-content-end mb-4 pt-1">
                          <div>
                            <p class="small p-2 me-3 mb-1 text-white rounded-3 bg-info">Hiii, I'm good.</p>
                            <p class="small p-2 me-3 mb-1 text-white rounded-3 bg-info">How are you doing?</p>
                            <p class="small p-2 me-3 mb-1 text-white rounded-3 bg-info">Long time no see! Tomorrow
                              office. will
                              be free on sunday.</p>
                            <p class="small me-3 mb-3 rounded-3 text-muted d-flex justify-content-end">00:06</p>
                          </div>
                          <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava2-bg.webp"
                            alt="avatar 1" style="width: 45px; height: 100%;">
                        </div>

                        <div class="d-flex flex-row justify-content-start mb-4">
                          <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava5-bg.webp"
                            alt="avatar 1" style="width: 45px; height: 100%;">
                          <div>
                            <p class="small p-2 ms-3 mb-1 rounded-3" style="background-color: #f5f6f7;">Okay</p>
                            <p class="small p-2 ms-3 mb-1 rounded-3" style="background-color: #f5f6f7;">We will go on
                              Sunday?</p>
                            <p class="small ms-3 mb-3 rounded-3 text-muted">00:07</p>
                          </div>
                        </div>

                        <div class="d-flex flex-row justify-content-end mb-4">
                          <div>
                            <p class="small p-2 me-3 mb-1 text-white rounded-3 bg-info">That's awesome!</p>
                            <p class="small p-2 me-3 mb-1 text-white rounded-3 bg-info">I will meet you Sandon Square
                              sharp at
                              10 AM</p>
                            <p class="small p-2 me-3 mb-1 text-white rounded-3 bg-info">Is that okay?</p>
                            <p class="small me-3 mb-3 rounded-3 text-muted d-flex justify-content-end">00:09</p>
                          </div>
                          <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava2-bg.webp"
                            alt="avatar 1" style="width: 45px; height: 100%;">
                        </div>

                        <div class="d-flex flex-row justify-content-start mb-4">
                          <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava5-bg.webp"
                            alt="avatar 1" style="width: 45px; height: 100%;">
                          <div>
                            <p class="small p-2 ms-3 mb-1 rounded-3" style="background-color: #f5f6f7;">Okay i will meet
                              you on
                              Sandon Square</p>
                            <p class="small ms-3 mb-3 rounded-3 text-muted">00:11</p>
                          </div>
                        </div>

                        <div class="d-flex flex-row justify-content-end mb-4">
                          <div>
                            <p class="small p-2 me-3 mb-1 text-white rounded-3 bg-info">Do you have pictures of Matley
                              Marriage?</p>
                            <p class="small me-3 mb-3 rounded-3 text-muted d-flex justify-content-end">00:11</p>
                          </div>
                          <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava2-bg.webp"
                            alt="avatar 1" style="width: 45px; height: 100%;">
                        </div>

                        <div class="d-flex flex-row justify-content-start mb-4">
                          <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava5-bg.webp"
                            alt="avatar 1" style="width: 45px; height: 100%;">
                          <div>
                            <p class="small p-2 ms-3 mb-1 rounded-3" style="background-color: #f5f6f7;">Sorry I don't
                              have. i
                              changed my phone.</p>
                            <p class="small ms-3 mb-3 rounded-3 text-muted">00:13</p>
                          </div>
                        </div>

                        <div class="d-flex flex-row justify-content-end">
                          <div>
                            <p class="small p-2 me-3 mb-1 text-white rounded-3 bg-info">Okay then see you on sunday!!
                            </p>
                            <p class="small me-3 mb-3 rounded-3 text-muted d-flex justify-content-end">00:15</p>
                          </div>
                          <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava2-bg.webp"
                            alt="avatar 1" style="width: 45px; height: 100%;">
                        </div>

                      </div>
                      <div class="card-footer text-muted d-flex justify-content-start align-items-center p-3">
                        <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava5-bg.webp"
                          alt="avatar 3" style="width: 40px; height: 100%;">
                        <input type="text" class="form-control form-control-lg" id="exampleFormControlInput3"
                          placeholder="Type message">
                        <a class="ms-1 text-muted" href="#!"><i class="fas fa-paperclip"></i></a>
                        <a class="ms-3 text-muted" href="#!"><i class="fas fa-smile"></i></a>
                        <a class="ms-3 link-info" href="#!"><i class="fas fa-paper-plane"></i></a>
                      </div>
                    </div>
                  </div>

                </div>
              </div>

            </div>
          </section>
          
        
    
        
            
          #chat4 .form-control {
          border-color: transparent;
          }

          #chat4 .form-control:focus {
          border-color: transparent;
          box-shadow: inset 0px 0px 0px 1px transparent;
          }

          .divider:after,
          .divider:before {
          content: "";
          flex: 1;
          height: 1px;
          background: #eee;
          }