→ 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

321

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

Credit cards bootstrap 5
credit cards design made with Bootstrap 5

Author:
Ankit khedkar

3 months ago

317

v.5.3
Invoice template with bootstrap

Author:
Anonymous

3 months ago

210

v.4.6
Responsive video container

Author:
Anonymous

3 months ago

207

v.4.6
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

2 months ago

217

v.5.3
Interactive Kanban Task Board

Author:
Anonymous

2 months ago

1.2k

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

Author:
Ankit khedkar

3 months ago

216

v.5.3
Contact us section with Image

Author:
Anonymous

3 months ago

1.9k

v.4.6
Elegant Profile Card
showcasing user or team member profiles in a professional and visually appealing manner. The profile card includes an avatar, name, position, and a short bio, along with social media icons for easy connectivity

Author:
Prajwal Hallale

7 months ago

1.7k

v.5.3
Continue with google button

Author:
Noah Kim

7 months ago

858

v.4.6
Newsletter section

Author:
Anonymous

3 months ago

963

v.4.6
Gradient Hero Section
A visually stunning hero section with a gradient background and a call-to-action button.

Author:
Prajwal Hallale

7 months ago

246

v.5.3
Features section
Showcase features with icons

Author:
Prajwal Hallale

7 months ago

225

v.4.6

Didn't find component you were looking for?

Search from 200+ componenent