Utilities Bootstrap 5Free+ CSS
Awesome chat widget compatible with Bootstrap 5: a hand-crafted, open-source Bootstrap 5 utility. HTML & CSS included, ready to copy.
2.1k views31 downloads
gosnippets.com/preview/awesome-chat-widget-compatible-with-bootstrap-5
Source Code
1<div class="container py-5 px-4">
2
3 <header class="text-center">
4 <h1 class="display-4 text-white">Bootstrap Chat</h1>
5 <p class="text-white lead mb-0">An Awesome chat widget compatible with Bootstrap 4</p>
6 <p class="text-white lead mb-4">Snippet by
7 <a href="https://gosnippets.com" class="text-white">
8 <u>GoSnippets</u></a>
9 </p>
10 </header>
11
12 <div class="row rounded-lg overflow-hidden shadow">
13 <!-- Users box-->
14 <div class="col-5 px-0">
15 <div class="bg-white">
16
17 <div class="bg-gray px-4 py-2 bg-light">
18 <p class="h5 mb-0 py-1">Recent</p>
19 </div>
20
21 <div class="messages-box">
22 <div class="list-group rounded-0">
23 <a class="list-group-item list-group-item-action active text-white rounded-0">
24 <div class="d-flex"><img src="https://images.pexels.com/photos/614810/pexels-photo-614810.jpeg" alt="user" width="50" class="rounded-circle">
25 <div class="flex-grow-1 ms-3 ms-4">
26 <div class="d-flex align-items-center justify-content-between mb-1">
27 <h6 class="mb-0">Ravi Raushan</h6><small class="small font-weight-bold">22 Dec</small>
28 </div>
29 <p class="font-italic mb-0 text-small">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</p>
30 </div>
31 </div>
32 </a>
33
34 <a href="#" class="list-group-item list-group-item-action list-group-item-light rounded-0">
35 <div class="d-flex"><img src="https://images.pexels.com/photos/614810/pexels-photo-614810.jpeg" alt="user" width="50" class="rounded-circle">
36 <div class="flex-grow-1 ms-3 ms-4">
37 <div class="d-flex align-items-center justify-content-between mb-1">
38 <h6 class="mb-0">Ravi Raushan</h6><small class="small font-weight-bold">18 Dec</small>
39 </div>
40 <p class="font-italic text-muted mb-0 text-small">Lorem ipsum dolor sit amet, consectetur. incididunt ut labore.</p>
41 </div>
42 </div>
43 </a>
44
45 <a href="#" class="list-group-item list-group-item-action list-group-item-light rounded-0">
46 <div class="d-flex"><img src="https://images.pexels.com/photos/614810/pexels-photo-614810.jpeg" alt="user" width="50" class="rounded-circle">
47 <div class="flex-grow-1 ms-3 ms-4">
48 <div class="d-flex align-items-center justify-content-between mb-1">
49 <h6 class="mb-0">Gupta ji</h6><small class="small font-weight-bold">9 Nov</small>
50 </div>
51 <p class="font-italic text-muted mb-0 text-small">consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</p>
52 </div>
53 </div>
54 </a>
55
56 <a href="#" class="list-group-item list-group-item-action list-group-item-light rounded-0">
57 <div class="d-flex"><img src="https://images.pexels.com/photos/614810/pexels-photo-614810.jpeg" alt="user" width="50" class="rounded-circle">
58 <div class="flex-grow-1 ms-3 ms-4">
59 <div class="d-flex align-items-center justify-content-between mb-1">
60 <h6 class="mb-0">Mark Zuckerberg</h6><small class="small font-weight-bold">18 Oct</small>
61 </div>
62 <p class="font-italic text-muted mb-0 text-small">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</p>
63 </div>
64 </div>
65 </a>
66
67 <a href="#" class="list-group-item list-group-item-action list-group-item-light rounded-0">
68 <div class="d-flex"><img src="https://images.pexels.com/photos/614810/pexels-photo-614810.jpeg" alt="user" width="50" class="rounded-circle">
69 <div class="flex-grow-1 ms-3 ms-4">
70 <div class="d-flex align-items-center justify-content-between mb-1">
71 <h6 class="mb-0">Elon Musk</h6><small class="small font-weight-bold">15 Oct</small>
72 </div>
73 <p class="font-italic text-muted mb-0 text-small">consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</p>
74 </div>
75 </div>
76 </a>
77
78 <a href="#" class="list-group-item list-group-item-action list-group-item-light rounded-0">
79 <div class="d-flex"><img src="https://images.pexels.com/photos/614810/pexels-photo-614810.jpeg" alt="user" width="50" class="rounded-circle">
80 <div class="flex-grow-1 ms-3 ms-4">
81 <div class="d-flex align-items-center justify-content-between mb-1">
82 <h6 class="mb-0">Aalu Patel</h6><small class="small font-weight-bold">22 Sep</small>
83 </div>
84 <p class="font-italic text-muted mb-0 text-small">Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
85 </div>
86 </div>
87 </a>
88
89 <a href="#" class="list-group-item list-group-item-action list-group-item-light rounded-0">
90 <div class="d-flex"><img src="https://images.pexels.com/photos/614810/pexels-photo-614810.jpeg" alt="user" width="50" class="rounded-circle">
91 <div class="flex-grow-1 ms-3 ms-4">
92 <div class="d-flex align-items-center justify-content-between mb-1">
93 <h6 class="mb-0">Bhindi Singh</h6><small class="small font-weight-bold">20 Aug</small>
94 </div>
95 <p class="font-italic text-muted mb-0 text-small">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</p>
96 </div>
97 </div>
98 </a>
99
100 <a href="#" class="list-group-item list-group-item-action list-group-item-light rounded-0">
101 <div class="d-flex"><img src="https://images.pexels.com/photos/614810/pexels-photo-614810.jpeg" alt="user" width="50" class="rounded-circle">
102 <div class="flex-grow-1 ms-3 ms-4">
103 <div class="d-flex align-items-center justify-content-between mb-3">
104 <h6 class="mb-0">Kareli Patel</h6><small class="small font-weight-bold">21 Aug</small>
105 </div>
106 <p class="font-italic text-muted mb-0 text-small">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</p>
107 </div>
108 </div>
109 </a>
110
111 </div>
112 </div>
113 </div>
114 </div>
115 <!-- Chat Box-->
116 <div class="col-7 px-0">
117 <div class="px-4 py-5 chat-box bg-white">
118 <!-- Sender Message-->
119 <div class="d-flex w-50 mb-3"><img src="https://images.pexels.com/photos/614810/pexels-photo-614810.jpeg" alt="user" width="50" class="rounded-circle">
120 <div class="flex-grow-1 ms-3 ms-3">
121 <div class="bg-light rounded py-2 px-3 mb-2">
122 <p class="text-small mb-0 text-muted">I am launching a new company</p>
123 </div>
124 <p class="small text-muted">12:02 PM | 22 Dec</p>
125 </div>
126 </div>
127
128 <!-- Reciever Message-->
129 <div class="d-flex w-50 ms-auto mb-3">
130 <div class="flex-grow-1 ms-3">
131 <div class="bg-primary rounded py-2 px-3 mb-2">
132 <p class="text-small mb-0 text-white">I am elite gamer, so what</p>
133 </div>
134 <p class="small text-muted">12:01 PM | 22 Dec</p>
135 </div>
136 </div>
137
138 <!-- Sender Message-->
139 <div class="d-flex w-50 mb-3"><img src="https://images.pexels.com/photos/614810/pexels-photo-614810.jpeg" alt="user" width="50" class="rounded-circle">
140 <div class="flex-grow-1 ms-3 ms-3">
141 <div class="bg-light rounded py-2 px-3 mb-2">
142 <p class="text-small mb-0 text-muted">I have done everything great in my life.</p>
143 </div>
144 <p class="small text-muted">12:00 PM | 22 Dec</p>
145 </div>
146 </div>
147
148 <!-- Reciever Message-->
149 <div class="d-flex w-50 ms-auto mb-3">
150 <div class="flex-grow-1 ms-3">
151 <div class="bg-primary rounded py-2 px-3 mb-2">
152 <p class="text-small mb-0 text-white">Millenium Institute of Technology</p>
153 </div>
154 <p class="small text-muted">12:00 PM | 20 Dec</p>
155 </div>
156 </div>
157
158 <!-- Sender Message-->
159 <div class="d-flex w-50 mb-3"><img src="https://images.pexels.com/photos/614810/pexels-photo-614810.jpeg" alt="user" width="50" class="rounded-circle">
160 <div class="flex-grow-1 ms-3 ms-3">
161 <div class="bg-light rounded py-2 px-3 mb-2">
162 <p class="text-small mb-0 text-muted">I am the best in my college.</p>
163 </div>
164 <p class="small text-muted">1:00 PM | 20 Nov</p>
165 </div>
166 </div>
167
168 <!-- Reciever Message-->
169 <div class="d-flex w-50 ms-auto mb-3">
170 <div class="flex-grow-1 ms-3">
171 <div class="bg-primary rounded py-2 px-3 mb-2">
172 <p class="text-small mb-0 text-white">Millenium Institute Of Technology and Science </p>
173 </div>
174 <p class="small text-muted">1:00 PM | 20 Nov</p>
175 </div>
176 </div>
177
178 </div>
179
180 <!-- Typing area -->
181 <form action="#" class="bg-light">
182 <div class="input-group">
183 <input type="text" placeholder="Type a message" aria-describedby="button-addon2" class="form-control rounded-0 border-0 py-4 bg-light">
184 <div class="">
185 <button id="button-addon2" type="submit" class="btn btn-link"> <i class="fa fa-paper-plane"></i></button>
186 </div>
187 </div>
188 </form>
189
190 </div>
191 </div>
192</div>More Utilities snippets
Auto move mouse cursor snippet
Auto move mouse cursor snippet: a hand-crafted, open-source Bootstrap 5 utility. HTML, CSS & JS included, ready to copy.
UtilitiesView →
Bootstrap 5 Ecommerce Product Detail Page Design snippet
Free Bootstrap 5 utility snippet — Bootstrap 5 Ecommerce Product Detail Page Design snippet. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.
UtilitiesView →
Bootstrap 5 Ecommerce single product page design template
Free Bootstrap 5 utility snippet — Bootstrap 5 Ecommerce single product page design template. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.
UtilitiesView →
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.