Members

This bootstrap snippet called "Members" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: users,list,social,members

This is the HTML code for this bootstrap snippet

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview tab

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container">
<div class="row bootstrap snippets"> 
    <div class="col-md-9 col-sm-7"> 
        <h2>Members</h2> 
    </div> 
    <div class="col-md-3 col-sm-5"> 
        <form method="get" role="form" class="search-form-full"> 
            <div class="form-group"> 
                <input type="text" class="form-control" name="s" id="search-input" placeholder="Search..."> 
                <i class="entypo-search"></i> 
            </div> 
        </form> 
    </div> 
</div>
<div class="member-entry"> 
    <a href="#" class="member-img"> 
        <img src="https://bootdey.com/img/Content/avatar/avatar1.png" class="img-rounded"> 
        <i class="fa fa-forward"></i> 
    </a> 
    <div class="member-details"> 
        <h4> <a href="#">Johnnie Linton</a> </h4> 
        <div class="row info-list"> 
            <div class="col-sm-4"> 
                <i class="fa fa-briefcase"></i>
                Co-Founder at <a href="#">Complete Tech</a> 
            </div> 
            <div class="col-sm-4"> 
                <i class="fa fa-twitter"></i> 
                <a href="#">@johnnie</a> 
            </div> 
            <div class="col-sm-4"> 
                <i class="fa fa-facebook"></i> 
                <a href="#">fb.me/johnnie</a> 
            </div> 
            <div class="clear"></div> 
            <div class="col-sm-4"> 
                <i class="fa fa-location"></i> 
                <a href="#">Prishtina</a> 
            </div> 
            <div class="col-sm-4"> 
                <i class="fa fa-envelope"></i> 
                <a href="#">john@gmail.com</a> 
            </div> 
            <div class="col-sm-4"> 
                <i class="fa fa-linkedin"></i> 
                <a href="#">johnkennedy</a> 
            </div> 
        </div> 
    </div> 
</div>
<div class="member-entry"> 
    <a href="#" class="member-img"> 
        <img src="https://bootdey.com/img/Content/avatar/avatar2.png" class="img-rounded"> 
        <i class="fa fa-forward"></i> 
    </a> 
    <div class="member-details"> 
        <h4> <a href="#">Johnnie Linton</a> </h4> 
        <div class="row info-list"> 
            <div class="col-sm-4"> 
                <i class="fa fa-briefcase"></i>
                Co-Founder at <a href="#">Complete Tech</a> 
            </div> 
            <div class="col-sm-4"> 
                <i class="fa fa-twitter"></i> 
                <a href="#">@johnnie</a> 
            </div> 
            <div class="col-sm-4"> 
                <i class="fa fa-facebook"></i> 
                <a href="#">fb.me/johnnie</a> 
            </div> 
            <div class="clear"></div> 
            <div class="col-sm-4"> 
                <i class="fa fa-location"></i> 
                <a href="#">Prishtina</a> 
            </div> 
            <div class="col-sm-4"> 
                <i class="fa fa-envelope"></i> 
                <a href="#">john@gmail.com</a> 
            </div> 
            <div class="col-sm-4"> 
                <i class="fa fa-linkedin"></i> 
                <a href="#">johnkennedy</a> 
            </div> 
        </div> 
    </div> 
</div>
<div class="member-entry"> 
    <a href="#" class="member-img"> 
        <img src="https://bootdey.com/img/Content/avatar/avatar3.png" class="img-rounded"> 
        <i class="fa fa-forward"></i> 
    </a> 
    <div class="member-details"> 
        <h4> <a href="#">Johnnie Linton</a> </h4> 
        <div class="row info-list"> 
            <div class="col-sm-4"> 
                <i class="fa fa-briefcase"></i>
                Co-Founder at <a href="#">Complete Tech</a> 
            </div> 
            <div class="col-sm-4"> 
                <i class="fa fa-twitter"></i> 
                <a href="#">@johnnie</a> 
            </div> 
            <div class="col-sm-4"> 
                <i class="fa fa-facebook"></i> 
                <a href="#">fb.me/johnnie</a> 
            </div> 
            <div class="clear"></div> 
            <div class="col-sm-4"> 
                <i class="fa fa-location"></i> 
                <a href="#">Prishtina</a> 
            </div> 
            <div class="col-sm-4"> 
                <i class="fa fa-envelope"></i> 
                <a href="#">john@gmail.com</a> 
            </div> 
            <div class="col-sm-4"> 
                <i class="fa fa-linkedin"></i> 
                <a href="#">johnkennedy</a> 
            </div> 
        </div> 
    </div> 
</div>
<div class="member-entry"> 
    <a href="#" class="member-img"> 
        <img src="https://bootdey.com/img/Content/avatar/avatar4.png" class="img-rounded"> 
        <i class="fa fa-forward"></i> 
    </a> 
    <div class="member-details"> 
        <h4> <a href="#">Johnnie Linton</a> </h4> 
        <div class="row info-list"> 
            <div class="col-sm-4"> 
                <i class="fa fa-briefcase"></i>
                Co-Founder at <a href="#">Complete Tech</a> 
            </div> 
            <div class="col-sm-4"> 
                <i class="fa fa-twitter"></i> 
                <a href="#">@johnnie</a> 
            </div> 
            <div class="col-sm-4"> 
                <i class="fa fa-facebook"></i> 
                <a href="#">fb.me/johnnie</a> 
            </div> 
            <div class="clear"></div> 
            <div class="col-sm-4"> 
                <i class="fa fa-location"></i> 
                <a href="#">Prishtina</a> 
            </div> 
            <div class="col-sm-4"> 
                <i class="fa fa-envelope"></i> 
                <a href="#">john@gmail.com</a> 
            </div> 
            <div class="col-sm-4"> 
                <i class="fa fa-linkedin"></i> 
                <a href="#">johnkennedy</a> 
            </div> 
        </div> 
    </div> 
</div>
<div class="member-entry"> 
    <a href="#" class="member-img"> 
        <img src="https://bootdey.com/img/Content/avatar/avatar5.png" class="img-rounded"> 
        <i class="fa fa-forward"></i> 
    </a> 
    <div class="member-details"> 
        <h4> <a href="#">Johnnie Linton</a> </h4> 
        <div class="row info-list"> 
            <div class="col-sm-4"> 
                <i class="fa fa-briefcase"></i>
                Co-Founder at <a href="#">Complete Tech</a> 
            </div> 
            <div class="col-sm-4"> 
                <i class="fa fa-twitter"></i> 
                <a href="#">@johnnie</a> 
            </div> 
            <div class="col-sm-4"> 
                <i class="fa fa-facebook"></i> 
                <a href="#">fb.me/johnnie</a> 
            </div> 
            <div class="clear"></div> 
            <div class="col-sm-4"> 
                <i class="fa fa-location"></i> 
                <a href="#">Prishtina</a> 
            </div> 
            <div class="col-sm-4"> 
                <i class="fa fa-envelope"></i> 
                <a href="#">john@gmail.com</a> 
            </div> 
            <div class="col-sm-4"> 
                <i class="fa fa-linkedin"></i> 
                <a href="#">johnkennedy</a> 
            </div> 
        </div> 
    </div> 
</div>
</div>

This is the CSS code for this bootstrap snippet

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview

body{margin-top:20px;
background:#eee;
}

.member-entry {
  border: 1px solid #ebebeb;
  padding: 15px;
  margin-top: 15px;
  margin-bottom: 30px;
  -moz-box-shadow: 1px 1px 1px rgba(0, 1, 1, 0.02);
  -webkit-box-shadow: 1px 1px 1px rgba(0, 1, 1, 0.02);
  box-shadow: 1px 1px 1px rgba(0, 1, 1, 0.02);
  -moz-transition: all 300ms ease-in-out;
  -webkit-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
  -webkit-border-radius: 3px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 3px;
  -moz-background-clip: padding;
  border-radius: 3px;
  background-clip: padding-box;
  background:#fff;
    -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2),0 6px 10px 0 rgba(0,0,0,0.3);
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2),0 6px 10px 0 rgba(0,0,0,0.3);
}
.member-entry:before,
.member-entry:after {
  content: " ";
  display: table;
}
.member-entry:after {
  clear: both;
}
.member-entry:hover {
  background: rgba(235, 235, 235, 0.3);
  -moz-box-shadow: 1px 1px 1px rgba(0, 1, 1, 0.06);
  -webkit-box-shadow: 1px 1px 1px rgba(0, 1, 1, 0.06);
  box-shadow: 1px 1px 1px rgba(0, 1, 1, 0.06);
}
.member-entry .member-img,
.member-entry .member-details {
  float: left;
}
.member-entry .member-img {
  position: relative;
  display: block;
  width: 10%;
}
.member-entry .member-img img {
  width: 100%;
  display: block;
  max-width: 100%;
  height: auto;
}
.member-entry .member-img i {
  position: absolute;
  display: block;
  left: 50%;
  top: 50%;
  margin-top: -12.5px;
  margin-left: -12.5px;
  color: #FFF;
  font-size: 25px;
  zoom: 1;
  -webkit-opacity: 0;
  -moz-opacity: 0;
  opacity: 0;
  filter: alpha(opacity=0);
  -moz-transform: scale(0.5);
  -webkit-transform: scale(0.5);
  -ms-transform: scale(0.5);
  -o-transform: scale(0.5);
  transform: scale(0.5);
  -moz-transition: all 300ms ease-in-out;
  -webkit-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}
.member-entry .member-img:hover i {
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  zoom: 1;
  -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
  filter: alpha(opacity=100);
}
.member-entry .member-details {
  width: 89.9%;
}
.member-entry .member-details h4 {
  font-size: 18px;
  margin-left: 20px;
}
.member-entry .member-details h4 a {
  -moz-transition: all 300ms ease-in-out;
  -webkit-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}
.member-entry .member-details .info-list {
  margin-left: 5px;
}
.member-entry .member-details .info-list > div {
  margin-top: 5px;
  font-size: 13px;
}
.member-entry .member-details .info-list > div a {
  -moz-transition: all 300ms ease-in-out;
  -webkit-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}
.member-entry .member-details .info-list > div i {
  -moz-transition: all 300ms ease-in-out;
  -webkit-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}
.member-entry .member-details .info-list > div:hover i {
  color: #4f5259;
}
@media screen and (max-width: 768px) {
  .member-entry .member-img {
    width: 18%;
  }
  .member-entry .member-details {
    width: 81.9%;
  }
  .member-entry .member-details h4 {
    margin-top: 0;
  }
}
@media screen and (max-width: 480px) {
  .member-entry .member-img {
    width: 100%;
    float: none;
    text-align: center;
    position: relative;
    background: #f8f8f8;
    margin-bottom: 15px;
    -webkit-border-radius: 3px;
    -webkit-background-clip: padding-box;
    -moz-border-radius: 3px;
    -moz-background-clip: padding;
    border-radius: 3px;
    background-clip: padding-box;
  }
  .member-entry .member-img img {
    width: auto;
    display: inline-block;
    -webkit-border-radius: 0;
    -webkit-background-clip: padding-box;
    -moz-border-radius: 0;
    -moz-background-clip: padding;
    border-radius: 0;
    background-clip: padding-box;
  }
  .member-entry .member-details {
    width: 100%;
    float: none;
  }
  .member-entry .member-details h4,
  .member-entry .member-details .info-list {
    margin-left: 0;
  }
  .member-entry .member-details h4 > div,
  .member-entry .member-details .info-list > div {
    padding: 0;
  }
  .member-entry .member-details .info-list > div {
    margin-top: 10px;
  }
}

                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.6

Created: Mar 11th 2016, 18:19

Views: 4.7K

Rated 5/5 based on 4 reviews