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

</body>
</html>

Preview

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS