Bootstrap 3 Simple Admin Template || https://bootsnipp.com/user/snippets/BxPb9

simple-admin.css

h1.page-header {
	margin-top: -5px;
}

.sidebar {
	padding-left: 0;
}

.main-container {
	background: #FFF;
	padding-top: 15px;
	margin-top: -20px;

	margin-left: 100px;
	margin-right: 100px;
}

.footer {
	width: 100%;
}

:focus {
	outline: none;
}

.side-menu {
	position: relative;
	width: 100%;
	height: 100%;
	background-color: #f8f8f8;
	border-right: 1px solid #e7e7e7;
}

.side-menu .navbar {
	border: none;
}

.side-menu .navbar-header {
	width: 100%;
	border-bottom: 1px solid #e7e7e7;
}

.side-menu .navbar-nav .active a {
	background-color: transparent;
	margin-right: -1px;
	border-right: 5px solid #e7e7e7;
}

.side-menu .navbar-nav li {
	display: block;
	width: 100%;
	border-bottom: 1px solid #e7e7e7;
}

.side-menu .navbar-nav li a {
	padding: 15px;
}

.side-menu .navbar-nav li a .glyphicon {
	padding-right: 10px;
}

.side-menu #dropdown {
	border: 0;
	margin-bottom: 0;
	border-radius: 0;
	background-color: transparent;
	box-shadow: none;
}

.side-menu #dropdown .caret {
	float: right;
	margin: 9px 5px 0;
}

.side-menu #dropdown .indicator {
	float: right;
}

.side-menu #dropdown>a {
	border-bottom: 1px solid #e7e7e7;
}

.side-menu #dropdown .panel-body {
	padding: 0;
	background-color: #f3f3f3;
}

.side-menu #dropdown .panel-body .navbar-nav {
	width: 100%;
}

.side-menu #dropdown .panel-body .navbar-nav li {
	padding-left: 15px;
	border-bottom: 1px solid #e7e7e7;
}

.side-menu #dropdown .panel-body .navbar-nav li:last-child {
	border-bottom: none;
}

.side-menu #dropdown .panel-body .panel>a {
	margin-left: -20px;
	padding-left: 35px;
}

.side-menu #dropdown .panel-body .panel-body {
	margin-left: -15px;
}

.side-menu #dropdown .panel-body .panel-body li {
	padding-left: 30px;
}

.side-menu #dropdown .panel-body .panel-body li:last-child {
	border-bottom: 1px solid #e7e7e7;
}

.side-menu #search-trigger {
	background-color: #f3f3f3;
	border: 0;
	border-radius: 0;
	position: absolute;
	top: 0;
	right: 0;
	padding: 15px 18px;
}

.side-menu .brand-name-wrapper {
	min-height: 50px;
}

.side-menu .brand-name-wrapper .navbar-brand {
	display: block;
}

.side-menu #search {
	position: relative;
	z-index: 1000;
}

.side-menu #search .panel-body {
	padding: 0;
}

.side-menu #search .panel-body .navbar-form {
	padding: 0;
	padding-right: 50px;
	width: 100%;
	margin: 0;
	position: relative;
	border-top: 1px solid #e7e7e7;
}

.side-menu #search .panel-body .navbar-form .form-group {
	width: 100%;
	position: relative;
}

.side-menu #search .panel-body .navbar-form input {
	border: 0;
	border-radius: 0;
	box-shadow: none;
	width: 100%;
	height: 50px;
}

.side-menu #search .panel-body .navbar-form .btn {
	position: absolute;
	right: 0;
	top: 0;
	border: 0;
	border-radius: 0;
	background-color: #f3f3f3;
	padding: 15px 18px;
}

/* Main body section */
.side-body {
	margin-left: 310px;
}

