Can someone help me create chat bubbles within the bootstrap framework? I want to have right and left bubbles distinguished by two classes, such as right and left.
Each bubble should have a maximum width of 70%, but adjust to be smaller if the text is not too large.
Below is the code I have been working on:
<div class="d-flex flex-column">
<div class="justify-content-end">
<p class="col-6 msg right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque neque est, viverra ac rhoncus et, cursus eu leo. Quisque in tristique libero, sed rhoncus neque. Ut at enim id ligula consequat tempus in nec magna. Donec vitae libero eget mi malesuada
rutrum. Integer ornare ante at ligula venenatis, quis blandit urna euismod. </p>
</div>
<div class="justify-content-end">
<p class="col-6 msg left">Integer ornare ante at ligula venenatis, quis blandit urna euismod.</p>
</div>
<div class="justify-content-start">
<p class="col-6 msg right">Integer ornare ante at ligula venenatis, quis blandit urna euismod.</p>
</div>
<div class="justify-content-end">
<p class="col-6 msg left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque neque est, viverra ac rhoncus et, cursus eu leo. Quisque in tristique libero, sed rhoncus neque. Ut at enim id ligula consequat tempus in nec magna. Donec vitae libero eget
mi malesuada rutrum. Integer ornare ante at ligula venenatis, quis blandit urna euismod. ge</p>
</div>
<div class="justify-content-start">
<p class="col-6 msg right">Integer ornare ante at ligula venenatis, quis blandit urna euismod.</p>
</div>
</div>
Here is the CSS code:
.msg {
border-radius: 10px;
}
.msg.right {
background-color:#CCC;
}
.msg.left {
background-color:#555;
color: white;
}
I have also created a jsfiddle with my code. I attempted to use justify-content-xxx, but it did not work as expected. Can anyone suggest a simpler way to achieve this? Thank you in advance.