Skip to content

Commit

Permalink
added sticky footer option for both navbar options
Browse files Browse the repository at this point in the history
  • Loading branch information
@davidtmiller
davidtmiller committed Aug 26, 2017
1 parent fe8f0d0 commit a08e3b9
Show file tree
Hide file tree
Showing 8 changed files with 402 additions and 21 deletions.
314 changes: 314 additions & 0 deletions blank.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,314 @@
<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<meta name="description" content="">
<meta name="author" content="">
<title>SB Admin - Start Bootstrap Template</title>

<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

<!-- Custom fonts for this template -->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

<!-- Plugin CSS -->
<link href="vendor/datatables/dataTables.bootstrap4.css" rel="stylesheet">

<!-- Custom styles for this template -->
<link href="css/sb-admin.css" rel="stylesheet">

</head>

<body class="fixed-nav sticky-footer bg-dark" id="page-top">

<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
<a class="navbar-brand" href="#">Start Bootstrap</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav navbar-sidenav" id="exampleAccordion">
<li class="nav-item active" data-toggle="tooltip" data-placement="right" title="Dashboard">
<a class="nav-link" href="#">
<i class="fa fa-fw fa-dashboard"></i>
<span class="nav-link-text">
Dashboard</span>
</a>
</li>
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Charts">
<a class="nav-link" href="#">
<i class="fa fa-fw fa-area-chart"></i>
<span class="nav-link-text">
Charts</span>
</a>
</li>
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Tables">
<a class="nav-link" href="#">
<i class="fa fa-fw fa-table"></i>
<span class="nav-link-text">
Tables</span>
</a>
</li>
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Components">
<a class="nav-link nav-link-collapse collapsed" data-toggle="collapse" href="#collapseComponents" data-parent="#exampleAccordion">
<i class="fa fa-fw fa-wrench"></i>
<span class="nav-link-text">
Components</span>
</a>
<ul class="sidenav-second-level collapse" id="collapseComponents">
<li>
<a href="static-nav.html">Static Navigation</a>
</li>
<li>
<a href="#">Custom Card Examples</a>
</li>
</ul>
</li>
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Example Pages">
<a class="nav-link nav-link-collapse collapsed" data-toggle="collapse" href="#collapseExamplePages" data-parent="#exampleAccordion">
<i class="fa fa-fw fa-file"></i>
<span class="nav-link-text">
Example Pages</span>
</a>
<ul class="sidenav-second-level collapse" id="collapseExamplePages">
<li>
<a href="login.html">Login Page</a>
</li>
<li>
<a href="register.html">Registration Page</a>
</li>
<li>
<a href="forgot-password.html">Forgot Password Page</a>
</li>
<li>
<a href="#">Blank Page</a>
</li>
</ul>
</li>
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Menu Levels">
<a class="nav-link nav-link-collapse collapsed" data-toggle="collapse" href="#collapseMulti" data-parent="#exampleAccordion">
<i class="fa fa-fw fa-sitemap"></i>
<span class="nav-link-text">
Menu Levels</span>
</a>
<ul class="sidenav-second-level collapse" id="collapseMulti">
<li>
<a href="#">Second Level Item</a>
</li>
<li>
<a href="#">Second Level Item</a>
</li>
<li>
<a class="nav-link-collapse collapsed" data-toggle="collapse" href="#collapseMulti2">Third Level</a>
<ul class="sidenav-third-level collapse" id="collapseMulti2">
<li>
<a href="#">Third Level Item</a>
</li>
<li>
<a href="#">Third Level Item</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Link">
<a class="nav-link" href="#">
<i class="fa fa-fw fa-link"></i>
<span class="nav-link-text">
Link</span>
</a>
</li>
</ul>
<ul class="navbar-nav sidenav-toggler">
<li class="nav-item">
<a class="nav-link text-center" id="sidenavToggler">
<i class="fa fa-fw fa-angle-left"></i>
</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle mr-lg-2" href="#" id="messagesDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-fw fa-envelope"></i>
<span class="d-lg-none">Messages
<span class="badge badge-pill badge-primary">12 New</span>
</span>
<span class="new-indicator text-primary d-none d-lg-block">
<i class="fa fa-fw fa-circle"></i>
<span class="number">12</span>
</span>
</a>
<div class="dropdown-menu" aria-labelledby="messagesDropdown">
<h6 class="dropdown-header">New Messages:</h6>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<strong>David Miller</strong>
<span class="small float-right text-muted">11:21 AM</span>
<div class="dropdown-message small">Hey there! This new version of SB Admin is pretty awesome! These messages clip off when they reach the end of the box so they don't overflow over to the sides!</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<strong>Jane Smith</strong>
<span class="small float-right text-muted">11:21 AM</span>
<div class="dropdown-message small">I was wondering if you could meet for an appointment at 3:00 instead of 4:00. Thanks!</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<strong>John Doe</strong>
<span class="small float-right text-muted">11:21 AM</span>
<div class="dropdown-message small">I've sent the final files over to you for review. When you're able to sign off of them let me know and we can discuss distribution.</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item small" href="#">
View all messages
</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle mr-lg-2" href="#" id="alertsDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-fw fa-bell"></i>
<span class="d-lg-none">Alerts
<span class="badge badge-pill badge-warning">6 New</span>
</span>
<span class="new-indicator text-warning d-none d-lg-block">
<i class="fa fa-fw fa-circle"></i>
<span class="number">6</span>
</span>
</a>
<div class="dropdown-menu" aria-labelledby="alertsDropdown">
<h6 class="dropdown-header">New Alerts:</h6>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<span class="text-success">
<strong>
<i class="fa fa-long-arrow-up"></i>
Status Update</strong>
</span>
<span class="small float-right text-muted">11:21 AM</span>
<div class="dropdown-message small">This is an automated server response message. All systems are online.</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<span class="text-danger">
<strong>
<i class="fa fa-long-arrow-down"></i>
Status Update</strong>
</span>
<span class="small float-right text-muted">11:21 AM</span>
<div class="dropdown-message small">This is an automated server response message. All systems are online.</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<span class="text-success">
<strong>
<i class="fa fa-long-arrow-up"></i>
Status Update</strong>
</span>
<span class="small float-right text-muted">11:21 AM</span>
<div class="dropdown-message small">This is an automated server response message. All systems are online.</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item small" href="#">
View all alerts
</a>
</div>
</li>
<li class="nav-item">
<form class="form-inline my-2 my-lg-0 mr-lg-2">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-primary" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</form>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="modal" data-target="#exampleModal">
<i class="fa fa-fw fa-sign-out"></i>
Logout</a>
</li>
</ul>
</div>
</nav>

<div class="content-wrapper">

<div class="container-fluid">

<!-- Breadcrumbs -->
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="#">Dashboard</a>
</li>
<li class="breadcrumb-item active">My Dashboard</li>
</ol>

<h1>Blank Page</h1>

</div>
<!-- /.container-fluid -->

</div>
<!-- /.content-wrapper -->

<footer class="sticky-footer">
<div class="container">
<div class="text-center">
<small>Copyright &copy; Your Website 2017</small>
</div>
</div>
</footer>

<!-- Scroll to Top Button -->
<a class="scroll-to-top rounded" href="#page-top">
<i class="fa fa-angle-up"></i>
</a>

<!-- Logout Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
Select "Logout" below if you are ready to end your current session.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<a class="btn btn-primary" href="login.html">Logout</a>
</div>
</div>
</div>
</div>

<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/popper/popper.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>

<!-- Plugin JavaScript -->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<script src="vendor/chart.js/Chart.min.js"></script>
<script src="vendor/datatables/jquery.dataTables.js"></script>
<script src="vendor/datatables/dataTables.bootstrap4.js"></script>

<!-- Custom scripts for this template -->
<script src="js/sb-admin.min.js"></script>

</body>

</html>
36 changes: 30 additions & 6 deletions css/sb-admin.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,21 @@
* Copyright 2013-2017 Start Bootstrap
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-sb-admin/blob/master/LICENSE)
*/
html {
position: relative;
min-height: 100%; }

body.sticky-footer {
margin-bottom: 56px; }
body.sticky-footer .content-wrapper {
min-height: calc(100vh - 56px - 56px); }

body.fixed-nav {
padding-top: 54px; }
@media (min-width: 992px) {
body.fixed-nav {
padding-top: 56px; } }
padding-top: 56px; }

.content-wrapper {
min-height: calc(100vh - 56px);
padding-top: 1rem; }

.scroll-to-top {
position: fixed;
Expand Down Expand Up @@ -275,8 +285,6 @@ body.sidenav-toggled #mainNav.fixed-top #sidenavToggler i {
display: none; }

@media (min-width: 992px) {
#mainNav.static-top .navbar-sidenav {
min-height: 100vh; }
#mainNav.static-top .sidenav-toggler {
display: flex; } }

Expand Down Expand Up @@ -325,3 +333,19 @@ body.sidenav-toggled .navbar-sidenav-tooltip.show {

.card-register {
max-width: 40rem; }

footer.sticky-footer {
position: absolute;
right: 0;
bottom: 0;
width: 100%;
height: 56px;
background-color: #e9ecef;
line-height: 55px; }
@media (min-width: 992px) {
footer.sticky-footer {
width: calc(100% - 250px); } }

@media (min-width: 992px) {
body.sidenav-toggled footer.sticky-footer {
width: calc(100% - 55px); } }
Loading

0 comments on commit a08e3b9

Please sign in to comment.