People directory

This bootstrap snippet called "People directory" 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,directory

HTML code

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

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<div class="row">
    <ul class="directory-list">
          <li><a href="#">a</a></li>
          <li><a href="#">b</a></li>
          <li><a href="#">c</a></li>
          <li><a href="#">d</a></li>
          <li><a href="#">e</a></li>
          <li><a href="#">f</a></li>
          <li><a href="#">g</a></li>
          <li><a href="#">h</a></li>
          <li><a href="#">i</a></li>
          <li><a href="#">j</a></li>
          <li><a href="#">k</a></li>
          <li><a href="#">l</a></li>
          <li><a href="#">m</a></li>
          <li><a href="#">n</a></li>
          <li><a href="#">o</a></li>
          <li><a href="#">p</a></li>
          <li><a href="#">q</a></li>
          <li><a href="#">r</a></li>
          <li><a href="#">s</a></li>
          <li><a href="#">t</a></li>
          <li><a href="#">u</a></li>
          <li><a href="#">v</a></li>
          <li><a href="#">w</a></li>
          <li><a href="#">x</a></li>
          <li><a href="#">y</a></li>
          <li><a href="#">z</a></li>
    </ul>
</div>

<div class="directory-info-row">
    <div class="row">
        <div class="col-md-6 col-sm-6">
            <div class="panel">
        	  <div class="panel-body">
        	      <div class="media">
        	          <a class="pull-left" href="#">
        	              <img class="thumb media-object" src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="">
        	          </a>
        	          <div class="media-body">
        	              <h4>John Doe <span class="text-muted small"> - UI Engineer</span></h4>
        	              <ul class="social-links">
        	                  <li><a title="" data-placement="top" data-toggle="tooltip" class="tooltips" href="" data-original-title="Facebook"><i class="fa fa-facebook"></i></a></li>
        	                  <li><a title="" data-placement="top" data-toggle="tooltip" class="tooltips" href="" data-original-title="Twitter"><i class="fa fa-twitter"></i></a></li>
        	                  <li><a title="" data-placement="top" data-toggle="tooltip" class="tooltips" href="" data-original-title="LinkedIn"><i class="fa fa-linkedin"></i></a></li>
        	                  <li><a title="" data-placement="top" data-toggle="tooltip" class="tooltips" href="" data-original-title="Skype"><i class="fa fa-skype"></i></a></li>
        	              </ul>
        	              <address>
        	                  <strong>Bootdey, Inc.</strong><br>
        	                  Vamoil Ave, Suite 23<br>
        	                  Dream land, Australia <br>
        	                  <abbr title="Phone">P:</abbr> (142) 454-7890
        	              </address>
        
        	          </div>
        	      </div>
        	  </div>
        	</div>
        </div>
        
        <div class="col-md-6 col-sm-6">
            <div class="panel">
        	  <div class="panel-body">
        	      <div class="media">
        	          <a class="pull-left" href="#">
        	              <img class="thumb media-object" src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="">
        	          </a>
        	          <div class="media-body">
        	              <h4>John Doe <span class="text-muted small"> - UI Engineer</span></h4>
        	              <ul class="social-links">
        	                  <li><a title="" data-placement="top" data-toggle="tooltip" class="tooltips" href="" data-original-title="Facebook"><i class="fa fa-facebook"></i></a></li>
        	                  <li><a title="" data-placement="top" data-toggle="tooltip" class="tooltips" href="" data-original-title="Twitter"><i class="fa fa-twitter"></i></a></li>
        	                  <li><a title="" data-placement="top" data-toggle="tooltip" class="tooltips" href="" data-original-title="LinkedIn"><i class="fa fa-linkedin"></i></a></li>
        	                  <li><a title="" data-placement="top" data-toggle="tooltip" class="tooltips" href="" data-original-title="Skype"><i class="fa fa-skype"></i></a></li>
        	              </ul>
        	              <address>
        	                  <strong>Bootdey, Inc.</strong><br>
        	                  Vamoil Ave, Suite 23<br>
        	                  Dream land, Australia <br>
        	                  <abbr title="Phone">P:</abbr> (142) 454-7890
        	              </address>
        
        	          </div>
        	      </div>
        	  </div>
        	</div>
        </div>
        
        <div class="col-md-6 col-sm-6">
            <div class="panel">
        	  <div class="panel-body">
        	      <div class="media">
        	          <a class="pull-left" href="#">
        	              <img class="thumb media-object" src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="">
        	          </a>
        	          <div class="media-body">
        	              <h4>John Doe <span class="text-muted small"> - UI Engineer</span></h4>
        	              <ul class="social-links">
        	                  <li><a title="" data-placement="top" data-toggle="tooltip" class="tooltips" href="" data-original-title="Facebook"><i class="fa fa-facebook"></i></a></li>
        	                  <li><a title="" data-placement="top" data-toggle="tooltip" class="tooltips" href="" data-original-title="Twitter"><i class="fa fa-twitter"></i></a></li>
        	                  <li><a title="" data-placement="top" data-toggle="tooltip" class="tooltips" href="" data-original-title="LinkedIn"><i class="fa fa-linkedin"></i></a></li>
        	                  <li><a title="" data-placement="top" data-toggle="tooltip" class="tooltips" href="" data-original-title="Skype"><i class="fa fa-skype"></i></a></li>
        	              </ul>
        	              <address>
        	                  <strong>Bootdey, Inc.</strong><br>
        	                  Vamoil Ave, Suite 23<br>
        	                  Dream land, Australia <br>
        	                  <abbr title="Phone">P:</abbr> (142) 454-7890
        	              </address>
        
        	          </div>
        	      </div>
        	  </div>
        	</div>
        </div>
        
        <div class="col-md-6 col-sm-6">
            <div class="panel">
        	  <div class="panel-body">
        	      <div class="media">
        	          <a class="pull-left" href="#">
        	              <img class="thumb media-object" src="https://bootdey.com/img/Content/avatar/avatar4.png" alt="">
        	          </a>
        	          <div class="media-body">
        	              <h4>John Doe <span class="text-muted small"> - UI Engineer</span></h4>
        	              <ul class="social-links">
        	                  <li><a title="" data-placement="top" data-toggle="tooltip" class="tooltips" href="" data-original-title="Facebook"><i class="fa fa-facebook"></i></a></li>
        	                  <li><a title="" data-placement="top" data-toggle="tooltip" class="tooltips" href="" data-original-title="Twitter"><i class="fa fa-twitter"></i></a></li>
        	                  <li><a title="" data-placement="top" data-toggle="tooltip" class="tooltips" href="" data-original-title="LinkedIn"><i class="fa fa-linkedin"></i></a></li>
        	                  <li><a title="" data-placement="top" data-toggle="tooltip" class="tooltips" href="" data-original-title="Skype"><i class="fa fa-skype"></i></a></li>
        	              </ul>
        	              <address>
        	                  <strong>Bootdey, Inc.</strong><br>
        	                  Vamoil Ave, Suite 23<br>
        	                  Dream land, Australia <br>
        	                  <abbr title="Phone">P:</abbr> (142) 454-7890
        	              </address>
        
        	          </div>
        	      </div>
        	  </div>
        	</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:20px;
    background: #f1f2f7;
}

.directory-list, .directory-info-row .social-links {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.directory-list li {
    border-left: 3px solid #f1f2f7;
    display: table-cell;
    width: 1%;
}

.directory-list li a {
    display: block;
    padding: 8px 0;
    text-align: center;
    text-transform: uppercase;
    background: #fff;
    color: #7A7676;
    -moz-transition: all 0.2s ease-out 0s;
    -webkit-transition: all 0.2s ease-out 0s;
    transition: all 0.2s ease-out 0s;
    text-decoration: none;
    border-radius: 5px;
    -webkit-border-radius: 5px;
}

.directory-info-row .thumb {
    border-radius: 5px;
    -webkit-border-radius: 5px;
    height: auto;
    width: 175px;
    margin-right: 10px;
}

.directory-list li a:hover, .directory-info-row .social-links li a:hover {
    background: #ff6c60;
    color: #fff;
}

.directory-info-row {
    display: inline-block;
    width: 100%;
    margin-top: 20px;
}

.directory-info-row h4, .directory-info-row a {
    color: #424F63;
}

.h4, h4 {
    font-size: 18px;
}

.directory-info-row .social-links {
    display: inline-block;
    margin-bottom: 10px;
}

.directory-info-row .social-links li {
    display: inline-block;
}

ul li {
    list-style: none;
}

.directory-info-row .social-links li a {
    background: #EFF0F4;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    display: inline-block;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    color: #7A7676;
}

                                    

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.4

Created: Aug 17th 2015, 22:39

Views: 4.3K

Rated 5/5 based on 7 reviews