Bootstrap 5 Chat Timeline
### HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Timeline</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.chat-bubble {
border-radius: 1rem;
padding: 0.75rem 1rem;
max-width: 75%;
word-wrap: break-word;
}
.chat-bubble-left {
background-color: #f1f1f1;
}
.chat-bubble-right {
background-color: #007bff;
color: #fff;
}
</style>
</head>
<body>
<div class="container my-4">
<h3 class="text-center">Chat Timeline</h3>
<div class="d-flex flex-column gap-3">
<!-- Sender Message -->
<div class="d-flex justify-content-start">
<div class="chat-bubble chat-bubble-left">
Hi there! How are you doing?
</div>
</div>
<!-- Receiver Message -->
<div class="d-flex justify-content-end">
<div class="chat-bubble chat-bubble-right">
I'm doing great, thank you! What about you?
</div>
</div>
<!-- Sender Message -->
<div class="d-flex justify-content-start">
<div class="chat-bubble chat-bubble-left">
I'm good as well, thanks for asking!
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>### Features in This Example
1. **Chat Bubble Styling**:
– `chat-bubble`: Common styles for chat bubbles.
– `chat-bubble-left`: For the sender's messages with a light background.
– `chat-bubble-right`: For the receiver's messages with a blue background and white text.
2. **Responsiveness**:
– Uses Bootstrap's `d-flex` and `justify-content-` classes for alignment.
– The `max-width: 75%` ensures that bubbles don’t take up too much space on larger screens.
3. **Utilities**:
– The `gap-3` class adds consistent spacing between messages.
– `word-wrap: break-word` ensures long texts are properly wrapped.
This layout can be expanded further with timestamps, avatars, or additional metadata if needed.
### HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Timeline</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.chat-bubble {
border-radius: 1rem;
padding: 0.75rem 1rem;
max-width: 75%;
word-wrap: break-word;
}
.chat-bubble-left {
background-color: #f1f1f1;
}
.chat-bubble-right {
background-color: #007bff;
color: #fff;
}
.chat-meta {
font-size: 0.75rem;
color: #6c757d;
}
</style>
</head>
<body>
<div class="container my-4">
<h3 class="text-center">Chat Timeline</h3>
<div class="d-flex flex-column gap-3">
<!-- Sender Message -->
<div class="d-flex flex-column align-items-start">
<div class="chat-meta">
<strong>John Doe</strong> • 10:15 AM, Nov 28
</div>
<div class="chat-bubble chat-bubble-left">
Hi there! How are you doing?
</div>
</div>
<!-- Receiver Message -->
<div class="d-flex flex-column align-items-end">
<div class="chat-meta text-end">
<strong>Jane Smith</strong> • 10:16 AM, Nov 28
</div>
<div class="chat-bubble chat-bubble-right">
I'm doing great, thank you! What about you?
</div>
</div>
<!-- Sender Message -->
<div class="d-flex flex-column align-items-start">
<div class="chat-meta">
<strong>John Doe</strong> • 10:17 AM, Nov 28
</div>
<div class="chat-bubble chat-bubble-left">
I'm good as well, thanks for asking!
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>### Features in This Version
1. **Chat Metadata**:
– Each message has a `chat-meta` div above the bubble showing:
– **Username**: Displayed in bold.
– **Date and Time**: Shown next to the username.
2. **Alignment**:
– Messages sent by the user (receiver) are aligned to the right using `align-items-end` and `text-end`.
– Messages from others (sender) are aligned to the left using `align-items-start`.
3. **Utility Classes**:
– **Font Size**: `chat-meta` uses `font-size: 0.75rem` for smaller text.
– **Color**: The metadata uses a muted text color (`#6c757d`) for better readability without being intrusive.
This structure can be dynamically rendered using a backend language or JavaScript framework if your chat content is coming from a database or API.
get value of session
### Retrieving Session Value
$loggedUid = Session::get('loggeduid');
// or using the session() helper
$loggedUid = session('loggeduid');### Explanation
– `Session::get('key')`: Retrieves the value of the specified session key.
– `session('key')`: Does the same but is more concise.
### Example Usage
// Storing a session value
Session::put('loggeduid', Auth::guard($this->guard)->user()->id);
// Retrieving the session value
$loggedUid = Session::get('loggeduid');
if ($loggedUid) {
echo "Logged-in user ID is: " . $loggedUid;
} else {
echo "No user ID is stored in the session.";
}### Default Value
If the session key does not exist, you can provide a default value:
$loggedUid = Session::get('loggeduid', 'default_value');### In Blade Template
To display the session value in a Blade template:
@if(session()->has('loggeduid'))
<p>Logged-in User ID: {{ session('loggeduid') }}</p>
@else
<p>No user ID found in session.</p>
@endifLet me know if you need further clarification!