Dropdown userlist plus administration (V2.3)
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/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 span8 offset2">
<div class="row-fluid user-row">
<div class="span1">
<img class="img-circle"
src="https://lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=50"
alt="User Pic">
</div>
<div class="span10">
<strong>Cyruxx</strong><br>
<span class="text-muted">User level: Administrator</span>
</div>
<div class="span1 dropdown-user" data-for=".cyruxx">
<i class="icon-chevron-down text-muted"></i>
</div>
</div>
<div class="row-fluid user-infos cyruxx">
<div class="span10 offset1">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">User information</h3>
</div>
<div class="panel-body">
<div class="row-fluid">
<div class="span3">
<img class="img-circle"
src="https://lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=100"
alt="User Pic">
</div>
<div class="span6">
<strong>Cyruxx</strong><br>
<table class="table table-condensed table-responsive 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-primary" type="button"
data-toggle="tooltip"
data-original-title="Send message to user"><i class="icon-envelope icon-white"></i></button>
<span class="pull-right">
<button class="btn btn-warning" type="button"
data-toggle="tooltip"
data-original-title="Edit this user"><i class="icon-edit icon-white"></i></button>
<button class="btn btn-danger" type="button"
data-toggle="tooltip"
data-original-title="Remove this user"><i class="icon-remove icon-white"></i></button>
</span>
</div>
</div>
</div>
</div>
<div class="row-fluid user-row">
<div class="span1">
<img class="img-circle"
src="https://lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=50"
alt="User Pic">
</div>
<div class="span10">
<strong>Nibbler</strong><br>
<span class="text-muted">User level: Moderator</span>
</div>
<div class="span1 dropdown-user" data-for=".alexanderMahrt">
<i class="icon-chevron-down text-muted"></i>
</div>
</div>
<div class="row-fluid user-infos alexanderMahrt">
<div class="span10 offset1">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">User information</h3>
</div>
<div class="panel-body">
<div class="row-fluid">
<div class="span3">
<img class="img-circle"
src="https://lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=100"
alt="User Pic">
</div>
<div class="span6">
<strong>Alexander Mahrt</strong><br>
<table class="table table-condensed table-responsive table-user-information">
<tbody>
<tr>
<td>User level:</td>
<td>Moderator</td>
</tr>
<tr>
<td>Registered since:</td>
<td>11/12/2013</td>
</tr>
<tr>
<td>Topics</td>
<td>5</td>
</tr>
<tr>
<td>Warnings</td>
<td>0</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="panel-footer">
<button class="btn btn-primary" type="button"
data-toggle="tooltip"
data-original-title="Send message to user"><i class="icon-envelope icon-white"></i></button>
<span class="pull-right">
<button class="btn btn-warning" type="button"
data-toggle="tooltip"
data-original-title="Edit this user"><i class="icon-edit icon-white"></i></button>
<button class="btn btn-danger" type="button"
data-toggle="tooltip"
data-original-title="Remove this user"><i class="icon-remove icon-white"></i></button>
</span>
</div>
</div>
</div>
</div>
<div class="row-fluid user-row">
<div class="span1">
<img class="img-circle"
src="https://lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=50"
alt="User Pic">
</div>
<div class="span10">
<strong>MyUsername</strong><br>
<span class="text-muted">User level: Registered user</span>
</div>
<div class="span1 dropdown-user" data-for=".myUsername">
<i class="icon-chevron-down text-muted"></i>
</div>
</div>
<div class="row-fluid user-infos myUsername">
<div class="span10 offset1">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">User information</h3>
</div>
<div class="panel-body">
<div class="row-fluid">
<div class="span3">
<img class="img-circle"
src="https://lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=100"
alt="User Pic">
</div>
<div class="span6">
<strong>MyUsername</strong><br>
<table class="table table-condensed table-responsive table-user-information">
<tbody>
<tr>
<td>User level:</td>
<td>Registered user</td>
</tr>
<tr>
<td>Registered since:</td>
<td>11/12/2013</td>
</tr>
<tr>
<td>Topics</td>
<td>1</td>
</tr>
<tr>
<td>Warnings</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="panel-footer">
<button class="btn btn-primary" type="button"
data-toggle="tooltip"
data-original-title="Send message to user"><i class="icon-envelope icon-white"></i></button>
<span class="pull-right">
<button class="btn btn-warning" type="button"
data-toggle="tooltip"
data-original-title="Edit this user"><i class="icon-edit icon-white"></i></button>
<button class="btn btn-danger" type="button"
data-toggle="tooltip"
data-original-title="Remove this user"><i class="icon-remove icon-white"></i></button>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
//Reusing bootstrap 3 panel CSS
.panel {
background-color: #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0);
border-radius: 4px 4px 4px 4px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
margin-bottom: 20px;
}
.panel-primary {
border-color: #428BCA;
}
.panel-primary > .panel-heading {
background-color: #428BCA;
border-color: #428BCA;
color: #FFFFFF;
}
.panel-heading {
border-bottom: 1px solid rgba(0, 0, 0, 0);
border-top-left-radius: 3px;
border-top-right-radius: 3px;
padding: 10px 15px;
}
.panel-title {
font-size: 16px;
margin-bottom: 0;
margin-top: 0;
}
.panel-body:before, .panel-body:after {
content: " ";
display: table;
}
.panel-body:before, .panel-body:after {
content: " ";
display: table;
}
.panel-body:after {
clear: both;
}
.panel-body {
padding: 15px;
}
.panel-footer {
background-color: #F5F5F5;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border-top: 1px solid #DDDDDD;
padding: 10px 15px;
}
//CSS from v3 snipp
.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, this is fantastic and was wondering if you could update for bootstrap 3.0,Just search for “user” in Bootsnipp. This is already an fork from BS 3. :),Okay, I have updated my snippet – it’s now fully responsive and you can use it on mobile devices.,Link: http://bootsnipp.com/snippe…,Guest–Yes it does work in Mobile devices guess the term bootstrap “Mobile First”,I think he means that the width should be changed and the items should not get organized below.,Thank you for making this work in Bootstrap 2.3 :),Can you make this work on mobile devices?,I will, hang on ;),The author is Nbblrr
(No Ratings Yet)
Loading...
