"Dropdown userlist plus administration fully responsive"
Bootstrap 3.0.0 Snippet by Cyruxx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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"
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
.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;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
$(document).ready(function() {
var panels = $('.user-infos');
var panelsButton = $('.dropdown-user');
panels.hide();
//Click dropdown
panelsButton.click(function() {
//get data-for attribute
var dataFor = $(this).attr('data-for');
var idFor = $(dataFor);
//current button
var currentButton = $(this);
idFor.slideToggle(400, function() {
//Completed slidetoggle
if(idFor.is(':visible'))
{
currentButton.html('<i class="glyphicon glyphicon-chevron-up text-muted"></i>');
}
else
{
currentButton.html('<i class="glyphicon glyphicon-chevron-down text-muted"></i>');
}
})
});
$('[data-toggle="tooltip"]').tooltip();
$('button').click(function(e) {
e.preventDefault();
alert("This is a demo.\n :-)");
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

hi @cyruxx:disqus i had error on line 2 and 24, iam using bootstrap 3 can u help me

Tama san () - 8 years ago - Reply 0


owh i solved it line 2 before var panels = $('.user-infos'); use this "use strict"; and line 24 just use semicolon ;

Tama san () - 8 years ago - Reply 0


How would you populate this user list from a database? I'm still new to the bootstrap world so trying to figure things outs

Leon Claassen () - 9 years ago - Reply 0


nice, thanks for sharing!!

hamdani calivers () - 9 years ago - Reply 0


Hi, thnx for snippet! How to make 1st panel opened by default?

s3a () - 9 years ago - Reply 0


Thank you!

Sam () - 10 years ago - Reply 0


thanks for sharing! :)

ralph loco () - 11 years ago - Reply 0


I think Maks Surguy fixed it. Thank you Maks! :)

Alex () - 11 years ago - Reply 0


I think it's still kind of messed up..

I will try again tomorrow.

Sent from phone.

Alex () - 11 years ago - Reply 0


I have updated this snippet. It's now fully responsive and can be used on mobile devices.

Alex () - 11 years ago - Reply 0


Awesome :D

LeMeSander () - 11 years ago - Reply 0


Thanks for sharing! Can you make this work for mobile devices?

LeMeSander () - 11 years ago - Reply 0


I will. :)

Alex () - 11 years ago - Reply 0


Hi, nice work! I've forked it for bootstrap 2.3 : http://bootsnipp.com/user/s...

Nbblrr () - 11 years ago - Reply 0


Thanks! :)

Alex () - 11 years ago - Reply 0


nice one.. thanks sharing!

Ameenullah () - 11 years ago - Reply 0


Thanks for those 7 likes! :)

Guest () - 11 years ago - Reply 0