<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <div class="container"> <h1>Customer Reviews</h1> <p>These require links to be setup, but are a great starting point for schema and appearance.</p> <div class="row-fluid"> <div class="col-sm-6"> <div class="panel panel-default"> <div class="panel-heading"> <span itemscope itemtype="http://schema.org/Review"> <h3 class="panel-title" itemprop="name">Review Title</h3> </div><!--/panel-heading--> <div class="panel-body" itemprop="reviewBody"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil quaerat aperiam unde nemo suscipit id repellendus ad doloribus quae, fugiat quia rem molestias sequi, amet nisi qui cumque iusto earum!</p> <span itemprop="author" itemscope itemtype="http://schema.org/Person"> <small> <span itemprop="name">-- J. Reviewer</span> </span><!--/author schema --> <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span> <meta itemprop="datePublished" content="01-01-2016">01-01-2016 <span class="pull-right"> <span class="reviewRating" itemscope itemtype="http://schema.org/Rating"> <meta itemprop="worstRating" content="1"> <span itemprop="ratingValue">5</span> / <span itemprop="bestRating"> stars </span> </span><!--/reviewRating--> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> </small> </div><!--/panel-body--> <div class="panel-footer clearfix"> <div class="col-sm-1"><i class="fa fa-facebook-official fa-2x"></i></div> <div class="col-sm-1"><i class="fa fa-twitter-square fa-2x"></i></div> <div class="col-sm-1"><i class="fa fa-google-plus fa-2x"></i></div> </div><!--/panel-footer--> </div><!--/panel--> </div><!--/col-sm-6--> <div class="col-sm-6"> <div class="panel panel-default"> <div class="panel-heading"> <span itemscope itemtype="http://schema.org/Review"> <h3 class="panel-title" itemprop="name">Review Title</h3> </div><!--/panel-heading--> <div class="panel-body" itemprop="reviewBody"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil quaerat aperiam unde nemo suscipit id repellendus ad doloribus quae, fugiat quia rem molestias sequi, amet nisi qui cumque iusto earum!</p> <span itemprop="author" itemscope itemtype="http://schema.org/Person"> <small> <span itemprop="name">-- J. Reviewer</span> </span><!--/author schema --> <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span> <meta itemprop="datePublished" content="01-01-2016">01-01-2016 <span class="pull-right"> <span class="reviewRating" itemscope itemtype="http://schema.org/Rating"> <meta itemprop="worstRating" content="1"> <span itemprop="ratingValue">5</span> / <span itemprop="bestRating"> stars </span> </span><!--/reviewRating--> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> </small> </div><!--/panel-body--> <div class="panel-footer clearfix"> <div class="col-sm-1"><i class="fa fa-facebook-official fa-2x"></i></div> <div class="col-sm-1"><i class="fa fa-twitter-square fa-2x"></i></div> <div class="col-sm-1"><i class="fa fa-google-plus fa-2x"></i></div> </div><!--/panel-footer--> </div><!--/panel--> </div><!--/col-sm-6--> </div><!--/row (1) --> <hr /> <div class="row-fluid"> <div class="col-sm-6"> <div class="panel panel-default"> <div class="panel-heading"> <span itemscope itemtype="http://schema.org/Review"> <h3 class="panel-title" itemprop="name">Review Title</h3> </div><!--/panel-heading--> <div class="panel-body" itemprop="reviewBody"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil quaerat aperiam unde nemo suscipit id repellendus ad doloribus quae, fugiat quia rem molestias sequi, amet nisi qui cumque iusto earum!</p> <span itemprop="author" itemscope itemtype="http://schema.org/Person"> <small> <span itemprop="name">-- J. Reviewer</span> </span><!--/author schema --> <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span> <meta itemprop="datePublished" content="01-01-2016">01-01-2016 <span class="pull-right"> <span class="reviewRating" itemscope itemtype="http://schema.org/Rating"> <meta itemprop="worstRating" content="1"> <span itemprop="ratingValue">5</span> / <span itemprop="bestRating"> stars </span> </span><!--/reviewRating--> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> </small> </div><!--/panel-body--> <div class="panel-footer clearfix"> <div class="col-sm-1"><i class="fa fa-facebook-official fa-2x"></i></div> <div class="col-sm-1"><i class="fa fa-twitter-square fa-2x"></i></div> <div class="col-sm-1"><i class="fa fa-google-plus fa-2x"></i></div> </div><!--/panel-footer--> </div><!--/panel--> </div><!--/col-sm-6--> <div class="col-sm-6"> <div class="panel panel-default"> <div class="panel-heading"> <span itemscope itemtype="http://schema.org/Review"> <h3 class="panel-title" itemprop="name">Review Title</h3> </div><!--/panel-heading--> <div class="panel-body" itemprop="reviewBody"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil quaerat aperiam unde nemo suscipit id repellendus ad doloribus quae, fugiat quia rem molestias sequi, amet nisi qui cumque iusto earum!</p> <span itemprop="author" itemscope itemtype="http://schema.org/Person"> <small> <span itemprop="name">-- J. Reviewer</span> </span><!--/author schema --> <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span> <meta itemprop="datePublished" content="01-01-2016">01-01-2016 <span class="pull-right"> <span class="reviewRating" itemscope itemtype="http://schema.org/Rating"> <meta itemprop="worstRating" content="1"> <span itemprop="ratingValue">5</span> / <span itemprop="bestRating"> stars </span> </span><!--/reviewRating--> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> </small> </div><!--/panel-body--> <div class="panel-footer clearfix"> <div class="col-sm-1"><i class="fa fa-facebook-official fa-2x"></i></div> <div class="col-sm-1"><i class="fa fa-twitter-square fa-2x"></i></div> <div class="col-sm-1"><i class="fa fa-google-plus fa-2x"></i></div> </div><!--/panel-footer--> </div><!--/panel--> </div><!--/col-sm-6--> </div><!--/row (2) --> <hr /> <div class="row-fluid"> <div class="col-sm-6"> <div class="panel panel-default"> <div class="panel-heading"> <span itemscope itemtype="http://schema.org/Review"> <h3 class="panel-title" itemprop="name">Review Title</h3> </div><!--/panel-heading--> <div class="panel-body" itemprop="reviewBody"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil quaerat aperiam unde nemo suscipit id repellendus ad doloribus quae, fugiat quia rem molestias sequi, amet nisi qui cumque iusto earum!</p> <span itemprop="author" itemscope itemtype="http://schema.org/Person"> <small> <span itemprop="name">-- J. Reviewer</span> </span><!--/author schema --> <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span> <meta itemprop="datePublished" content="01-01-2016">01-01-2016 <span class="pull-right"> <span class="reviewRating" itemscope itemtype="http://schema.org/Rating"> <meta itemprop="worstRating" content="1"> <span itemprop="ratingValue">5</span> / <span itemprop="bestRating"> stars </span> </span><!--/reviewRating--> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> </small> </div><!--/panel-body--> <div class="panel-footer clearfix"> <div class="col-sm-1"><i class="fa fa-facebook-official fa-2x"></i></div> <div class="col-sm-1"><i class="fa fa-twitter-square fa-2x"></i></div> <div class="col-sm-1"><i class="fa fa-google-plus fa-2x"></i></div> </div><!--/panel-footer--> </div><!--/panel--> </div><!--/col-sm-6--> <div class="col-sm-6"> <div class="panel panel-default"> <div class="panel-heading"> <span itemscope itemtype="http://schema.org/Review"> <h3 class="panel-title" itemprop="name">Review Title</h3> </div><!--/panel-heading--> <div class="panel-body" itemprop="reviewBody"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil quaerat aperiam unde nemo suscipit id repellendus ad doloribus quae, fugiat quia rem molestias sequi, amet nisi qui cumque iusto earum!</p> <span itemprop="author" itemscope itemtype="http://schema.org/Person"> <small> <span itemprop="name">-- J. Reviewer</span> </span><!--/author schema --> <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span> <meta itemprop="datePublished" content="01-01-2016">01-01-2016 <span class="pull-right"> <span class="reviewRating" itemscope itemtype="http://schema.org/Rating"> <meta itemprop="worstRating" content="1"> <span itemprop="ratingValue">5</span> / <span itemprop="bestRating"> stars </span> </span><!--/reviewRating--> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> </small> </div><!--/panel-body--> <div class="panel-footer clearfix"> <div class="col-sm-1"><i class="fa fa-facebook-official fa-2x"></i></div> <div class="col-sm-1"><i class="fa fa-twitter-square fa-2x"></i></div> <div class="col-sm-1"><i class="fa fa-google-plus fa-2x"></i></div> </div><!--/panel-footer--> </div><!--/panel--> </div><!--/col-sm-6--> </div><!--/row (3) --> </div><!--/container-->

.glyphicon-star { color:gold; } span.glyphicon-calendar { padding-left:20px; } .fa-facebook-official { color:#3b5998;; } .fa-twitter-square { color:#00aced; } .fa-google-plus { color: #dd4b39; }