team members list

This bootstrap snippet called "team members list" 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: team,users,list

HTML code

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


<div class="row bootstrap snippets">
    <div class="col-md-3 container-widget">
        <div class="panel panel-info panel-widget">
            <div class="panel-title text-center">
              Team Members
            </div>
            <div class="panel-body">
              <ul class="basic-list image-list">
                <li><img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="img" class="img"><b>John Doe</b><span class="desc">Designer</span></li>
                <li><img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="img" class="img"><b>Sarah Smith </b><span class="desc">Front-End Developer</span></li>
                <li><img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="img" class="img"><b>Stephen Doe</b><span class="desc">Back-End Developer</span></li>
                <li><img src="https://bootdey.com/img/Content/avatar/avatar4.png" alt="img" class="img"><b>Kendra Hall</b><span class="desc">Marketing</span></li>
                <li><img src="https://bootdey.com/img/Content/avatar/avatar5.png" alt="img" class="img"><b>Mark Doe</b><span class="desc">iOS Developer</span></li>
              </ul>
            </div>
        </div>
    </div>  
    <div class="col-md-3 container-widget">
        <div class="panel panel-success panel-widget">
            <div class="panel-title text-center">
              Team Members
            </div>
            <div class="panel-body">
              <ul class="basic-list image-list">
                <li><img src="https://bootdey.com/img/Content/avatar/avatar6.png" alt="img" class="img"><b>John Doe</b><span class="desc">Designer</span></li>
                <li><img src="https://bootdey.com/img/Content/avatar/avatar7.png" alt="img" class="img"><b>Sarah Smith </b><span class="desc">Front-End Developer</span></li>
                <li><img src="https://bootdey.com/img/Content/avatar/avatar8.png" alt="img" class="img"><b>Stephen Doe</b><span class="desc">Back-End Developer</span></li>
                <li><img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="img" class="img"><b>Kendra Hall</b><span class="desc">Marketing</span></li>
                <li><img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="img" class="img"><b>Mark Doe</b><span class="desc">iOS Developer</span></li>
              </ul>
            </div>
        </div>
    </div>      
</div>

CSS code

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


body{
    margin-top:60px;
}

.container-widget .panel {
    margin-bottom: 15px;
    border-radius: 0px;
    border: 1px #e6e9ee solid;
}

.panel-info {
    background: #3f51b5 url(http://themesground.com/modern/demo1/HTML/img/intro-bg.png) repeat top left;
    color: #fff;
}

.panel-success {
    background: #1ab394 url(http://themesground.com/modern/demo1/HTML/img/intro-bg.png) repeat top left;
    color: #fff;
}

.panel-widget {
    overflow: hidden;
    border: none;
}

.panel .panel-title {
    color: #58666e;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0px;
}
.panel-title {
    font-family: 'Montserrat', sans-serif;
    color: #58666e;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    padding: 16px 20px;
    margin: -20px;
    background: #fff;
    margin-bottom: 5px;
    border-bottom: none;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    letter-spacing: 1px;
}
.panel-title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 16px;
    color: inherit;
}
.basic-list {
    margin-bottom: 0;
    padding: 0;
}

ul, ol {
    margin-top: 0;
    margin-bottom: 10px;
}

/* Basic List */
.basic-list {
  margin-bottom: 0;
  padding: 0;
}
.basic-list li {
  display: block;
  position: relative;
  padding: 12px 0;
}
.basic-list li:last-child {
  border-bottom: none;
}
.basic-list .right {
  position: absolute;
  right: 0;
  display: inline-block;
  padding: 3px 6px;
  font-weight: 600;
}

/* Image List */
.image-list li {
  padding-left: 50px;
}
.image-list .img {
  width: 40px;
  height: 40px;
  position: absolute;
  left: 0;
  border-radius: 0px;
}
.image-list .desc {
  font-size: 12px;
  opacity: 0.8;
  display: block;
}
                                    

Similar snippets

Bootstrap snippet card chat list

card chat list

View

Bootstrap snippet bs4 user card task list

bs4 user card task list

View

Bootstrap snippet bs4 project list

bs4 project list

View

About this snippet

Creator: Dey Dey

Bootstrap version: 3.3.6

Created: Jan 10th 2016, 23:06

Views: 4.8K

Rated 5/5 based on 4 reviews