"music-profile-page-template"
Bootstrap 3.0.0 Snippet by snippetpi

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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> <head> <title> </title> </head> <body style="background-color: #DCDCDC;"> <div class="container"> <div class="row"> <div class="col-md-7"> <div> <h3> <a href="https://fscradiolibrary.com/songs/eight-one-prod-by-dzony-beatz-mn2414238505" title="SNyD" target="_blank"> 81 - SNYD </a> <span class="label label-default" style="font-size:12px;">2 mins</span> <span class="label label-default" style="font-size:12px;">128kbs</span> <span class="label label-default" style="font-size:12px;">MP3</span> <span class="label label-default" style="font-size:12px;">Indie-Rap</span> <span class="label label-default" style="font-size:12px;">Rank: 322</span> <span class="label label-default" style="font-size:12px;">Rating: 2.6</span> <span class="label label-default" style="font-size:12px;">Explicit</span> </h3> <img name="" src="https://fscradiolibrary.com/upload/Album-Art/81-prod-by-dzony-beatz-streetzemp-young_deuces-mi4738648511.jpg" width="100%" height="470px" alt="SNYD"> </div> <div class="col-md-12" style="margin-top:20px; margin-bottom:40px;"> <div class="pull-left"> <span class="h3" > <b>700 </b>views</span> </div> <div class="pull-right"> <!----> <button type="button" class="btn btn-default btn-sm" onClick="window.open('','pagename2','resizable,height=50,width=220'); return false;"> <span class="glyphicon glyphicon-thumbs-up"></span> 0 </button> <button type="button" class="btn btn-default btn-sm" onClick="window.open('','pagename2','resizable,height=50,width=220'); return false;"> <span class="glyphicon glyphicon-thumbs-down"></span> 0 </button> <button type="button" class="btn btn-primary btn-sm" onClick="window.open('','pagename66','resizable,height=200,width=650'); return false;"> Listen <?php //echo $totalRows_request ?> </button> <!-- Trigger the modal with a button --> <button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal_33">Request</button> <!-- <a href="<?php echo $root."/request/".$music_name; ?>" class="btn btn-info" title="Request <?php echo $music_title; ?> on FSC Radio Library">Request</a> --> <a href="" class="btn btn-info btn-sm" title="Request on FSC Radio Library">Downloads</a> <button class="btn btn-default btn-sm" data-toggle="modal" data-target="#myModal_share"> <i style="font-size:16px" class="fa"></i> Share </button> <!-- --> <button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#myModal_report"> Report </button> </div> </div> </div> <div class="col-md-5"> <h1>...</h1> <!-- Rating Start --> <div class="list-group-item" style="margin-bottom:20px;" > <div class="container"> <div class="row"> <div class="col-md-12"> <div class=""> <div class="row"> <div class="col-xs-6 col-md-6 text-center"> <h1 class="rating-num"> 2.6</h1> <div class="rating"> <span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"> </span><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"> </span><span class="glyphicon glyphicon-star-empty"></span> </div> <div> <span class="glyphicon glyphicon-user"></span>1,050,008 total </div> </div> <div class="col-xs-6 col-md-6"> <div class="row rating-desc"> <div class="col-xs-3 col-md-3 text-right"> <span class="glyphicon glyphicon-star"></span>5 </div> <div class="col-xs-8 col-md-9"> <div class="progress progress-striped"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 80%"> <span class="sr-only">80%</span> </div> </div> </div> <!-- end 5 --> <div class="col-xs-3 col-md-3 text-right"> <span class="glyphicon glyphicon-star"></span>4 </div> <div class="col-xs-8 col-md-9"> <div class="progress"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 60%"> <span class="sr-only">60%</span> </div> </div> </div> <!-- end 4 --> <div class="col-xs-3 col-md-3 text-right"> <span class="glyphicon glyphicon-star"></span>3 </div> <div class="col-xs-8 col-md-9"> <div class="progress"> <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 40%"> <span class="sr-only">40%</span> </div> </div> </div> <!-- end 3 --> <div class="col-xs-3 col-md-3 text-right"> <span class="glyphicon glyphicon-star"></span>2 </div> <div class="col-xs-8 col-md-9"> <div class="progress"> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"> <span class="sr-only">20%</span> </div> </div> </div> <!-- end 2 --> <div class="col-xs-3 col-md-3 text-right"> <span class="glyphicon glyphicon-star"></span>1 </div> <div class="col-xs-8 col-md-9"> <div class="progress"> <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 15%"> <span class="sr-only">15%</span> </div> </div> </div> <!-- end 1 --> </div> <!-- end row --> </div> </div> </div> </div> </div> </div> </div> <!-- Rating End --> <!-- Ad Banner --> <div class="list-group-item" style="margin-bottom:20px;" align="center"> <iframe src="https://www.fscradiolibrary.com/ads/ads.php" style="border:0px #ffffff none;" name="adbanners" scrolling="no" frameborder="1" marginheight="0px" marginwidth="0px" height="350px" width="100%" allowfullscreen></iframe> </div> <!-- Ad Banner --> <!-- Block 3 --> <div class="list-group-item" style="margin-bottom:20px;" align="center"> <h1> Join Us Rock </h1> <h3>Fans</h3> </div> <!-- Block 3 --> <!-- Block 4 --> <div class="list-group-item" style="margin-bottom:20px;"> <h3>Nowplaying</h3> <table width="100%" border="0"> <tr> <td width="23%" rowspan="3" valign="top"><img name="" src="https://fscradiolibrary.com/upload/Album-Art/4-of-july-ft-ganktown-durt-mi4452900560.jpg" width="150px" height="118" alt="" /></td> <td width="77%">4th of July</td> </tr> <tr> <td>Carolina Reign</td> </tr> <tr> <td>Indie Hip-Hop Radio</td> </tr> </table> </div> <!-- Block 4 --> </div> </div> </div> </body> </html>
/* http://www.snippetpi.com/ */ body{ margin-top:20px;} .glyphicon { margin-right:5px;} .rating .glyphicon {font-size: 22px;} .rating-num { margin-top:0px;font-size: 54px; } .progress { margin-bottom: 5px;} .progress-bar { text-align: left; } .rating-desc .col-md-3 {padding-right: 0px;} .sr-only { margin-left: 5px;overflow: visible;clip: auto; }

Related: See More

Vue Argon Design System
Responsive Invoice template
BS4 clean & simple invoice template
Elegant Bootstrap 4 message chat box template

Questions / Comments: