"youtube_chat"
Bootstrap 3.3.0 Snippet by snippetpi

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <html> <body style="background-color:#dfe3ee;"> <div class="col-md-12"> <div class="col-md-8"> <div class="list-group-item"> <iframe width="100%" height="315" src="https://www.youtube.com/embed/OeK91J1e5N8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> <br /> <div class="list-group-item" style="height:160px;"> <h6>#CubaGoodingJr #KevinDurant #FreeAgent </h6> <h3>Does Cuba Gooding Jr. Have A Problem? </h3> <a href="">Channel Name</a>    <a href="" class="btn btn-default">Subscribe</a><a href="" class="btn btn-default">30</a> <br /> <div class"col-md-12"> <!-- <table> <tr> <td width="5"> add share more </td> <td width="5">dfdf</td> <td width="5">dfdf</td> <td width="5">dfdf</td> <td> <a href="#"> <span class="glyphicon glyphicon-thumbs-up"></span> </a> 0      <a href="#"> <span class="glyphicon glyphicon-thumbs-down"></span> </a>0 </td> </tr> </table> --> </div> <br /> <br /><br /><br /><br /> <hr /> </div> <br /> <div class="list-group-item" style="height:180px;"> Streamed live 11 hours ago <br /><br /><br /><br /><br /> <hr /> <div align="center"><b></b>SHOW MORE</b></div> </div> <br /> <div class="list-group-item" style="height:580px;"> Comments • 33 <br /> <br /> <ul class="list-unstyled"> <li class="media"> <img class="mr-3" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2264%22%20height%3D%2264%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_16a30701731%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_16a30701731%22%3E%3Crect%20width%3D%2264%22%20height%3D%2264%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2213.84375%22%20y%3D%2236.5%22%3E64x64%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="Generic placeholder image"> <div class="media-body"> <h6 class="mt-0 mb-1">Nick Lee 2 years ago</h6> <h6>Great summertime and backyard BBQ music! Or riding in the car on the highway!</h6> <p>reply <span class="glyphicon glyphicon-thumbs-up">0 </span> <span class="glyphicon glyphicon-thumbs-down">0</span></p> </div> </li> <li class="media"> <img class="mr-3" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2264%22%20height%3D%2264%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_16a30701731%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_16a30701731%22%3E%3Crect%20width%3D%2264%22%20height%3D%2264%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2213.84375%22%20y%3D%2236.5%22%3E64x64%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="Generic placeholder image"> <div class="media-body"> <h6 class="mt-0 mb-1">Nick Lee 2 years ago</h6> <h6>Great summertime and backyard BBQ music! Or riding in the car on the highway!</h6> <p>reply <span class="glyphicon glyphicon-thumbs-up">0 </span> </p> </div> </li> <li class="media"> <img class="mr-3" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2264%22%20height%3D%2264%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_16a30701731%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_16a30701731%22%3E%3Crect%20width%3D%2264%22%20height%3D%2264%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2213.84375%22%20y%3D%2236.5%22%3E64x64%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="Generic placeholder image"> <div class="media-body"> <h6 class="mt-0 mb-1">Nick Lee 2 years ago</h6> <h6>Great summertime and backyard BBQ music! Or riding in the car on the highway!</h6> <p>reply <span class="glyphicon glyphicon-thumbs-up">0 </span> <span class="glyphicon glyphicon-thumbs-down">0</span></p> </div> </li> </ul> <br /><br /><br /><br /> </div> </div> <div class="col-md-4"> <div class="list-group-item"> Top Chat replay </div> <div class="list-group-item"> <div class="media"> <div class="media-left"> <img src="https://www.w3schools.com/bootstrap/img_avatar1.png" class="media-object" style="width:45px"> </div> <div class="media-body"> <h4 class="media-heading">John Doe <small><i>Posted on February 19, 2016</i></small></h4> <p>Lorem ipsum dolor sit iqua.</p> </div> <br /> <div class="media"> <div class="media-left"> <img src="https://www.w3schools.com/bootstrap/img_avatar1.png" class="media-object" style="width:45px"> </div> <div class="media-body"> <h4 class="media-heading">John Doe <small><i>Posted on February 19, 2016</i></small></h4> <p>Lorem ipsum dolor sit iqua.</p> </div> <br /> <div class="media"> <div class="media-left"> <img src="https://www.w3schools.com/bootstrap/img_avatar1.png" class="media-object" style="width:45px"> </div> <div class="media-body"> <h4 class="media-heading">John Doe <small><i>Posted on February 19, 2016</i></small></h4> <p>Lorem ipsum dolor sit iqua.</p> </div> <br /> <div class="media"> <div class="media-left"> <img src="https://www.w3schools.com/bootstrap/img_avatar1.png" class="media-object" style="width:45px"> </div> <div class="media-body"> <h4 class="media-heading">John Doe <small><i>Posted on February 19, 2016</i></small></h4> <p>Lorem ipsum dolor sit iqua.</p> </div> <br /> <div class="media"> <div class="media-left"> <img src="https://www.w3schools.com/bootstrap/img_avatar1.png" class="media-object" style="width:45px"> </div> <div class="media-body"> <h4 class="media-heading">John Doe <small><i>Posted on February 19, 2016</i></small></h4> <p>Lorem ipsum dolor sit iqua.</p> </div> </div> </div> </body> </html>

Related: See More

Full Calendar

Questions / Comments: