Whatsapp UI in Bootstrap ?
!DOCTYPE html
html lang=en
head
meta charset=UTF-8
meta name=viewport content=width=device-width, initial-scale=1.0
titleWhatsApp UI/title
!-- Bootstrap CSS --
link href=https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css rel=stylesheet
style
andnbsp; andnbsp; /* Custom styles */
andnbsp; andnbsp; .chat-container {
andnbsp; andnbsp; andnbsp; andnbsp; display: flex;
andnbsp; andnbsp; andnbsp; andnbsp; height: 100vh;
andnbsp; andnbsp; }
andnbsp; andnbsp; .sidebar {
andnbsp; andnbsp; andnbsp; andnbsp; width: 250px;
andnbsp; andnbsp; andnbsp; andnbsp; background-color: #f8f9fa;
andnbsp; andnbsp; andnbsp; andnbsp; border-right: 1px solid #ccc;
andnbsp; andnbsp; }
andnbsp; andnbsp; .chat-area {
andnbsp; andnbsp; andnbsp; andnbsp; flex: 1;
andnbsp; andnbsp; andnbsp; andnbsp; padding: 20px;
andnbsp; andnbsp; }
andnbsp; andnbsp; .message-input {
andnbsp; andnbsp; andnbsp; andnbsp; position: fixed;
andnbsp; andnbsp; andnbsp; andnbsp; bottom: 0;
andnbsp; andnbsp; andnbsp; andnbsp; left: 0;
andnbsp; andnbsp; andnbsp; andnbsp; width: 100%;
andnbsp; andnbsp; andnbsp; andnbsp; background-color: #fff;
andnbsp; andnbsp; andnbsp; andnbsp; border-top: 1px solid #ccc;
andnbsp; andnbsp; andnbsp; andnbsp; padding: 10px 20px;
andnbsp; andnbsp; }
/style
/head
body
div class=container-fluid
andnbsp; andnbsp; div class=row chat-container
andnbsp; andnbsp; andnbsp; andnbsp; !-- Sidebar --
andnbsp; andnbsp; andnbsp; andnbsp; div class=col-3 sidebar
andnbsp; andnbsp; andnbsp; andnbsp; andnbsp; andnbsp; h4Chats/h4
andnbsp; andnbsp; andnbsp; andnbsp; andnbsp; andnbsp; !-- Sidebar content --
andnbsp; andnbsp; andnbsp; andnbsp; /div
andnbsp; andnbsp; andnbsp; andnbsp; !-- Chat Area --
andnbsp; andnbsp; andnbsp; andnbsp; div class=col-9 chat-area
andnbsp; andnbsp; andnbsp; andnbsp; andnbsp; andnbsp; !-- Chat messages --
andnbsp; andnbsp; andnbsp; andnbsp; /div
andnbsp; andnbsp; /div
andnbsp; andnbsp; !-- Message Input --
andnbsp; andnbsp; div class=message-input
andnbsp; andnbsp; andnbsp; andnbsp; input type=text class=form-control placeholder=Type your message...
andnbsp; andnbsp; /div
/div
!-- Bootstrap JS and dependencies --
script src=https://code.jquery.com/jquery-3.5.1.slim.min.js/script
script src=https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js/script
script src=https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js/script
/body
/html