Bootstrap Admin Panel Example – Tutorial

Hello friends, today we are going to learn how to make the ‘bootstrap admin panel example’. This admin panel tutorial is extremely efficient and responsive.

Create a file index.html to build the sign-up form.

[php]
<!DOCTYPE html>
<html lang="en">

<head>

<title>
Meul Tech Bootstrap Admin Panel Tutorial
</title>

<!– Bootstrap Core CSS –>
<link href="css/bootstrap.min.css" rel="stylesheet">

<!– Custom CSS –>
<link href="one-page-wonder.css" rel="stylesheet">
<style>
body {
background: #F1F3FA;
}
/* Profile container */

.profile {
margin: 20px 0;
}
/* Profile sidebar */

.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-usertitle-job {
text-transform: uppercase;
color: #5b9bd1;
font-size: 12px;
font-weight: 600;
margin-bottom: 15px;
}

.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-userbuttons .btn:last-child {
margin-right: 0px;
}

.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 */

.profile-content {
padding: 20px;
background: #fff;
min-height: 460px;
}
</style>

</head>

<body>

<!– Navigation –>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!– Brand and toggle get grouped for better mobile display –>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">
Toggle navigation
</span>
<span class="icon-bar">
</span>
<span class="icon-bar">
</span>
<span class="icon-bar">
</span>
</button>
<h1 class="logo">
<a title="" href="https://www.mehulprajapati.com" >
<img alt="" src="https://www.mehulprajapati.comwp-content/uploads/2015/08/Meul Tech -Logo-259×30.jpg" style="height: auto; width: auto; display: inline-block; top: 0px;">
</a>
</h1>
</div>
<!– Collect the nav links, forms, and other content for toggling –>
<!– /.navbar-collapse –>
</div>
<!– /.container –>
</nav>

<!– Full Width Image Header –>

<!– Page Content –>
<div class="container">

<!– First Featurette –>
<div class="featurette" id="about">
<!————————code—————start—————->
<div class="container">
<div class="row profile">
<div class="col-md-3">
<div class="profile-sidebar">
<!– SIDEBAR USERPIC –>
<div class="profile-userpic">
<img src="img/justin-bieber-600×800.jpg" class="img-responsive" alt="">
</div>
<!– END SIDEBAR USERPIC –>
<!– SIDEBAR USER TITLE –>
<div class="profile-usertitle">
<div class="profile-usertitle-name">
Justin Beiber
</div>
<div class="profile-usertitle-job">
Managing Director
</div>
</div>
<!– END SIDEBAR USER TITLE –>
<!– SIDEBAR BUTTONS –>
<div class="profile-userbuttons">
<button type="button" class="btn btn-success btn-sm">Follow</button>
<button type="button" class="btn btn-danger btn-sm">Message</button>
</div>
<!– END SIDEBAR BUTTONS –>
<!– SIDEBAR MENU –>
<div class="profile-usermenu">
<ul class="nav">
<li class="active">
<a href="https://www.mehulprajapati.com">
<i class="glyphicon glyphicon-home"></i> Overview </a>
</li>
<li>
<a href="https://www.mehulprajapati.com">
<i class="glyphicon glyphicon-user"></i> Account Settings </a>
</li>
<li>
<a href="https://www.mehulprajapati.com" target="_blank">
<i class="glyphicon glyphicon-ok"></i> Tasks </a>
</li>
<li>
<a href="https://www.mehulprajapati.com">
<i class="glyphicon glyphicon-flag"></i> Help </a>
</li>
</ul>
</div>
<!– END MENU –>
</div>
</div>
<div class="col-md-9">
<div class="profile-content">
Some user related content goes here…
</div>
</div>
</div>
</div>

<!– jQuery –>
<script src="js/jquery.min.js"></script>

<!– Bootstrap Core JavaScript –>
<script src="js/bootstrap.min.js"></script>
</script>

</body>

</html>
[/php]

STEP 2:

Now we just have to create a CSS file. For other bootstrap files, please download the code and get the files.
Finally our ‘Bootstrap Admin Panel Example’ is ready to run. Hit your url and check out your output.

Don’t forget to share your doubts in the comment box and also share this post on social media and with your friends because “You share, I share, let’s make the world aware”.

You may want to take a look at the following related posts:

Also for more awesome tutorials, please don’t forget to like our facebook page Meul Tech .

Bonus: We also give training on following topics:

1. Angular Training in Mumbai.

2. Bootstrap Training Course in Mumbai.

3. Web Designing Training in Mumbai.

4. UI / UX Training.

5. IOS Training Institute in Mumbai.