<div class="page-content page-container" id="page-content">
<div class="padding">
<div class="row container d-flex justify-content-center">
<div class="col-md-6">
<div class="box box-widget">
<div class="box-header with-border">
<div class="user-block"> <img class="img-circle" src="https://img.icons8.com/color/36/000000/guest-male.png" alt="User Image"> <span class="username"><a href="#" data-abc="true">Henery German</a></span> <span class="description">Public - 7:30 PM Today</span> </div>
<div class="box-tools"> <button type="button" class="btn btn-box-tool" data-toggle="tooltip" title="" data-original-title="Mark as read"> <i class="fa fa-circle-o"></i></button> <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i> </button> <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button> </div>
</div>
<div class="box-body"> <img class="img-responsive pad" src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1557148425/woman-570883_1280.jpg" alt="Photo">
<p>Look at the beach photo i clicked</p> <button type="button" class="btn btn-default btn-xs"><i class="fa fa-share"></i> Share</button> <button type="button" class="btn btn-default btn-xs"><i class="fa fa-thumbs-o-up"></i> Like</button> <span class="pull-right text-muted">127 likes - 3 comments</span>
</div>
<div class="box-footer box-comments">
<div class="box-comment"> <img class="img-circle img-sm" src="https://img.icons8.com/office/36/000000/person-female.png" alt="User Image">
<div class="comment-text"> <span class="username"> Tina Domiaz <span class="text-muted pull-right">8:03 PM Today</span> </span> For what reason would it be advisable for me to think about business content? </div>
</div>
<div class="box-comment"> <img class="img-circle img-sm" src="https://img.icons8.com/color/36/000000/administrator-male.png" alt="User Image">
<div class="comment-text"> <span class="username"> Smith helm <span class="text-muted pull-right">8:03 PM Today</span> </span>
That might be little bit risky to have crew member like them. </div>
</div>
</div>
<div class="box-footer">
<form action="#" method="post"> <img class="img-responsive img-circle img-sm" src="https://img.icons8.com/color/36/000000/administrator-male.png" alt="Alt Text">
<div class="img-push"> <input type="text" class="form-control input-sm" placeholder="Press enter to post comment"> </div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
.container {
margin-bottom: 500px
}
.stretch-card>.card {
width: 100%;
min-width: 100%
}
body {
background-color: #f9f9fa
}
.flex {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto
}
@media (max-width:991.98px) {
.padding {
padding: 1.5rem
}
}
@media (max-width:767.98px) {
.padding {
padding: 1rem
}
}
.padding {
padding: 3rem
}
.box-widget {
border: none;
position: relative
}
.box {
position: relative;
border-radius: 3px;
background: #ffffff;
border-top: 3px solid #d2d6de;
margin-bottom: 20px;
width: 100%;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1)
}
.box-header.with-border {
border-bottom: 1px solid #f4f4f4
}
.box-header {
color: #444;
display: block;
padding: 10px;
position: relative
}
.user-block img {
width: 40px;
height: 40px;
float: left
}
.img-circle {
border-radius: 50%
}
.user-block .username {
font-size: 16px;
font-weight: 600
}
.username a {
text-decoration: none
}
.user-block .username,
.user-block .description,
.user-block .comment {
display: block;
margin-left: 50px
}
.user-block .description {
color: #999;
font-size: 13px
}
.user-block .username,
.user-block .description,
.user-block .comment {
display: block;
margin-left: 50px
}
.user-block:after {
clear: both
}
.user-block:before,
.user-block:after {
content: "";
display: table
}
.box-header>.box-tools {
position: absolute;
right: 10px;
top: 5px
}
.box-header>.box-tools [data-toggle="tooltip"] {
position: relative
}
.btn {
border-radius: 3px;
-webkit-box-shadow: none;
box-shadow: none;
border: 1px solid transparent
}
.btn-box-tool {
padding: 5px;
font-size: 12px;
background: transparent;
color: #97a0b3
}
.box-header:after,
.box-body:after,
.box-footer:after {
clear: both
}
.box-body {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
padding: 10px
}
.pad {
padding: 10px
}
.img-responsive,
.thumbnail a>img,
.thumbnail>img {
display: block;
max-width: 100%;
height: auto
}
p {
margin: 0 0 10px
}
.btn-default {
background-color: #f4f4f4;
color: #444;
border-color: #ddd
}
.btn {
border-radius: 3px;
-webkit-box-shadow: none;
box-shadow: none;
border: 1px solid transparent
}
.btn-group-xs>.btn,
.btn-xs {
padding: 1px 5px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px
}
.btn-default {
color: #333;
background-color: #fff;
border-color: #ccc
}
.pull-right {
float: right !important
}
.text-muted {
color: #777;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff
}
.box-comments {
background: #f7f7f7
}
.box-footer {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
border-top: 1px solid #f4f4f4;
padding: 10px
}
.box-comments .box-comment:first-of-type {
padding-top: 0
}
.box-comments .box-comment {
padding: 8px 0;
border-bottom: 1px solid #eee
}
.box-comments .box-comment:before,
.box-comments .box-comment:after {
content: "";
display: table
}
.img-sm,
.box-comments .box-comment img,
.user-block.user-block-sm img {
width: 30px !important;
height: 30px !important
}
.img-sm,
.img-md,
.img-lg,
.box-comments .box-comment img,
.user-block.user-block-sm img {
float: left
}
.box-comments .comment-text {
margin-left: 40px;
color: #555
}
.box-comments .username {
color: #444;
display: block;
font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
overflow-x: hidden;
overflow-y: auto
}
.box-comments .text-muted {
font-weight: 400;
font-size: 12px;
background-color: #f7f7f7
}
.box-footer {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
border-top: 1px solid #f4f4f4;
padding: 10px
}
.box-header:before,
.box-body:before,
.box-footer:before,
.box-header:after,
.box-body:after,
.box-footer:after {
content: "";
display: table
}
.img-sm,
.box-comments .box-comment img,
.user-block.user-block-sm img {
width: 30px !important;
height: 30px !important
}
.img-sm {
float: left
}
.img-sm+.img-push {
margin-left: 40px
}