content logo
Bootstrap Grids: Bootstrap Profile Grid Lists

Suppose that you need to name various teachers, students, users, etc. in your page. Bootstrap helps you manage this by creating grids. In the following example, grids are sorted not only vertically, but also horizontally along the page based on the platform width. Enjoy!

#Bootstrap Profile Grids #Bootstrap List Grids #Bootstrap Grids #Bootstrap Lists
<!-- this script got from www.frontendfreecode.com -->
<div class="wrapper wrapper-light"> <div class="scrollable-container"> <div class="scrollable-cards"> <div class="card-h"> <div class="card-thumbnail"> <img src="http://frontendfreecode.com/codes/files/grid-1.jpg"> <div class="tag tag-primary card-tag"> <svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M6.32595 11.2559L5.56198 10.556C2.84698 8.094 1.05398 6.47002 1.05398 4.47702C1.0501 4.0951 1.12245 3.71623 1.26681 3.36264C1.41118 3.00904 1.62467 2.68776 1.89474 2.41769C2.16481 2.14762 2.48603 1.93425 2.83963 1.78988C3.19322 1.64552 3.57209 1.57311 3.95401 1.57699C4.40501 1.58027 4.85002 1.68009 5.25918 1.86984C5.66834 2.05958 6.0321 2.33482 6.32595 2.67697C6.61981 2.33482 6.98357 2.05958 7.39273 1.86984C7.80189 1.68009 8.24696 1.58027 8.69796 1.57699C9.07984 1.57325 9.45863 1.64571 9.81216 1.79013C10.1657 1.93454 10.4869 2.14802 10.7569 2.41806C11.027 2.68809 11.2404 3.00922 11.3849 3.36276C11.5293 3.71629 11.6017 4.09514 11.598 4.47702C11.598 6.47002 9.80599 8.094 7.08999 10.561L6.32595 11.2559Z" fill="#1A1A1A"/> </svg> Practitioner of the week </div> <div class="card-specialties"> ART THERAPY </div> </div> <div class="card-body"> <h3 class="card-title"> Comfort reflexology & Expression by the rhythm </h3> <div class="card-name"> Alice Larrabure </div> </div> <div class="card-foot"> <div class="card-rating"> <div class="stars"> <svg width="10px" viewBox="0 0 20 20" fill="#FFD100"> <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78"> </svg> <svg width="10px" viewBox="0 0 20 20" fill="#FFD100"> <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78"> </svg> <svg width="10px" viewBox="0 0 20 20" fill="#FFD100"> <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78"> </svg> <svg width="10px" viewBox="0 0 20 20" fill="#FFD100"> <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78"> </svg> <svg width="10px" viewBox="0 0 20 20" fill="#FFD100"> <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78"> </svg> </div> 7 comments </div> </div> </div> <div class="card-h"> <div class="card-thumbnail"> <img src="http://frontendfreecode.com/codes/files/grid-2.jpg"> <div class="card-specialties"> Access Bars® <br> NATUROPATHIE <br> NUTRITION <br> PLANTS & ESSENTIAL OILS </div> </div> <div class="card-body"> <h3 class="card-title"> Comfort reflexology </h3> <div class="card-name"> Farah Benwahoud </div> </div> <div class="card-foot"> <div class="card-rating"> <div class="stars"> <svg width="10px" viewBox="0 0 20 20" fill="#FFD100"> <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78"> </svg> <svg width="10px" viewBox="0 0 20 20" fill="#FFD100"> <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78"> </svg> <svg width="10px" viewBox="0 0 20 20" fill="#FFD100"> <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78"> </svg> <svg width="10px" viewBox="0 0 20 20" fill="#FFD100"> <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78"> </svg> <svg width="10px" viewBox="0 0 20 20" fill="#FFD100"> <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78"> </svg> </div> 20 comments </div> </div> </div> <div class="card-h"> <div class="card-thumbnail"> <img src="http://frontendfreecode.com/codes/files/grid-3.jpg"> <div class="card-specialties"> EMDR <br> PSYCHO-ENERGY <br> RESPIRATION HOLOTROPIQUE </div> </div> <div class="card-body"> <h3 class="card-title"> Window on oneself and creativity : Clayfield®, Soulcollage® </h3> <div class="card-name"> Solange Lemoine </div> </div> <div class="card-foot"> <div class="card-rating"> <div class="stars"> <svg width="10px" viewBox="0 0 20 20" fill="#FFD100"> <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78"> </svg> <svg width="10px" viewBox="0 0 20 20" fill="#FFD100"> <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78"> </svg> <svg width="10px" viewBox="0 0 20 20" fill="#FFD100"> <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78"> </svg> <svg width="10px" viewBox="0 0 20 20" fill="#FFD100"> <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78"> </svg> <svg width="10px" viewBox="0 0 20 20" fill="#FFD100"> <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78"> </svg> </div> 45 comments </div> </div> </div> <div class="card-h"> <div class="card-thumbnail"> <img src="http://frontendfreecode.com/codes/files/grid-4.jpg"> <div class="card-specialties"> YOGA <br> ENERGY YOGA <br> RUNNING <br> </div> </div> <div class="card-body"> <h3 class="card-title"> Running Yoga </h3> <div class="card-name"> Philippe Carralou </div> </div> <div class="card-foot"> <div class="card-rating"> <div class="stars"> <svg width="10px" viewBox="0 0 20 20" fill="#FFD100"> <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78"> </svg> <svg width="10px" viewBox="0 0 20 20" fill="#FFD100"> <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78"> </svg> <svg width="10px" viewBox="0 0 20 20" fill="#FFD100"> <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78"> </svg> <svg width="10px" viewBox="0 0 20 20" fill="#FFD100"> <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78"> </svg> <svg width="10px" viewBox="0 0 20 20" fill="#FFD100"> <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78"> </svg> </div> 12 comments </div> </div> </div> <div class="card-h"> <div class="card-thumbnail"> <img src="http://frontendfreecode.com/codes/files/grid-1.jpg"> <div class="card-specialties"> ART THERAPY </div> </div> <div class="card-body"> <h3 class="card-title"> Comfort reflexology & Expression by the rhythm </h3> <div class="card-name"> Alice Larrabure </div> </div> <div class="card-foot"> <div class="card-rating"> <div class="stars"> <svg width="10px" viewBox="0 0 20 20" fill="#FFD100"> <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78"> </svg> <svg width="10px" viewBox="0 0 20 20" fill="#FFD100"> <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78"> </svg> <svg width="10px" viewBox="0 0 20 20" fill="#FFD100"> <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78"> </svg> <svg width="10px" viewBox="0 0 20 20" fill="#FFD100"> <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78"> </svg> <svg width="10px" viewBox="0 0 20 20" fill="#FFD100"> <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78"> </svg> </div> 7 comments </div> </div> </div> <div class="card-h"> <div class="card-thumbnail"> <img src="http://frontendfreecode.com/codes/files/grid-2.jpg"> <div class="card-specialties"> Access Bars® <br> NATUROPATHIE <br> NUTRITION <br> PLANTS & ESSENTIAL OILS </div> </div> <div class="card-body"> <h3 class="card-title"> Comfort reflexology </h3> <div class="card-name"> Farah Benwahoud </div> </div> <div class="card-foot"> <div class="card-rating"> <div class="stars"> <svg width="10px" viewBox="0 0 20 20" fill="#FFD100"> <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78"> </svg> <svg width="10px" viewBox="0 0 20 20" fill="#FFD100"> <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78"> </svg> <svg width="10px" viewBox="0 0 20 20" fill="#FFD100"> <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78"> </svg> <svg width="10px" viewBox="0 0 20 20" fill="#FFD100"> <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78"> </svg> <svg width="10px" viewBox="0 0 20 20" fill="#FFD100"> <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78"> </svg> </div> 20 comments </div> </div> </div> <div class="card-h"> <div class="card-thumbnail"> <img src="http://frontendfreecode.com/codes/files/grid-3.jpg"> <div class="card-specialties"> EMDR <br> PSYCHO-ENERGY <br> RESPIRATION HOLOTROPIQUE </div> </div> <div class="card-body"> <h3 class="card-title"> Window on oneself and creativity : Clayfield®, Soulcollage® </h3> <div class="card-name"> Solange Lemoine </div> </div> <div class="card-foot"> <div class="card-rating"> <div class="stars"> <svg width="10px" viewBox="0 0 20 20" fill="#FFD100"> <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78"> </svg> <svg width="10px" viewBox="0 0 20 20" fill="#FFD100"> <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78"> </svg> <svg width="10px" viewBox="0 0 20 20" fill="#FFD100"> <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78"> </svg> <svg width="10px" viewBox="0 0 20 20" fill="#FFD100"> <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78"> </svg> <svg width="10px" viewBox="0 0 20 20" fill="#FFD100"> <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78"> </svg> </div> 45 comments </div> </div> </div> <div class="card-h"> <div class="card-thumbnail"> <img src="http://frontendfreecode.com/codes/files/grid-4.jpg"> <div class="card-specialties"> YOGA <br> ENERGY YOGA <br> RUNNING <br> </div> </div> <div class="card-body"> <h3 class="card-title"> Running Yoga </h3> <div class="card-name"> Philippe Carralou </div> </div> <div class="card-foot"> <div class="card-rating"> <div class="stars"> <svg width="10px" viewBox="0 0 20 20" fill="#FFD100"> <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78"> </svg> <svg width="10px" viewBox="0 0 20 20" fill="#FFD100"> <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78"> </svg> <svg width="10px" viewBox="0 0 20 20" fill="#FFD100"> <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78"> </svg> <svg width="10px" viewBox="0 0 20 20" fill="#FFD100"> <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78"> </svg> <svg width="10px" viewBox="0 0 20 20" fill="#FFD100"> <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78"> </svg> </div> 12 comments </div> </div> </div> </div> </div> </div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://www.frontendfreecode.com">Frontend Code</a>
body {
  font-size: 14px;
}

.tag {
  border-radius: 4px;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: bold;
  padding: 3px;
}

.tag-primary {
  background-color: #FFD100;
}

.wrapper {
  padding: 26px 0;
}

.wrapper-light {
  background: #F6F6F6;
}

.card-h {
  scroll-snap-align: center;
  background: white;
  width: 240px;
  height: 320px;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
}
.card-h .card-thumbnail {
  height: 190px;
  position: relative;
  overflow: hidden;
}
.card-h .card-thumbnail img {
  display: block;
  width: 100%;
  height: 190px;
  -o-object-fit: cover;
     object-fit: cover;
}
.card-h .card-tag {
  position: absolute;
  top: 10px;
  left: 10px;
}
.card-h .card-body {
  padding: 14px 20px 0;
  -webkit-box-flex: 1;
          flex: 1;
}
.card-h .card-foot {
  padding: 0 20px 14px 20px;
}
.card-h .card-title {
  font-size: 14px;
  font-weight: bold;
  position: relative;
  overflow: hidden;
  white-space: normal;
  margin-bottom: 6px;
  max-height: 52px;
}
.card-h .card-name {
  max-height: 42px;
  line-height: 16px;
}
.card-h .card-rating {
  self-align: flex-end;
  -webkit-box-align: center;
          align-items: center;
  display: -webkit-box;
  display: flex;
  font-size: 12px;
  font-weight: bold;
}
.card-h .card-rating .stars {
  margin-top: -2px;
  margin-right: 10px;
}
.card-h .card-specialties {
  text-transform: uppercase;
  position: absolute;
  font-size: 10px;
  bottom: 0;
  left: 0;
  right: 0;
  color: white;
  padding: 14px 20px 14px;
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.6)), to(rgba(0, 0, 0, 0)));
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
}

