Followers page

This bootstrap snippet Followers page 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,profile

This is the HTML code for this bootstrap snippet

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

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container bootstrap snippet">
    <div class="row profile">
        <div class="col-md-3" id="profileCol">
			<div class="profile-sidebar">
				<div class="profile-userpic">
					<img src="https://bootdey.com/img/Content/User_for_snippets.png" class="img-responsive" alt="">
				</div>
				<div class="profile-usertitle">
					<div class="profile-usertitle-name">
						Clark rodriguez
					</div>
				</div>
				<div class="profile-userbuttons">
					<button type="button" class="btn btn-info btn-sm">
                        <i class="fa fa-user-plus"></i>
                        Follow
                    </button>
				</div>
    			<div class="profile-usermenu">
					<ul class="nav">
						<li class="active">
							<a href="#">
							<i class="glyphicon glyphicon-home"></i>
							Overview </a>
						</li>
						<li>
							<a href="#">
							<i class="glyphicon glyphicon-user"></i>
							Account Settings </a>
						</li>
						<li>
							<a href="#" target="_blank">
							<i class="glyphicon glyphicon-ok"></i>
							Tasks </a>
						</li>
						<li>
							<a href="#">
							<i class="glyphicon glyphicon-flag"></i>
							Help </a>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="col-md-9" id="contentCol">
            <div class="profile-content">
                <div class="row hidden-xs hidden-sm">
                    <a href="#" class="btn btn-info" id="toggle-link">
                        <i class="fa fa-arrow-left"></i>
                        Hide menu
                    </a>
                    <hr class="hr-sep">
                </div>
                <div class="row ">
                    <div class="col-md-4 col-sm-6 follower-item">
                        <div class="ibox-content text-center">
                            <h2 class="text-muted h-name">Deyson Smith</h2>
                            <div class="m-b-sm">
                                    <img alt="image" class="img-circle circle-border" src="https://bootdey.com/img/Content/user_1.jpg">
                            </div>
                            <p></p>
                            <div class="text-center">
                                <a class="btn btn-xs btn-default"><i class="fa fa-thumbs-up"></i>  </a>
                                <a class="btn btn-xs btn-info"><i class="fa fa-heart"></i> </a>
                                <a class="btn btn-xs btn-primary"><i class="fa fa-envelope"></i> </a>
                                <a class="btn btn-xs btn-success"><i class="fa fa-phone"></i> </a>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-md-4 col-sm-6 follower-item">
                        <div class="ibox-content text-center">
                            <h2 class="text-muted h-name">Nicki Smith</h2>
                            <div class="m-b-sm">
                                    <img alt="image" class="img-circle circle-border" src="https://bootdey.com/img/Content/user_2.jpg">
                            </div>
                            <p></p>
                            <div class="text-center">
                                <a class="btn btn-xs btn-default"><i class="fa fa-thumbs-up"></i>  </a>
                                <a class="btn btn-xs btn-info"><i class="fa fa-heart"></i> </a>
                                <a class="btn btn-xs btn-primary"><i class="fa fa-envelope"></i> </a>
                                <a class="btn btn-xs btn-success"><i class="fa fa-phone"></i> </a>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-md-4 col-sm-6 follower-item">
                        <div class="ibox-content text-center">
                            <h2 class="text-muted h-name">Barbao Smith</h2>
                            <div class="m-b-sm">
                                    <img alt="image" class="img-circle circle-border" src="https://bootdey.com/img/Content/user_3.jpg">
                            </div>
                            <p></p>
                            <div class="text-center">
                                <a class="btn btn-xs btn-default"><i class="fa fa-thumbs-up"></i>  </a>
                                <a class="btn btn-xs btn-info"><i class="fa fa-heart"></i> </a>
                                <a class="btn btn-xs btn-primary"><i class="fa fa-envelope"></i> </a>
                                <a class="btn btn-xs btn-success"><i class="fa fa-phone"></i> </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
		</div>
	</div>
</div>                                

This is the CSS code for this bootstrap snippet

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview

body {
  background: #eee;
}

.toggled {
    position: absolute;
    margin-right: -250px;
}

#profileCol .profile-sidebar{
  min-height: 410px;
}

.hr-sep{
    border:1px solid  #eee;  
}

.profile {
  margin: 20px 0;
}

.profile-sidebar {
  padding: 20px 0 10px 0;
  background: #fff;
}

.profile-userpic img {
  float: none;
  margin: 0 auto;
  width: 50%;
  height: 50%;
  -webkit-border-radius: 50% !important;
  -moz-border-radius: 50% !important;
  border-radius: 50% !important;
}

.profile-usertitle {
  text-align: center;
  margin-top: 20px;
}

.profile-usertitle-name {
  color: #5a7391;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 7px;
}

.profile-userbuttons {
  text-align: center;
  margin-top: 10px;
}

.profile-userbuttons .btn {
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 600;
  padding: 6px 15px;
  margin-right: 5px;
}

   
.profile-usermenu {
  margin-top: 30px;
}

.profile-usermenu ul li {
  border-bottom: 1px solid #f0f4f7;
}

.profile-usermenu ul li:last-child {
  border-bottom: none;
}

.profile-usermenu ul li a {
  color: #93a3b5;
  font-size: 14px;
  font-weight: 400;
}

.profile-usermenu ul li a i {
  margin-right: 8px;
  font-size: 14px;
}

.profile-usermenu ul li a:hover {
  background-color: #fafcfd;
  color: #5b9bd1;
}

.profile-usermenu ul li.active {
  border-bottom: none;
}

.profile-usermenu ul li.active a {
  color: #5b9bd1;
  background-color: #f6f9fb;
  border-left: 2px solid #5b9bd1;
  margin-left: -2px;
}

.profile-content {
  padding: 20px;
  background: #fff;
  min-height: 410px;
}

.ibox-content {
  background-color: #eee;
  color: inherit;
  padding: 15px 20px 20px 20px;
  border-color: #e7eaec;
  border-image: none;
  border-style: solid solid none;
  border-width: 1px 0px;
}

.h-name{
    font-size:20px;    
}

img.circle-border {
  border: 2px solid #fff;
  border-radius: 50%;
}

.follower-list{
    background:#eee;    
}

.follower-item{
    margin-top:3px;    
}

.btn {
    border-radius: 0;
    border: 0;
    border-bottom: 4px solid #CCCCCC;
    margin:0;
    -webkit-box-shadow: 0 5px 5px -6px rgba(0,0,0,.3);
       -moz-box-shadow: 0 5px 5px -6px rgba(0,0,0,.3);
            box-shadow: 0 5px 5px -6px rgba(0,0,0,.3);
}
.btn .btn-block:active, .btn .btn-lg:active {
    -webkit-box-shadow: inset 0 3px 3px -5px rgba(0,0,0,.3);
       -moz-box-shadow: inset 0 3px 3px -5px rgba(0,0,0,.3);
            box-shadow: inset 0 3px 3px -5px rgba(0,0,0,.3);
}
.btn-default {
    color: #555;
    background-color: #f9f9f9;
    border-color: #cacaca;
    text-shadow: 1px 1px 0 #f5f5f5;
}
.btn-default:hover, .btn-default:focus {
    background-color: #f4f4f4;
    border-color: #bebebe;
}
.btn-success {
    background-color: #80d752;
    border-color: #61be26;
    text-shadow: 1px 1px 0 #5fdb34;
}
.btn-success:hover, .btn-success:focus {
    background-color: #75cd53;
    border-color: #53aa27;
}
.btn-info {
    background-color: #39b3d7;
    border-color: #348fd2;
    text-shadow: 1px 1px 0 #238ed5;
}
.btn-info:hover, .btn-info:focus {
    background-color: #45abcd;
    border-color: #347abe;
}
.btn-warning {
    background-color: #FEAF20;
    border-color: #d79a34;
    text-shadow: 1px 1px 0 #db9e34;
}
.btn-warning:hover, .btn-warning:focus {
    background-color: #f5a620;
    border-color: #cd9034;
}
.btn-danger {
    background-color: #d73814;
    border-color: #be0000;
    text-shadow: 1px 1px 0 #ac2925;
}
.btn-danger:hover, .btn-danger:focus {
    background-color: #cd3714;
    border-color: #aa0000;
}
.btn-primary {
    background-color: #4274d7;
    border-color: #4d5bbe;
    text-shadow: 1px 1px 0 #232bd5;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: #426acd;
    border-color: #4f56aa;
}
.btn-magick {
    color: #fff;
    background-color: #bb39d7;
    border-color: #9a00cd;
    text-shadow: 1px 1px 0 #9823d5;
}
.btn-magick:hover, .btn-magick:focus {
    color: #fff;
    background-color: #b13acd;
    border-color: #8600b9;
}
.btn-pressure {
    position: relative;
    margin-bottom: 0;
}
.btn-pressure:focus {
    -moz-outline-style:none;
         outline:medium none;
}
.btn-pressure:active, .btn-pressure.active {
    top: 4px;
    border: 0;
    position: relative;
}
.btn-sensitive:active, .btn-sensitive.active {
    top: 1px;
    margin-top: 4px;
}
                                    

This is the JS code for this bootstrap snippet

Copy, paste, change, customize and run the following JS code to get a result Like the one shown in the preview

$(function(){
    $("#toggle-link").click(function(e) {
        e.preventDefault();
        $("#profileCol").toggleClass("hidden");
        if($("#profileCol").hasClass('hidden')){
            
            $("#contentCol").removeClass('col-md-9');
            $("#contentCol").addClass('col-md-12 fade in');
            $(this).html('Show Menu <i class="fa fa-arrow-right"></i>');
        }else {
            $("#contentCol").removeClass('col-md-12');
            $("#contentCol").addClass('col-md-9');
            $(this).html('<i class="fa fa-arrow-left"></i> Hide Menu');
        }
    });
    $('.tip').tooltip();
});
                                     

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.4

Created: Jun 28th 2015, 19:54

Views: 3.8K