Dropdown userlist plus administration fully responsive
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<br><br>
<div class="container">
<div class="well col-xs-8 col-sm-8 col-md-8 col-lg-8 col-xs-offset-2 col-sm-offset-2 col-md-offset-2 col-lg-offset-2">
<div class="row user-row">
<div class="col-xs-3 col-sm-2 col-md-1 col-lg-1">
<img class="img-circle"
src="https://lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=50"
alt="User Pic">
</div>
<div class="col-xs-8 col-sm-9 col-md-10 col-lg-10">
<strong>Cyruxx</strong><br>
<span class="text-muted">User level: Administrator</span>
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 dropdown-user" data-for=".cyruxx">
<i class="glyphicon glyphicon-chevron-down text-muted"></i>
</div>
</div>
<div class="row user-infos cyruxx">
<div class="col-xs-12 col-sm-12 col-md-10 col-lg-10 col-xs-offset-0 col-sm-offset-0 col-md-offset-1 col-lg-offset-1">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">User information</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-3 col-lg-3 hidden-xs hidden-sm">
<img class="img-circle"
src="https://lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=100"
alt="User Pic">
</div>
<div class="col-xs-2 col-sm-2 hidden-md hidden-lg">
<img class="img-circle"
src="https://lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=50"
alt="User Pic">
</div>
<div class="col-xs-10 col-sm-10 hidden-md hidden-lg">
<strong>Cyruxx</strong><br>
<dl>
<dt>User level:</dt>
<dd>Administrator</dd>
<dt>Registered since:</dt>
<dd>11/12/2013</dd>
<dt>Topics</dt>
<dd>15</dd>
<dt>Warnings</dt>
<dd>0</dd>
</dl>
</div>
<div class=" col-md-9 col-lg-9 hidden-xs hidden-sm">
<strong>Cyruxx</strong><br>
<table class="table table-user-information">
<tbody>
<tr>
<td>User level:</td>
<td>Administrator</td>
</tr>
<tr>
<td>Registered since:</td>
<td>11/12/2013</td>
</tr>
<tr>
<td>Topics</td>
<td>15</td>
</tr>
<tr>
<td>Warnings</td>
<td>0</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="panel-footer">
<button class="btn btn-sm btn-primary" type="button"
data-toggle="tooltip"
data-original-title="Send message to user"><i class="glyphicon glyphicon-envelope"></i></button>
<span class="pull-right">
<button class="btn btn-sm btn-warning" type="button"
data-toggle="tooltip"
data-original-title="Edit this user"><i class="glyphicon glyphicon-edit"></i></button>
<button class="btn btn-sm btn-danger" type="button"
data-toggle="tooltip"
data-original-title="Remove this user"><i class="glyphicon glyphicon-remove"></i></button>
</span>
</div>
</div>
</div>
</div>
<div class="row user-row">
<div class="col-xs-3 col-sm-2 col-md-1 col-lg-1">
<img class="img-circle"
src="https://lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=50"
alt="User Pic">
</div>
<div class="col-xs-8 col-sm-9 col-md-10 col-lg-10">
<strong>User 2</strong><br>
<span class="text-muted">User level: Registered</span>
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 dropdown-user" data-for=".user2">
<i class="glyphicon glyphicon-chevron-down text-muted"></i>
</div>
</div>
<div class="row user-infos user2">
<div class="col-xs-12 col-sm-12 col-md-10 col-lg-10 col-xs-offset-0 col-sm-offset-0 col-md-offset-1 col-lg-offset-1">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">User information</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-3 col-lg-3 hidden-xs hidden-sm">
<img class="img-circle"
src="https://lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=100"
alt="User Pic">
</div>
<div class="col-xs-2 col-sm-2 hidden-md hidden-lg">
<img class="img-circle"
src="https://lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=50"
alt="User Pic">
</div>
<div class="col-xs-10 col-sm-10 hidden-md hidden-lg">
<strong>Cyruxx</strong><br>
<dl>
<dt>User level:</dt>
<dd>Administrator</dd>
<dt>Registered since:</dt>
<dd>11/12/2013</dd>
<dt>Topics</dt>
<dd>15</dd>
<dt>Warnings</dt>
<dd>0</dd>
</dl>
</div>
<div class=" col-md-9 col-lg-9 hidden-xs hidden-sm">
<strong>Cyruxx</strong><br>
<table class="table table-user-information">
<tbody>
<tr>
<td>User level:</td>
<td>Administrator</td>
</tr>
<tr>
<td>Registered since:</td>
<td>11/12/2013</td>
</tr>
<tr>
<td>Topics</td>
<td>15</td>
</tr>
<tr>
<td>Warnings</td>
<td>0</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="panel-footer">
<button class="btn btn-sm btn-primary" type="button"
data-toggle="tooltip"
data-original-title="Send message to user"><i class="glyphicon glyphicon-envelope"></i></button>
<span class="pull-right">
<button class="btn btn-sm btn-warning" type="button"
data-toggle="tooltip"
data-original-title="Edit this user"><i class="glyphicon glyphicon-edit"></i></button>
<button class="btn btn-sm btn-danger" type="button"
data-toggle="tooltip"
data-original-title="Remove this user"><i class="glyphicon glyphicon-remove"></i></button>
</span>
</div>
</div>
</div>
</div>
<div class="row user-row">
<div class="col-xs-3 col-sm-2 col-md-1 col-lg-1">
<img class="img-circle"
src="https://lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=50"
alt="User Pic">
</div>
<div class="col-xs-8 col-sm-9 col-md-10 col-lg-10">
<strong>Cyruxx</strong><br>
<span class="text-muted">User level: Administrator</span>
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 dropdown-user" data-for=".user3">
<i class="glyphicon glyphicon-chevron-down text-muted"></i>
</div>
</div>
<div class="row user-infos user3">
<div class="col-xs-12 col-sm-12 col-md-10 col-lg-10 col-xs-offset-0 col-sm-offset-0 col-md-offset-1 col-lg-offset-1">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">User information</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-3 col-lg-3 hidden-xs hidden-sm">
<img class="img-circle"
src="https://lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=100"
alt="User Pic">
</div>
<div class="col-xs-2 col-sm-2 hidden-md hidden-lg">
<img class="img-circle"
src="https://lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=50"
alt="User Pic">
</div>
<div class="col-xs-10 col-sm-10 hidden-md hidden-lg">
<strong>Cyruxx</strong><br>
<dl>
<dt>User level:</dt>
<dd>Administrator</dd>
<dt>Registered since:</dt>
<dd>11/12/2013</dd>
<dt>Topics</dt>
<dd>15</dd>
<dt>Warnings</dt>
<dd>0</dd>
</dl>
</div>
<div class=" col-md-9 col-lg-9 hidden-xs hidden-sm">
<strong>Cyruxx</strong><br>
<table class="table table-user-information">
<tbody>
<tr>
<td>User level:</td>
<td>Administrator</td>
</tr>
<tr>
<td>Registered since:</td>
<td>11/12/2013</td>
</tr>
<tr>
<td>Topics</td>
<td>15</td>
</tr>
<tr>
<td>Warnings</td>
<td>0</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="panel-footer">
<button class="btn btn-sm btn-primary" type="button"
data-toggle="tooltip"
data-original-title="Send message to user"><i class="glyphicon glyphicon-envelope"></i></button>
<span class="pull-right">
<button class="btn btn-sm btn-warning" type="button"
data-toggle="tooltip"
data-original-title="Edit this user"><i class="glyphicon glyphicon-edit"></i></button>
<button class="btn btn-sm btn-danger" type="button"
data-toggle="tooltip"
data-original-title="Remove this user"><i class="glyphicon glyphicon-remove"></i></button>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
.user-row {
margin-bottom: 14px;
}
.user-row:last-child {
margin-bottom: 0;
}
.dropdown-user {
margin: 13px 0;
padding: 5px;
height: 100%;
}
.dropdown-user:hover {
cursor: pointer;
}
.table-user-information > tbody > tr {
border-top: 1px solid rgb(221, 221, 221);
}
.table-user-information > tbody > tr:first-child {
border-top: 0;
}
.table-user-information > tbody > tr > td {
border-top: 0;
}
hi @cyruxx:disqus i had error on line 2 and 24, iam using bootstrap 3 can u help me,owh i solved it line 2 before var panels = $(‘.user-infos’); use this “use strict”; and line 24 just use semicolon ;,How would you populate this user list from a database? I’m still new to the bootstrap world so trying to figure things outs,nice, thanks for sharing!!,Hi, thnx for snippet! How to make 1st panel opened by default?,Thank you!,thanks for sharing! :),I think Maks Surguy fixed it. Thank you Maks! 🙂 ,I think it’s still kind of messed up..,I will try again tomorrow.,Sent from phone. ,I have updated this snippet. It’s now fully responsive and can be used on mobile devices.,Awesome :D,Thanks for sharing! Can you make this work for mobile devices?,I will. :),Hi, nice work! I’ve forked it for bootstrap 2.3 : http://bootsnipp.com/user/s…,Thanks! :),nice one.. thanks sharing!,Thanks for those 7 likes! :),The author is Cyruxx
(No Ratings Yet)
Loading...