.scrollable-container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 992px) {
  .scrollable-container {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .scrollable-container {
    max-width: 1140px;
  }
}

.scrollable-cards {
  -ms-scroll-snap-type: x mandatory;
      scroll-snap-type: x mandatory;
  display: -webkit-box;
  display: flex;
  overflow-x: scroll;
  display: flex;
  padding: 5px;
  -webkit-overflow-scrolling: touch;
}
.scrollable-cards .card-h {
  flex-shrink: 0;
  margin: 5px 5px;
}
.scrollable-cards .card-h:last-child {
  border-right: 10px solid #F6F6F6;
}

@media (min-width: 992px) {
  .scrollable-cards {
    flex-wrap: wrap;
    -webkit-box-pack: center;
            justify-content: center;
    padding: 10px / 2 0;
  }
  .scrollable-cards .card-h {
    -webkit-box-flex: 0;
            flex: 0 0 calc(25% - 10px);
  }
  .scrollable-cards .card-h:last-child {
    border-right: 0;
  }
}
if (!CSS.supports('scroll-snap-align: start')) {
  scrollSnapPolyfill();
}
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'>
<script src='https://frontendfreecode.com/codes/files/scroll-snap.js'></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"><!-- this script got from www.frontendfreecode.com -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'>
<script src='https://frontendfreecode.com/codes/files/scroll-snap.js'></script>
<style>
body {
  font-size: 14px;
}

.tag {
  border-radius: 4px;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: bold;
  padding: 3px;
}

.tag-primary {
  background-color: #FFD100;
}

.wrapper {
  padding: 26px 0;
}

.wrapper-light {
  background: #F6F6F6;
}

.card-h {
  scroll-snap-align: center;
  background: white;
  width: 240px;
  height: 320px;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
}
.card-h .card-thumbnail {
  height: 190px;
  position: relative;
  overflow: hidden;
}
.card-h .card-thumbnail img {
  display: block;
  width: 100%;
  height: 190px;
  -o-object-fit: cover;
     object-fit: cover;
}
.card-h .card-tag {
  position: absolute;
  top: 10px;
  left: 10px;
}
.card-h .card-body {
  padding: 14px 20px 0;
  -webkit-box-flex: 1;
          flex: 1;
}
.card-h .card-foot {
  padding: 0 20px 14px 20px;
}
.card-h .card-title {
  font-size: 14px;
  font-weight: bold;
  position: relative;
  overflow: hidden;
  white-space: normal;
  margin-bottom: 6px;
  max-height: 52px;
}
.card-h .card-name {
  max-height: 42px;
  line-height: 16px;
}
.card-h .card-rating {
  self-align: flex-end;
  -webkit-box-align: center;
          align-items: center;
  display: -webkit-box;
  display: flex;
  font-size: 12px;
  font-weight: bold;
}
.card-h .card-rating .stars {
  margin-top: -2px;
  margin-right: 10px;
}
.card-h .card-specialties {
  text-transform: uppercase;
  position: absolute;
  font-size: 10px;
  bottom: 0;
  left: 0;
  right: 0;
  color: white;
  padding: 14px 20px 14px;
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.6)), to(rgba(0, 0, 0, 0)));
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
}

.scrollable-container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 992px) {
  .scrollable-container {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .scrollable-container {
    max-width: 1140px;
  }
}

.scrollable-cards {
  -ms-scroll-snap-type: x mandatory;
      scroll-snap-type: x mandatory;
  display: -webkit-box;
  display: flex;
  overflow-x: scroll;
  display: flex;
  padding: 5px;
  -webkit-overflow-scrolling: touch;
}
.scrollable-cards .card-h {
  flex-shrink: 0;
  margin: 5px 5px;
}
.scrollable-cards .card-h:last-child {
  border-right: 10px solid #F6F6F6;
}

@media (min-width: 992px) {
  .scrollable-cards {
    flex-wrap: wrap;
    -webkit-box-pack: center;
            justify-content: center;
    padding: 10px / 2 0;
  }
  .scrollable-cards .card-h {
    -webkit-box-flex: 0;
            flex: 0 0 calc(25% - 10px);
  }
  .scrollable-cards .card-h:last-child {
    border-right: 0;
  }
}
</style>

</head>
<body>
<div class="wrapper wrapper-light">
  <div class="scrollable-container">
    <div class="scrollable-cards">

      <div class="card-h">
        <div class="card-thumbnail">
          <img src="http://frontendfreecode.com/codes/files/grid-1.jpg">
          <div class="tag tag-primary card-tag">
            <svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M6.32595 11.2559L5.56198 10.556C2.84698 8.094 1.05398 6.47002 1.05398 4.47702C1.0501 4.0951 1.12245 3.71623 1.26681 3.36264C1.41118 3.00904 1.62467 2.68776 1.89474 2.41769C2.16481 2.14762 2.48603 1.93425 2.83963 1.78988C3.19322 1.64552 3.57209 1.57311 3.95401 1.57699C4.40501 1.58027 4.85002 1.68009 5.25918 1.86984C5.66834 2.05958 6.0321 2.33482 6.32595 2.67697C6.61981 2.33482 6.98357 2.05958 7.39273 1.86984C7.80189 1.68009 8.24696 1.58027 8.69796 1.57699C9.07984 1.57325 9.45863 1.64571 9.81216 1.79013C10.1657 1.93454 10.4869 2.14802 10.7569 2.41806C11.027 2.68809 11.2404 3.00922 11.3849 3.36276C11.5293 3.71629 11.6017 4.09514 11.598 4.47702C11.598 6.47002 9.80599 8.094 7.08999 10.561L6.32595 11.2559Z" fill="#1A1A1A"/>
            </svg>
            Practitioner of the week
          </div>
          
          <div class="card-specialties">
            ART THERAPY
          </div>
        </div>
        <div class="card-body">
          <h3 class="card-title">
            Comfort reflexology & Expression by the rhythm
          </h3>
          <div class="card-name">
            Alice Larrabure
          </div>
        </div>
        <div class="card-foot">
          <div class="card-rating">
            <div class="stars">
              <svg width="10px" viewBox="0 0 20 20" fill="#FFD100">
                <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78">
              </svg>
              <svg width="10px" viewBox="0 0 20 20" fill="#FFD100">
                <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78">
              </svg>
              <svg width="10px" viewBox="0 0 20 20" fill="#FFD100">
                <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78">
              </svg>
              <svg width="10px" viewBox="0 0 20 20" fill="#FFD100">
                <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78">
              </svg>
              <svg width="10px" viewBox="0 0 20 20" fill="#FFD100">
                <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78">
              </svg>
            </div>
            7 comments
          </div>
        </div>
      </div>

      <div class="card-h">
        <div class="card-thumbnail">
          <img src="http://frontendfreecode.com/codes/files/grid-2.jpg">
          
          <div class="card-specialties">
            Access Bars® <br>
            NATUROPATHIE <br>
            NUTRITION <br>
            PLANTS & ESSENTIAL OILS
          </div>
        </div>
        <div class="card-body">
          <h3 class="card-title">
            Comfort reflexology
          </h3>
          <div class="card-name">
            Farah Benwahoud
          </div>
        </div>
        <div class="card-foot">
          <div class="card-rating">
            <div class="stars">
              <svg width="10px" viewBox="0 0 20 20" fill="#FFD100">
                <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78">
              </svg>
              <svg width="10px" viewBox="0 0 20 20" fill="#FFD100">
                <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78">
              </svg>
              <svg width="10px" viewBox="0 0 20 20" fill="#FFD100">
                <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78">
              </svg>
              <svg width="10px" viewBox="0 0 20 20" fill="#FFD100">
                <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78">
              </svg>
              <svg width="10px" viewBox="0 0 20 20" fill="#FFD100">
                <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78">
              </svg>
            </div>
            20 comments
          </div>
        </div>
      </div>
                
      <div class="card-h">
        <div class="card-thumbnail">
          <img src="http://frontendfreecode.com/codes/files/grid-3.jpg">
          <div class="card-specialties">
            EMDR <br>
            PSYCHO-ENERGY <br>
            RESPIRATION HOLOTROPIQUE
          </div>
        </div>
        <div class="card-body">
          <h3 class="card-title">
            Window on oneself and creativity : Clayfield®, Soulcollage®
          </h3>
          <div class="card-name">
            Solange Lemoine
          </div>
        </div>
        <div class="card-foot">
          <div class="card-rating">
            <div class="stars">
              <svg width="10px" viewBox="0 0 20 20" fill="#FFD100">
                <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78">
              </svg>
              <svg width="10px" viewBox="0 0 20 20" fill="#FFD100">
                <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78">
              </svg>
              <svg width="10px" viewBox="0 0 20 20" fill="#FFD100">
                <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78">
              </svg>
              <svg width="10px" viewBox="0 0 20 20" fill="#FFD100">
                <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78">
              </svg>
              <svg width="10px" viewBox="0 0 20 20" fill="#FFD100">
                <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78">
              </svg>
            </div>
            45 comments
          </div>
        </div>
      </div>

      <div class="card-h">
        <div class="card-thumbnail">
          <img src="http://frontendfreecode.com/codes/files/grid-4.jpg">
          
          <div class="card-specialties">
            YOGA <br>
            ENERGY YOGA <br>
            RUNNING <br>
          </div>
        </div>
        <div class="card-body">
          <h3 class="card-title">
            Running Yoga
          </h3>
          <div class="card-name">
            Philippe Carralou
          </div>
        </div>
        <div class="card-foot">
          <div class="card-rating">
            <div class="stars">
              <svg width="10px" viewBox="0 0 20 20" fill="#FFD100">
                <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78">
              </svg>
              <svg width="10px" viewBox="0 0 20 20" fill="#FFD100">
                <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78">
              </svg>
              <svg width="10px" viewBox="0 0 20 20" fill="#FFD100">
                <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78">
              </svg>
              <svg width="10px" viewBox="0 0 20 20" fill="#FFD100">
                <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78">
              </svg>
              <svg width="10px" viewBox="0 0 20 20" fill="#FFD100">
                <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78">
              </svg>
            </div>
            12 comments
          </div>
        </div>
      </div>

      <div class="card-h">
        <div class="card-thumbnail">
          <img src="http://frontendfreecode.com/codes/files/grid-1.jpg">
          <div class="card-specialties">
            ART THERAPY
          </div>
        </div>
        <div class="card-body">
          <h3 class="card-title">
            Comfort reflexology & Expression by the rhythm
          </h3>
          <div class="card-name">
            Alice Larrabure
          </div>
        </div>
        <div class="card-foot">
          <div class="card-rating">
            <div class="stars">
              <svg width="10px" viewBox="0 0 20 20" fill="#FFD100">
                <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78">
              </svg>
              <svg width="10px" viewBox="0 0 20 20" fill="#FFD100">
                <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78">
              </svg>
              <svg width="10px" viewBox="0 0 20 20" fill="#FFD100">
                <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78">
              </svg>
              <svg width="10px" viewBox="0 0 20 20" fill="#FFD100">
                <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78">
              </svg>
              <svg width="10px" viewBox="0 0 20 20" fill="#FFD100">
                <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78">
              </svg>
            </div>
            7 comments
          </div>
        </div>
      </div>

      <div class="card-h">
        <div class="card-thumbnail">
          <img src="http://frontendfreecode.com/codes/files/grid-2.jpg">
          
          <div class="card-specialties">
            Access Bars® <br>
            NATUROPATHIE <br>
            NUTRITION <br>
            PLANTS & ESSENTIAL OILS
          </div>
        </div>
        <div class="card-body">
          <h3 class="card-title">
            Comfort reflexology
          </h3>
          <div class="card-name">
            Farah Benwahoud
          </div>
        </div>
        <div class="card-foot">
          <div class="card-rating">
            <div class="stars">
              <svg width="10px" viewBox="0 0 20 20" fill="#FFD100">
                <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78">
              </svg>
              <svg width="10px" viewBox="0 0 20 20" fill="#FFD100">
                <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78">
              </svg>
              <svg width="10px" viewBox="0 0 20 20" fill="#FFD100">
                <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78">
              </svg>
              <svg width="10px" viewBox="0 0 20 20" fill="#FFD100">
                <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78">
              </svg>
              <svg width="10px" viewBox="0 0 20 20" fill="#FFD100">
                <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78">
              </svg>
            </div>
            20 comments
          </div>
        </div>
      </div>
                
      <div class="card-h">
        <div class="card-thumbnail">
          <img src="http://frontendfreecode.com/codes/files/grid-3.jpg">
          <div class="card-specialties">
            EMDR <br>
            PSYCHO-ENERGY <br>
            RESPIRATION HOLOTROPIQUE
          </div>
        </div>
        <div class="card-body">
          <h3 class="card-title">
            Window on oneself and creativity : Clayfield®, Soulcollage®
          </h3>
          <div class="card-name">
            Solange Lemoine
          </div>
        </div>
        <div class="card-foot">
          <div class="card-rating">
            <div class="stars">
              <svg width="10px" viewBox="0 0 20 20" fill="#FFD100">
                <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78">
              </svg>
              <svg width="10px" viewBox="0 0 20 20" fill="#FFD100">
                <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78">
              </svg>
              <svg width="10px" viewBox="0 0 20 20" fill="#FFD100">
                <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78">
              </svg>
              <svg width="10px" viewBox="0 0 20 20" fill="#FFD100">
                <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78">
              </svg>
              <svg width="10px" viewBox="0 0 20 20" fill="#FFD100">
                <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78">
              </svg>
            </div>
            45 comments
          </div>
        </div>
      </div>

      <div class="card-h">
        <div class="card-thumbnail">
          <img src="http://frontendfreecode.com/codes/files/grid-4.jpg">
          
          <div class="card-specialties">
            YOGA <br>
            ENERGY YOGA <br>
            RUNNING <br>
          </div>
        </div>
        <div class="card-body">
          <h3 class="card-title">
            Running Yoga
          </h3>
          <div class="card-name">
            Philippe Carralou
          </div>
        </div>
        <div class="card-foot">
          <div class="card-rating">
            <div class="stars">
              <svg width="10px" viewBox="0 0 20 20" fill="#FFD100">
                <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78">
              </svg>
              <svg width="10px" viewBox="0 0 20 20" fill="#FFD100">
                <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78">
              </svg>
              <svg width="10px" viewBox="0 0 20 20" fill="#FFD100">
                <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78">
              </svg>
              <svg width="10px" viewBox="0 0 20 20" fill="#FFD100">
                <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78">
              </svg>
              <svg width="10px" viewBox="0 0 20 20" fill="#FFD100">
                <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78">
              </svg>
            </div>
            12 comments
          </div>
        </div>
      </div>

    </div>
  </div>
</div>
<div id="bcl"><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://www.frontendfreecode.com">Frontend Code</a></div>
<script>
if (!CSS.supports('scroll-snap-align: start')) {
  scrollSnapPolyfill();
}
</script>

</body>
</html>
Preview