People directory

Bootstrap snippet. People directory, this snippet 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 bs4 project list with progress

bs4 project list with progress

View

Bootstrap snippet bs4 account tickets

bs4 account tickets

View

Bootstrap snippet social network profile head

social network profile head

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 9 reviews