content logo

Bootstrap Grids:

Bootstrap Profile Grid Lists

Web designers use the Bootstrap grid system for layout, specifically the responsive ones. You can use this to create different lists with different purposes in your website. You can also manage these lists to make rows and columns out of it. Of course, these grid layouts are not a guarantee, they are more like an aid. They allow for a number of different usages and the web designers can use them depending on their needs. The two important factors to consider when adding grid layouts to your website are usage – meaning you know to use which model for which section of the site – and skill – meaning you know how to design a professional grid layout.

The grid layout we are sharing with you in this post is Bootstrap profile grids layout. You may need to name various people, members, students, teachers, staff, users, etc. in a web page. Bootstrap has the right thing for such scenarios. By creating Bootstrap list grids, you can sort a short profile for these people in either a vertical format or a horizonal one. Bootstrap lists are a great way to organize about us or meet the team pages as these pages usually contain a lot of names. You can get the Bootstrap grids code below for free.

#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 Free 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;" href="http://www.devanswer.com">Frontend Free Code</a></div>
<script>
if (!CSS.supports('scroll-snap-align: start')) {
  scrollSnapPolyfill();
}
</script>

</body>
</html>
Preview