"Facebook Homepage"
Bootstrap 4.1.1 Snippet by snippetpi

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 ----------> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <!-- details card section starts from here --> <style type="text/css"> <!-- .style1 {font-size: 10px} --> </style> </head> <body> <div class="well" style="height:100%; margin-top:50px;"> <div class="row"> <div class="col-lg-3"> <?php <?php echo "Left Starts Here"; ?> <div class="list-group-item"> Links </div> <br /> <?php echo "Left Ends Here"; ?> </div> <div class="col-lg-4"> <?php echo "Reminder Starts Here"; ?> <div class="list-group-item"> Reminder </div> <br /> <?php echo "Reminder Ends Here"; ?> <div class="list-group-item"> <form> <textarea name="post" cols="32" rows="3"></textarea> <input name="submit" type="submit" class="pull-right" value="submit" /> </form> </div> <br /> <?php echo "include Starts Here"; ?> <div class="list-group-item"> <div> <div class="pull-left"> <img name="" src="https://placeimg.com/380/230/nature" class="img-circle" width="32px" height="32px" alt="" /> </div> <div class="pull-left"> Sam Clyde Band Artist<br /> 2 hrs ago </div> <div class="pull-right"> ... </div> </div> <br /> <div> <br /> <div class="panel-body"><p>Content</p></div> <div class="row" align="center"> <img name="" src="https://placeimg.com/380/230/nature" width="100%" height="200px" alt="" /> <br /><iframe width="100%" height="315" src="https://www.youtube.com/embed/O8xMk3Tr7Mo" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> <iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/310662652&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"></iframe> <iframe width="100%" height="265" scrolling="no" frameborder="no" src="https://www.reverbnation.com/widget_code/html_widget/artist_3545557?widget_id=55&pwc[included_songs]=1&context_type=page_object&pwc[size]=small" style="width:0px;min-width:100%;max-width:100%;"></iframe> <a class="spreaker-player" href="https://www.spreaker.com/user/yashqaraah/love-isnt-enough" data-resource="episode_id=15932591" data-theme="light" data-autoplay="false" data-playlist="false" data-cover="https://d3wo5wojvuv7l.cloudfront.net/images.spreaker.com/original/38d64a980cf64044072e9163b336e126.jpg" data-width="100%" data-height="166px">Listen to "LOVE isn't Enough" on Spreaker.</a><script async src="https://widget.spreaker.com/widgets.js"></script> <br /> <img name="" src="https://www.boxing247.com/wp-content/uploads/2018/09/crawford.jpg" width="100%" height="200px" alt="" /> <blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Daughters of Christ Walking In Confidence <a href="https://t.co/2WYAKYygeJ">https://t.co/2WYAKYygeJ</a> ,.<a href="https://twitter.com/DOCcansang?ref_src=twsrc%5Etfw">@DOCcansang</a> radio_spin_ID#:88</p>— FSC Radio Philadelphia (@fscradio) <a href="https://twitter.com/fscradio/status/1051603082658885637?ref_src=twsrc%5Etfw">October 14, 2018</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> <iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fpinkfloydchannell%2Fvideos%2F1820711631336243%2F&show_text=0&width=560" width="100%" height="407" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe> </div> </div> <hr /> <div class="row" align="center"> <div class="col-lg-4"> Like </div> <div class="col-lg-4"> Share </div> <div class="col-lg-4"> Comment </div> </div> </div> <div class="list-group-item" align="center"> <form> <input type="text" size="32px" name="comment" /> <input type="submit" name="submit" /> </form> </div> <div class="list-group-item" align="center"> <strong>Comments</strong> </div> <div class="list-group-item"> <img name="" src="https://www.powerengineers.com/resources/Pictures/cropped-ad-banner-xclsv-728x90.gif" width="100%" height="90px" alt="" /> </div> <br /> <?php echo "include Ends Here"; ?> </div> <div class="col-lg-3"> <?php echo "Ad Loop Starts Here"; ?> <div class="list-group-item"> Stories </div> <br /> <div class="list-group-item"> Reminders </div> <br /> <div class="list-group-item"> Sponsored Ads </div> <br /> <div class="list-group-item"> Events </div> <br /> <div class="list-group-item"> Pages </div> <br /> <div class="list-group-item"> Radio Shows </div> <br /> <div class="list-group-item"> Nowplaying </div> <br /> <div class="list-group-item"> Post </div> <br /> <div class="list-group-item"> Games </div> <br /> <div class="list-group-item"> Movies </div> <br /> <div class="list-group-item"> Trainings </div> <br /> <div class="list-group-item"> Footer </div> <?php echo "Ad Loop Ends Here"; ?> </div> <div class="col-lg-2"> <?php echo "Right Starts Here"; ?> <div class="list-group-item"> <table width="75%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="6%"><img name="" src="https://www.powerengineers.com/resources/Pictures/cropped-ad-banner-xclsv-728x90.gif" width="44" height="47" class="img-circle" alt="" /></td> <td width="7%"><div align="left"></div></td> <td width=""><div align="left"><a href="#" class="style1">Sam Clyde Band</a></div></td> </tr> </table> </div> <br /> <?php echo "Right Ends Here"; ?> </div> </div> </div> </body> </html>

Related: See More

Now UI Kit
Facebook style signup form

Questions / Comments: