bs4 tree comments

This bootstrap snippet called "bs4 tree comments" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: user,profile,cover,social-network

This is the HTML code for this bootstrap snippet

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview tab

<div class="col-lg-6">
<div class="card mb-4">
  <div class="card-header">
    <div class="title-text">Tree comments</div>
  </div>
  <div class="card-body">

    <div class="media pb-1 mb-3">
      <img src="https://uxpowered.com/products/appwork/v110/assets_/img/avatars/9-small.png" class="d-block ui-w-40 rounded-circle" alt>
      <div class="media-body ml-3">
        <a href="#">Amanda Warner</a>
        <span class="text-muted">commented on</span>
        <a href="#">Article Name</a>
        <p class="my-1">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.</p>
        <div class="clearfix">
          <a href="#" class="float-right text-lightest small">
            <span class="ion ion-ios-thumbs-down"></span>
          </a>
          <a href="#" class="float-right text-lightest small">
            <span class="ion ion-ios-thumbs-up mr-2"></span>
          </a>
          <span class="float-left text-muted small">2 hours ago</span>
        </div>

        <div class="media pt-1 mt-3">
          <img src="https://uxpowered.com/products/appwork/v110/assets_/img/avatars/9-small.png" class="d-block ui-w-30 rounded-circle" alt>
          <div class="media-body ml-3">
            <a href="#">Hallie Lewis</a>
            <span class="text-muted">commented on</span>
            <a href="#">Article Name</a>
            <p class="my-1">Vivendum torquatos ut nec, sit audiam deterruisset ei, cu sed nibh autem scriptorem. Ea quo vidit deleniti constituto, ex qui malis mollis iudicabit, viris fabellas id has.</p>
            <div class="clearfix">
              <a href="#" class="float-right text-lightest small">
                <span class="ion ion-ios-thumbs-down"></span>
              </a>
              <a href="#" class="float-right text-lightest small">
                <span class="ion ion-ios-thumbs-up mr-2"></span>
              </a>
              <span class="float-left text-muted small">2 hours ago</span>
            </div>
          </div>
        </div>

        <div class="media pt-1 mt-3">
          <img src="https://uxpowered.com/products/appwork/v110/assets_/img/avatars/9-small.png" class="d-block ui-w-30 rounded-circle" alt>
          <div class="media-body ml-3">
            <a href="#">Alice Hampton</a>
            <span class="text-muted">commented on</span>
            <a href="#">Article Name</a>
            <p class="my-1">Eam facilis laboramus reprehendunt ei, ex esse fastidii per.</p>
            <div class="clearfix">
              <a href="#" class="float-right text-lightest small">
                <span class="ion ion-ios-thumbs-down"></span>
              </a>
              <a href="#" class="float-right text-lightest small">
                <span class="ion ion-ios-thumbs-up mr-2"></span>
              </a>
              <span class="float-left text-muted small">2 hours ago</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="media">
      <img src="https://uxpowered.com/products/appwork/v110/assets_/img/avatars/9-small.png" class="d-block ui-w-40 rounded-circle" alt>
      <div class="media-body ml-3">
        <a href="#">Mae Gibson</a>
        <span class="text-muted">commented on</span>
        <a href="#">Article Name</a>
        <p class="my-1">Ea inani epicurei mea. No docendi antiopam quo, ad dicant viderer cotidieque vix. Ea mea dicat ludus, utroque explicari conclusionemque ius eu, in scaevola tractatos persecuti per.</p>
        <div class="clearfix">
          <a href="#" class="float-right text-lightest small">
            <span class="ion ion-ios-thumbs-down"></span>
          </a>
          <a href="#" class="float-right text-lightest small">
            <span class="ion ion-ios-thumbs-up mr-2"></span>
          </a>
          <span class="float-left text-muted small">2 hours ago</span>
        </div>
      </div>
    </div>

  </div>
</div>
</div>

This is the CSS code for this bootstrap snippet

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview

body{margin-top:20px;}
.ui-w-40 {
    width: 40px !important;
    height: auto;
}
.ui-w-30 {
    width: 30px !important;
    height: auto;
}
                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 4.1.1

Created: Thursday September 13, 22:01

Views: 1