Today, We want to share with you comment box in bootstrap.In this post we will show you Bootstrap comment post design demo, hear for bootstrap comments box template free download we will give you demo and example for implement.In this post, we will learn about bootstrap 4 carousel testimonials slider with an example.
Simple Comment Box using Bootstrap 3
Free bootstrap comments example using HTML Code, Javascript Code, jQuery Code, and CSS Code that can help you build your responsive website.
here best example for “Creating a simple HTML Form to get user comments”.
HTML Code
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="dsp container">
<div class="row">
<div class="col-lg-5 offset-lg-4 col-12 message-main rounded">
<ul class="p-0">
<li>
<div class="row message-box p-1 pt-3 pr-4">
<div class="col-lg-2 col-3 member-img text-center">
<img src="/demo/account-dp.jpg" class="main-message-img">
</div>
<div class="col-lg-10 col-9 member-message bg-light rounded pb-1">
<div class="row">
<div class="col-lg-8 col-6 border-bottom pr-0">
<p class="w-100 p-2 m-0">WhatsApp Web 2.2043.7: what's new?</p>
</div>
<div class="col-lg-4 col-6 border-bottom">
<p class="w-100 p-2 m-0"><span class="float-right"><i class="fa fa-clock-o mr-1" aria-hidden="true"></i>01 : 00</span></p>
</div>
</div>
<div class="member-message-desc p-1 pl-2">
<p class="m-0 mr-2"><span><i class="fa fa-thumbs-up mr-1" aria-hidden="true"></i></span></i>870</p>
<p class="m-0 mr-2"><span><i class="fa fa-thumbs-down mr-1" aria-hidden="true"></i></span></i>655</p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-11 offset-lg-1">
<ul class="p-0">
<li>
<div class="row message-box p-1 pt-2 pr-4">
<div class="col-lg-3 col-3 member-img">
<img src="/demo/account-dp.jpg" class="p-2 float-right sub-message-img">
</div>
<div class="col-lg-9 col-9 member-message bg-light rounded pb-1 mt-2">
<div class="row">
<div class="col-lg-7 col-6 border-bottom pr-0">
<p class="w-100 p-2 m-0">WhatsApp Web 2.2043.7: what's new?</p>
</div>
<div class="col-lg-5 col-6 border-bottom">
<p class="w-100 p-2 m-0"><span class="float-right"><i class="fa fa-clock-o mr-1" aria-hidden="true"></i>01 : 00</span></p>
</div>
</div>
<div class="member-message-desc p-1 pl-2">
<p class="m-0 mr-2"><span><i class="fa fa-thumbs-up mr-1" aria-hidden="true"></i></span></i>510</p>
<p class="m-0 mr-2"><span><i class="fa fa-thumbs-down mr-1" aria-hidden="true"></i></span></i>690</p>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-lg-11 offset-lg-1">
<ul class="p-0">
<li>
<div class="row message-box p-1 pt-2 pr-4">
<div class="col-lg-3 col-3 member-img">
<img src="/demo/account-dp.jpg" class="p-2 float-right sub-message-img">
</div>
<div class="col-lg-9 col-9 member-message bg-light rounded pb-1 mt-2">
<div class="row">
<div class="col-lg-7 col-6 border-bottom pr-0">
<p class="w-100 p-2 m-0">WhatsApp Web 2.2043.7: what's new?</p>
</div>
<div class="col-lg-5 col-6 border-bottom">
<p class="w-100 p-2 m-0"><span class="float-right"><i class="fa fa-clock-o mr-1" aria-hidden="true"></i>01 : 00</span></p>
</div>
</div>
<div class="member-message-desc p-1 pl-2">
<p class="m-0 mr-2"><span><i class="fa fa-thumbs-up mr-1" aria-hidden="true"></i></span></i>120</p>
<p class="m-0 mr-2"><span><i class="fa fa-thumbs-down mr-1" aria-hidden="true"></i></span></i>960</p>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</li>
<li>
<div class="row message-box p-1 pt-3 pr-4">
<div class="col-lg-2 col-3 member-img text-center">
<img src="/demo/account-dp.jpg" class="main-message-img">
</div>
<div class="col-lg-10 col-9 member-message bg-light rounded pb-1">
<div class="row">
<div class="col-lg-8 col-6 border-bottom pr-0">
<p class="w-100 p-2 m-0">WhatsApp Web 2.2043.7: what's new?</p>
</div>
<div class="col-lg-4 col-6 border-bottom">
<p class="w-100 p-2 m-0"><span class="float-right"><i class="fa fa-clock-o mr-1" aria-hidden="true"></i>01 : 00</span></p>
</div>
</div>
<div class="member-message-desc p-1 pl-2">
<p class="m-0 mr-2"><span><i class="fa fa-thumbs-up mr-1" aria-hidden="true"></i></span></i>109</p>
<p class="m-0 mr-2"><span><i class="fa fa-thumbs-down mr-1" aria-hidden="true"></i></span></i>512</p>
</div>
</div>
</div>
</li>
<hr>
<div class="row">
<div class="col-lg-10 col-10">
<input type="text" class="form-control" placeholder="write Messages ...">
</div>
<div class="col-lg-2 col-2 send-icon">
<a href="https://www.pakainfo.com/" target="_blank" rel="noopener"><i class="fa fa-paper-plane" aria-hidden="true"></i></a>
</div>
</div>
</ul>
</div>
</div>
</body>
</html>
CSS Code
Style.css
body{
margin-top: 50px;
background-color: #0191C8;
}
.message-main{
background-color: #74C2E1;
box-shadow: 1px 2px 6px 2px #005B9A;
}
.message-main ul{
list-style: none;
}
.sub-message-img{
width: 55px !important;
height: 55px !important;
border-radius: 50%;
}
.main-message-img{
width: 40px !important;
height: 40px !important;
border-radius: 50%;
}
.border-bottom{
font-size: 13px;
border-bottom: 1px solid #d3d3d3;
}
.member-message{
background-color: #f3f3f3 !important;
box-shadow: 0px 5px 8px -4px #c1c1c1;
}
.member-message-desc, .member-message span{
color: #a0a0a0;
}
.member-message-desc p{
font-size: 12px;
display: inline-block;
float: left;
}
.send-icon i{
font-size: 20px;
background: #f3f3f3;
padding: 6px 5px;
border-radius: 50%;
color: #74C2E1;
height: 35px;
width: 35px;
}
.member-message:before{
content: "";
height: 0;
width: 0;
top: 0;
left: -10px;
position: absolute;
border-style: solid;
border-width: 13px 0 0 13px;
border-color: #f3f3f3 transparent transparent transparent;
}
I hope you get an idea about responsive comments box bootstrap.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.