"Reviews with panels & schema"
Bootstrap 3.3.0 Snippet by jerryschrader

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="//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; }

Related: See More

Now UI Kit Angular
Portlets (like panels)
Carousel Reviews with Rating - three items
Panels with nav tabs

Questions / Comments:

Hello Jerry...when i paste the code of this snippet on a page, it displays okay but it forces the content of that page to move to the left and make the fonts bigger in appearance. Is there a solution to this?

csng (0) - 6 years ago - Reply 0

It depends on what is already on your page, but I would assume that you need to move YOUR custom stylesheet AFTER the bootstrap stylesheet, so kind of like this:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">

<link href="YOURCUSTOMSTYLESHEETURL" rel="stylesheet">

That way the Bootstrap styles do not override your custom styles :)

jerryschrader (1) - 6 years ago - Reply 0

Hi Jerry,

I am having problems to Add your review code to my page in squarespace. I add the html code in a code block and the css part in the custom css tool. It does not look like the one showing up here. What can I do? Thanks!

oaviles (0) - 6 years ago - Reply 0

Have you linked to Bootstrap and jQuery? http://getbootstrap.com/docs/3.3/

jerryschrader (1) - 6 years ago - Reply 1

I paste "Bootstrap CDN" from the url that you gave me. The review block looks great, like here. Now the problem is that when I pasted "Bootstrap CDN" changed the font color of all my pages. Any solution?

oaviles (0) - 6 years ago - Reply 0

Make sure your custom stylesheet comes after the bootstrap link, so your custom styles handle the font colors.

jerryschrader (1) - 6 years ago - Reply 1

Thanks so much for your time and support. It is working fine!! :)

oaviles (0) - 6 years ago - Reply 0

You are the best!! Thanks so much!!

oaviles (0) - 6 years ago - Reply 0

No problem, and remember, this has the Rich Schema in it, so Google will pick them up and display the stars in search results!

jerryschrader (1) - 6 years ago - Reply 0