I am trying to make a message with bootstrap to I would like something like it
Image example:
Here is what I tried so far
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<img src="http://www.limestone.edu/sites/default/files/user.png" width="40px;" height="40px;" class="img-responsive img-circle" />
<div class="panel panel-default">
<div class="panel-heading">message here</div>
</div>
</div>
</body>
</html>
The question is how to get a bootstrap panel style like the image example and also align the user picture to the panel ?
2
Answers
Try this?
Edited to show user image closer
Here’s my basic attempt. I simply used the idea from here: CSS3 moon shape