/* small screen */
@media (max-width: 768px) {
	.side-menu {
		position: relative;
		width: 100%;
		height: 0;
		border-right: 0;
	}

	.side-menu .navbar {
		z-index: 999;
		position: relative;
		height: 0;
		min-height: 0;
		background-color: none !important;
		border-color: none !important;
	}

	.side-menu .brand-name-wrapper .navbar-brand {
		display: inline-block;
	}

	/* Slide in animation */
	@-moz-keyframes slidein {
		0% {
			left: -300px;
		}

		100% {
			left: 10px;
		}
	}

	@-webkit-keyframes slidein {
		0% {
			left: -300px;
		}

		100% {
			left: 10px;
		}
	}

	@keyframes slidein {
		0% {
			left: -300px;
		}

		100% {
			left: 10px;
		}
	}

	@-moz-keyframes slideout {
		0% {
			left: 0;
		}

		100% {
			left: -300px;
		}
	}

	@-webkit-keyframes slideout {
		0% {
			left: 0;
		}

		100% {
			left: -300px;
		}
	}

	@keyframes slideout {
		0% {
			left: 0;
		}

		100% {
			left: -300px;
		}
	}

	/* Slide side menu*/
	/* Add .absolute-wrapper.slide-in for scrollable menu -> see top comment */
	.side-menu-container>.navbar-nav.slide-in {
		-moz-animation: slidein 300ms forwards;
		-o-animation: slidein 300ms forwards;
		-webkit-animation: slidein 300ms forwards;
		animation: slidein 300ms forwards;
		-webkit-transform-style: preserve-3d;
		transform-style: preserve-3d;
	}

	.side-menu-container>.navbar-nav {
		/* Add position:absolute for scrollable menu -> see top comment */
		position: fixed;
		left: -300px;
		width: 300px;
		top: 43px;
		height: 100%;
		border-right: 1px solid #e7e7e7;
		background-color: #f8f8f8;
		overflow: auto;
		-moz-animation: slideout 300ms forwards;
		-o-animation: slideout 300ms forwards;
		-webkit-animation: slideout 300ms forwards;
		animation: slideout 300ms forwards;
		-webkit-transform-style: preserve-3d;
		transform-style: preserve-3d;
	}

	@-moz-keyframes bodyslidein {
		0% {
			left: 0;
		}

		100% {
			left: 300px;
		}
	}

	@-webkit-keyframes bodyslidein {
		0% {
			left: 0;
		}

		100% {
			left: 300px;
		}
	}

	@keyframes bodyslidein {
		0% {
			left: 0;
		}

		100% {
			left: 300px;
		}
	}

	@-moz-keyframes bodyslideout {
		0% {
			left: 300px;
		}

		100% {
			left: 0;
		}
	}

	@-webkit-keyframes bodyslideout {
		0% {
			left: 300px;
		}

		100% {
			left: 0;
		}
	}

	@keyframes bodyslideout {
		0% {
			left: 300px;
		}

		100% {
			left: 0;
		}
	}

	/* Slide side body*/
	.side-body {
		margin-left: 5px;
		margin-top: 70px;
		position: relative;
		-moz-animation: bodyslideout 300ms forwards;
		-o-animation: bodyslideout 300ms forwards;
		-webkit-animation: bodyslideout 300ms forwards;
		animation: bodyslideout 300ms forwards;
		-webkit-transform-style: preserve-3d;
		transform-style: preserve-3d;
	}

	.body-slide-in {
		-moz-animation: bodyslidein 300ms forwards;
		-o-animation: bodyslidein 300ms forwards;
		-webkit-animation: bodyslidein 300ms forwards;
		animation: bodyslidein 300ms forwards;
		-webkit-transform-style: preserve-3d;
		transform-style: preserve-3d;
	}

	/* Hamburger */
	.navbar-toggle-sidebar {
		border: 0;
		float: left;
		padding: 18px;
		margin: 0;
		border-radius: 0;
		background-color: #f3f3f3;
	}

	/* Search */
	#search .panel-body .navbar-form {
		border-bottom: 0;
	}

	#search .panel-body .navbar-form .form-group {
		margin: 0;
	}

	.side-menu .navbar-header {
		/* this is probably redundant */
		position: fixed;
		z-index: 3;
		background-color: #f8f8f8;
	}

	/* Dropdown tweek */
	#dropdown .panel-body .navbar-nav {
		margin: 0;
	}
}

.navbar-container {
	margin-left: 100px;
	margin-right: 100px;
}

@media (min-width: 768px) {
	.navbar-nav.navbar-center {
		position: absolute;
		left: 50%;
		transform: translatex(-50%);
	}
}

#footer {
	min-height: 60px;
	background-color: #e8e8e8;
	color: #999;
	padding-top: 21px;
	margin-top: 21px
}

#footer>.container {
	padding-left: 15px;
	padding-right: 15px;
}


#footer a {
	text-decoration: none;
	margin: 0;
	color: #7e7e7e;
	outline: 0;
	border-top: 7px solid #e8e8e8
}

.copy {
	margin-right: 15px
}

simple-admin.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <!-- This file has been downloaded from Bootsnipp.com. Enjoy! -->
    <title>Simple Admin Template - Bootsnipp.com</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="simple-admin.css" rel="stylesheet">
  
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    <script src="simple-admin.js"></script>
</head>

<body>
    <nav class="navbar navbar-default navbar-static-top">
        <div class="container-fluid navbar-container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle navbar-toggle-sidebar collapsed">
                    MENU
                </button>
                <button type="button" class="navbar-toggle collapsed" 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>
                <a class="navbar-brand" href="#">
                    Administrator
                </a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <form class="navbar-form navbar-left" method="GET" role="search">
                    <div class="form-group">
                        <input type="text" name="q" class="form-control" placeholder="Search">
                    </div>
                    <button type="submit" class="btn btn-default"><i class="glyphicon glyphicon-search"></i></button>
                </form>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="http://www.pingpong-labs.com" target="_blank">Visit Site</a></li>
                    <li class="dropdown ">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
                            Account
                            <span class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu">
                            <li class="dropdown-header">SETTINGS</li>
                            <li class=""><a href="#">Other Link</a></li>
                            <li class=""><a href="#">Other Link</a></li>
                            <li class=""><a href="#">Other Link</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Logout</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>

    <div class="container-fluid main-container">
        <div class="col-md-2 sidebar">
            <div class="row">
                <!-- uncomment code for absolute positioning tweek see top comment in css -->
                <div class="absolute-wrapper"> </div>

                <!-- Menu -->
                <div class="side-menu">
                    <nav class="navbar navbar-default" role="navigation">
                        <!-- Main Menu -->
                        <div class="side-menu-container">
                            <ul class="nav navbar-nav">
                                <li class="active"><a href="#"><span class="glyphicon glyphicon-dashboard"></span>
                                        Dashboard</a></li>
                                <li><a href="#"><span class="glyphicon glyphicon-plane"></span> Active Link</a></li>
                                <li><a href="#"><span class="glyphicon glyphicon-cloud"></span> Link</a></li>

                                <!-- Dropdown-->
                                <li class="panel panel-default" id="dropdown">
                                    <a data-toggle="collapse" href="#dropdown-lvl1">
                                        <span class="glyphicon glyphicon-user"></span> Sub Level <span
                                            class="caret"></span>
                                    </a>

                                    <!-- Dropdown level 1 -->
                                    <div id="dropdown-lvl1" class="panel-collapse collapse">
                                        <div class="panel-body">
                                            <ul class="nav navbar-nav">
                                                <li><a href="#">Link</a></li>
                                                <li><a href="#">Link</a></li>
                                                <li><a href="#">Link</a></li>

                                                <!-- Dropdown level 2 -->
                                                <li class="panel panel-default" id="dropdown">
                                                    <a data-toggle="collapse" href="#dropdown-lvl2">
                                                        <span class="glyphicon glyphicon-off"></span> Sub Level <span
                                                            class="caret"></span>
                                                    </a>
                                                    <div id="dropdown-lvl2" class="panel-collapse collapse">
                                                        <div class="panel-body">
                                                            <ul class="nav navbar-nav">
                                                                <li><a href="#">Link</a></li>
                                                                <li><a href="#">Link</a></li>
                                                                <li><a href="#">Link</a></li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </li>

                                <li><a href="#"><span class="glyphicon glyphicon-signal"></span> Link</a></li>

                            </ul>
                        </div>
                        <!-- /.navbar-collapse -->
                    </nav>

                </div>
            </div>
        </div>

        <div class="col-md-10 content">

            <!-- Page breadcrumb -->
            <ol class="breadcrumb">
                <li><a href="#">Home</a></li>
                <li><a href="#">Library</a></li>
                <li class="active">Data</li>
            </ol>

            <div class="panel panel-default">
                <div class="panel-heading">
                    Dashboard
                </div>
                <div class="panel-body">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                    aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
                    culpa qui officia deserunt mollit anim id est laborum.
                </div>
            </div>

            <div class="panel panel-default">
                <div class="panel-heading">
                    Form
                </div>
                <div class="panel-body">
                    <div>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
                        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                        laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
                        voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
                        non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </div>
                    <form role="form" class="form-horizontal" id="login-form" action="" method="post">
                        <!-- <legend>Site settings</legend> -->
                        <fieldset>
                            <div class="form-group">
                                <label for="Users_email" class="col-sm-3 control-label">E-mail</label>
                                <div class="col-sm-9">
                                    <div class="col-md-5">
                                        <input class="form-control" maxlength="255" name="Users[email]" id="Users_email"
                                            type="email" value="sqds@cock.li">
                                    </div>
                                    <div class="col-md-9">
                                        <div class="text-danger form-control-static" id="Users_email_em_"
                                            style="display:none"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="Users_gmt" class="col-sm-3 control-label">Time</label>
                                <div class="col-sm-9">
                                    <div class="col-md-5">
                                        <select class="form-control" name="Users[gmt]" id="Users_gmt">
                                            <option value="0" selected="selected">00:00</option>
                                            <option value="1">+01:00</option>
                                            <option value="2">+02:00</option>
                                            <option value="3">+03:00</option>
                                        </select>
                                    </div>
                                    <div class="col-md-12">
                                        <p class="help-block">Current server time: 16:18<br>If your time is different
                                            from the time on the server, adjust the sending time.</p>
                                        <div class="text-danger form-control-static" id="Users_gmt_em_"
                                            style="display:none"></div>
                                    </div>
                                </div>
                            </div>
                        </fieldset>

                        <fieldset>
                            <legend>Book settings</legend>

                            <div class="form-group">
                                <label for="Users_name_book" class="col-sm-3 control-label">Book name</label>
                                <div class="col-sm-9">
                                    <div class="col-md-5">
                                        <input class="form-control" maxlength="255" name="Users[name_book]"
                                            id="Users_name_book" type="text" value="RSS"> </div>
                                    <div class="col-md-9">
                                        <p class="help-block">You can change default name of the book</p>
                                        <div class="text-danger form-control-static" id="Users_name_book_em_"
                                            style="display:none"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="Users_name_book" class="col-sm-3 control-label">Enable export</label>
                                <div class="col-sm-9">
                                    <div class="col-md-5">
                                        <div class="checkbox">
                                            <label>
                                                <input type="checkbox" class="input-control" id="exampleCheck1">
                                                Enable
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-md-9">
                                        <p class="help-block">When exporting from a separate tape, assign the name of
                                            this tape</p>
                                        <div class="text-danger form-control-static" id="Users_name_book_em_"
                                            style="display:none"></div>
                                    </div>
                                </div>
                            </div>

                            <hr>
                        </fieldset>

                    </form>
                </div>
            </div>
        </div>
    </div>

    <div id="footer">
        <div class="container">
            <span class="copy">© 2015 <a href="http://www.pingpong-labs.com">Gravitano</a></span>
        </div>
	</div>
</body>

</html>

simple-admin.js

$(function() {
	$('.navbar-toggle-sidebar').click(function() {
		$('.navbar-nav').toggleClass('slide-in');
		$('.side-body').toggleClass('body-slide-in');
		$('#search').removeClass('in').addClass('collapse').slideUp(200);
	});

	$('#search-trigger').click(function() {
		$('.navbar-nav').removeClass('slide-in');
		$('.side-body').removeClass('body-slide-in');
		$('.search-input').focus();
	});
});