"User Comment Example"
Bootstrap 4.0.0 Snippet by mdomocos

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-sm-12"> <h3>User Comment Example</h3> </div><!-- /col-sm-12 --> </div><!-- /row --> <div class="row"> <div class="col-sm-1"> <div class="thumbnail"> <img class="img-fluid rounded" src="https://www.biit.ro/assets/uploads/pictures/17862557_1722503767778768_5916117944403144779_n.jpg"> </div><!-- /thumbnail --> </div><!-- /col-sm-1 --> <div class="col-sm-5"> <div class="card card-header"> <div class="card-heading"> <strong>myusername</strong> <span class="text-muted">commented 5 days ago</span> </div> <div class="card-body"> lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </div><!-- /panel-body --> </div><!-- /panel panel-default --> </div><!-- /col-sm-5 --> </div><!-- /row --> </div><!-- /container -->
.thumbnail { padding:0px; } .card { position:relative; } .card>.card-header:after,.card>.card-header:before{ position:absolute; top:11px;left:-16px; right:100%; width:0; height:0; display:block; content:" "; border-color:transparent; border-style:solid solid outset; pointer-events:none; } .card>.card-header:after{ border-width:7px; border-right-color:#f7f7f7; margin-top:1px; margin-left:2px; } .card>.card-header:before{ border-right-color:#ddd; border-width:8px; }

Related: See More


Questions / Comments: