→ Andreas Müller
→ Bootstrap 5 chat template

Bootstrap 5 chat template

This bootstrap css example is contributed by Andreas Müller, on 20-Jul-2024. Component is made with bootstrap css v.5.3. It is responsive.

Tags: Other

Author Andreas Müller

v.5.3

Fork Fullscreen

<div class="container-fluid chat-container">
    <div class="row h-100">
        
        <div class="col-md-3 col-12 border-end p-0">
            <div class="contacts-list p-3">
                <div class="mb-3">
                    <input type="text" class="form-control" placeholder="Search contacts...">
                </div>
                <div class="list-group">
                    <a href="#" class="list-group-item list-group-item-action active">
                        <div class="d-flex w-100 justify-content-between">
                            <h5 class="mb-1">John Doe</h5>
                            <small>3 mins ago</small>
                        </div>
                        <p class="mb-1">Hey, how are you?</p>
                    </a>
                    <a href="#" class="list-group-item list-group-item-action">
                        <div class="d-flex w-100 justify-content-between">
                            <h5 class="mb-1">Jane Smith</h5>
                            <small>1 hour ago</small>
                        </div>
                        <p class="mb-1">Are we still on for lunch?</p>
                    </a>
                    
                </div>
            </div>
        </div>

<div class="col-md-9 col-12 p-0 d-flex flex-column">
            <div class="chat-messages p-3">
                <div class="message mb-3 align-self-start">
                    <div class="bg-light rounded p-2">
                        <strong>John Doe:</strong> Hey, how are you?
                    </div>
                    <small class="text-muted">3 mins ago</small>
                </div>
                <div class="message mb-3 align-self-end">
                    <div class="bg-primary text-white rounded p-2">
                        I'm good, thanks! How about you?
                    </div>
                    <small class="text-muted">2 mins ago</small>
                </div>
                
            </div>

More Examples

Background image with bootstrap 4
Bootstrap 4 background image

Author:
Anonymous

8 months ago

1.1k

v.4.6
Privacy policy template with boostrap 5

Author:
Anonymous

8 months ago

2.3k

v.5.3
Parallax effect with image background

Author:
Anonymous

8 months ago

1.6k

v.4.6
Minimal Changelog Page Template design

Author:
Asmath

8 months ago

2.1k

v.5.3
Invoice template with bootstrap

Author:
Anonymous

1 year ago

716

v.4.6
Credit Card Clone
On hover shows backside of credit card

Author:
Ankit khedkar

1 year ago

1.1k

v.5.3
Responsive video container

Author:
Anonymous

1 year ago

933

v.4.6
Changelog page template

Author:
Asmath

8 months ago

2.7k

v.5.3
Interactive Quiz Application
1. Dynamic Question Loading: Questions are loaded one at a time from a predefined set. 2. Timer: Each question has a 30-second time limit. Interactive Options: Users can select their answer, with visual feedback for correct and incorrect choices. 3. Progress Bar: Shows the user's progress through the quiz. 4. Results Summary: Displays the final score with a congratulatory or encouraging message. 5. Responsive Design: The quiz adapts to different screen sizes.

Author:
Ross Wille

11 months ago

6.9k

v.5.3
Interactive Kanban Task Board

Author:
Anonymous

11 months ago

5.5k

v.5.3
Credit cards bootstrap 5
credit cards design made with Bootstrap 5

Author:
Ankit khedkar

1 year ago

2.3k

v.5.3
Notification alert
notification alert bootstrapt 5.3 # alert-imessage Alert message custom on bootstrap 5.3 # Example calls JS // imessage.show("Default Success!", "success"); // imessage.show("Top Center Message!", "info", "top-center"); // imessage.show("Bottom Right Warning!", "warning", "bottom-right"); // imessage.show("Bottom Left Error!", "fail", "bottom-left"); // imessage.show("Centered Notification!", "info", "center");

Author:
StarCode Kh

5 months ago

1.5k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent