Bootstrap blog
MDB provides you dedicated components for your blog like comment sections, including avatars and various version of reply forms.
Reply Form (logged in user) MDB Pro component
<!--Section: Leave a reply (Logged In User)-->
<section>
<!--Leave a reply form-->
<div class="reply-form">
<h2 class="h1 section-heading">Leave a reply </h2>
<p class="text-center">(Logged In User)</p>
<!--Third row-->
<div class="row">
<!--Image column-->
<div class="col-sm-2 col-12">
<img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-6.jpg" class="avatar rounded-circle z-depth-1-half">
</div>
<!--/.Image column-->
<!--Content column-->
<div class="col-sm-10 col-12">
<div class="md-form">
<textarea type="text" id="form8" class="md-textarea form-control" mdbInputDirective></textarea>
<label for="form8">Your message</label>
</div>
</div>
<div class="text-center mx-auto">
<button mdbBtn color="primary" class="waves-light" mdbWavesEffect>Submit</button>
</div>
<!--/.Content column-->
</div>
<!--/.Third row-->
</div>
<!--/.Leave a reply form-->
</section>
<!--/Section: Leave a reply (Logged In User)-->
Reply Form (Not logged in user) MDB Pro component
<!--Section: Leave a reply (Not Logged In User)-->
<section>
<!--Leave a reply form-->
<div class="reply-form">
<h2 class="h1 section-heading">Leave a reply </h2>
<p class="text-center">(Not Logged In User)</p>
<h4 class="text-center">Sign up with: <span>
<!--Facebook-->
<a type="button" mdbBtn floating="true" size="sm" class="btn-fb waves-light" mdbWavesEffect><i class="fa fa-facebook"></i></a>
<!--Twitter-->
<a type="button" mdbBtn floating="true" size="sm" class="btn-tw waves-light" mdbWavesEffect><i class="fa fa-twitter"></i></a>
<!--Google +-->
<a type="button" mdbBtn floating="true" size="sm" class="btn-gplus waves-light" mdbWavesEffect><i class="fa fa-google-plus"></i></a>
</span> <br><br>or:</h4>
<div class="md-form">
<i class="fa fa-user prefix"></i>
<input type="text" id="form22" class="form-control" mdbInputDirective>
<label for="form22">Your name</label>
</div>
<div class="md-form">
<i class="fa fa-envelope prefix"></i>
<input type="text" id="form32" class="form-control" mdbInputDirective>
<label for="form32">Your email</label>
</div>
<div class="md-form">
<i class="fa fa-home prefix"></i>
<input type="text" id="form33" class="form-control" mdbInputDirective>
<label for="form33">Your website</label>
</div>
<div class="md-form">
<i class="fa fa-pencil prefix"></i>
<textarea type="text" id="form18" class="md-textarea form-control" mdbInputDirective></textarea>
<label for="form18">Your message</label>
</div>
<div class="text-center mx-auto">
<button mdbBtn color="primary" class="waves-light" mdbWavesEffect >Submit</button>
</div>
</div>
<!--/.Leave a reply form-->
</section>
<!--/Section: Leave a reply (Not Logged In User)-->
API Reference:
In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.
API Reference for MDB Angular Blog Components:
// For MDB Angular Pro
import { WavesModule, InputsModule, ButtonsModule } from 'ng-uikit-pro-standard'
// For MDB Angular Free
import { WavesModule, InputsModule, ButtonsModule } from 'angular-bootstrap-md'
Comments List MDB Pro component
Comments 3
John Doe
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.
Marta Tev
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur.
Anna Maria
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia.