xxxxxxxxxx<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css"> <link href='https://fonts.googleapis.com/css?family=Roboto:400,500' rel='stylesheet' type='text/css'> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> </head> <body> <div class="container"> <div class="col-md-6 col-md-offset-3" style="margin-top:2em;"> <h6 style="margin-bottom:1em;"> Comment Box <small class="text-muted">with Material Design Guidelines</small> </h6> <div class="card paper"> <details> <summary style="padding:1em;">3 comments</summary> <ul class="list-group"> <li class="list-group-item "> <span class="circle"> <img src="https://bigbeehive.com/demo/orientplay-angular/img/user/vector4.png" alt="user"> </span> <span class="title"> <a href="#">Abbey Christensen</a> <time> 5:09 PM</time> <p>Can’t wait to see this movie.</p> </span> <ul class="actions" href="#"> <li><a class="reply" href="#">Reply</a></li> </ul> </li> <li class="list-group-item"> <span class="circle"> <img src="https://bigbeehive.com/demo/orientplay-angular/img/user/vector2.png" alt="user"> </span> <span class="title"> <a href="#">Ali Connors</a> <time> 5:15 PM</time> <p>Mee too.</p> </span> <ul class="actions" href="#"> <li><a class="reply" href="#">Reply</a></li> </ul> </li> <li class="list-group-item"> <span class="circle"> <img src="https://bigbeehive.com/demo/orientplay-angular/img/user/vector3.png" alt="user"> </span> <span class="title"> <a href="#">Peter Carlsson</a> <time> 5:30 PM</time> <p><a href="#">Abbey Christensen</a> I thought it was a good movie. The slow motion was a tad excessive at times, but overall it was good! I'm love it ;) </p> </span> <ul class="actions" href="#"> <li><a class="reply" href="#">Reply</a></li> </ul> </li> </ul> </details> <ul id="lastComment" class="list-group"> <li class="list-group-item"> <span class="circle"> <img src="https://bigbeehive.com/demo/orientplay-angular/img/user/vector4.png" alt="user"> </span> <span class="title"> <a href="#">Sandra Adams </a> <time> 6:00 PM</time> <p><a href="#">Peter Carlsson</a> This is without doubt the greatest flim i’ve ever seen.</p> </span> <ul class="list-inline actions" href="#"> <li><a class="edit" href="#" title="Edit comment">Edit</a></li> <li class="roff"><a class="delete" href="#" title="Delete comment"></a></li> </ul> </li> </ul> <form> <fieldset class="form-group"> <input type="text" class="form-control" id="exampleInputEmail1" placeholder="Add a comment"> </fieldset> <button type="button" class="btn btn-sm btn-success">Post</button> <button type="button" class="btn btn-sm btn-secondary">Cancel</button> </form> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script> </body></html> Updated missing url https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js to https://cdn.jsdelivr.net/gh/twbs/bootstrap/v4-dev/dist/js/bootstrap.js
https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js
https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js