How to have a fully responsive, collapsable side nav bar made with Bootstrap that will resize the page upon collapsing.
For this you will need jQuery. The included CSS styling with the example is trimmed down Bootstrap.
Video example:
Click the spoiler tags below to view the source code.
<nav id="navbar-white"
class="navbar navbar-expand d-flex navbar-dark justify-content-between bd-navbar indigo darken-1 shadow navbar-stay-top"
role="navigation">
<div class="navbar-header">
<button href="#menu-toggle" class="slidebar-toggle" id="menu-toggle">
<a href="#" data-toggle="push-menu" class="paper-nav-toggle pp-nav-toggle">
<i></i>
</a>
</button>
<span><a class="navbar-brand" href="/">Menu</a></span>
</div>
<div class="navbar-collapse collapse">
</div>
</nav>
<div id="wrapper">
<div id="slidebar-white" class="slidebar-nav sidebar light sidebar">
<nav class="navbar navbar-default" role="navigation">
<div class="mx-auto">
<div class="user-panel p-3 light mb-2">
<div class="text-center image">
<a href="https://domain.com/profile/av"><img class="user_avatar"
src="https://dummyimage.com/256x256/47b6cc/fff&text=av"
alt="user av"></a>
</div>
<div class="clearfix"></div>
</div>
</div>
<ul class="sidebar-menu">
<li class="active"><a href="#"><i class="icon icon-house"></i>Home</a>
</li>
<li class=""><a href="#"><i class="icon icon-fire"></i>Popular</a>
</li>
<li class=""><a href="#"><i
class="icon icon-clock-o"></i>New</a>
</li>
<li class=""><a href="#"><i class="icon icon-arrow-circle-o-up"></i>Upload</a>
</li>
<li class=""><a href="#"><i
class="icon icon-user"></i>Profile</a>
</li>
<li class="spacer"></li>
<li><a href="#"><i class="icon icon-exit_to_app"></i>Logout</a>
</li>
</ul>
</nav>
</div>
<main id="page-wrapper6">
<div class='container-fluid'>
<div class="card">
<div class="card-header text-center">
<h1 class="display-3">Header text</h1>
<p class="lead">Generate Lorem Ipsum placeholder text. Select the number of characters, words,
sentences or paragraphs, and hit generate!</p>
</div>
<div class="card-body text-center">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Eu scelerisque felis imperdiet proin. Viverra tellus in hac
habitasse platea dictumst vestibulum rhoncus. Mus mauris vitae ultricies leo. Sed libero enim
sed faucibus turpis in eu. Quam id leo in vitae.</p>
<p>Ac turpis egestas maecenas pharetra convallis posuere morbi leo urna. Sit amet mauris commodo
quis imperdiet massa. Ultrices mi tempus imperdiet nulla.</p>
<a class="btn btn-success px-lg-5" href="login/" role="button">Log in</a>
</div>
</div>
<div class="row mt-3">
<div class="col-12 col-lg-6">
<div class="card">
<div class="card-header">
<h4 class="text-center">A form card</h4>
</div>
<div class="card-body">
<p class="lead text-center">This is a form card with a select</p>
<form action-xhr="#" method="post">
<div class="row">
<div class="col-md-12 px-5">
<div class="form-group">
<label for="category">Category:</label>
<select class="form-control" id="category" name="category">
<option value="1" selected>Food</option>
<option value="2">Drink</option>
<option value="3">Merchandise</option>
</select>
<input type="hidden" name="home-redir" id="home-redir" value="1">
</div>
</div>
</div>
<div class="row">
<div class="col-12 text-center">
<input type="submit" class="btn btn-primary btn-send px-5 py-1" value="View">
</div>
</div>
</form>
</div>
</div>
</div>
<div class="col-12 col-lg-6">
<div class="card">
<div class="card-header">
<h4 class="text-center">A form card</h4>
</div>
<div class="card-body">
<p class="lead text-center">This is a form card with a select</p>
<form action-xhr="#" method="post">
<div class="row">
<div class="col-md-12 px-5">
<div class="form-group">
<label for="category">Category:</label>
<select class="form-control" id="category" name="category">
<option value="1" selected>Food</option>
<option value="2">Drink</option>
<option value="3">Merchandise</option>
</select>
<input type="hidden" name="home-redir" id="home-redir" value="1">
</div>
</div>
</div>
<div class="row">
<div class="col-12 text-center">
<input type="submit" class="btn btn-primary btn-send px-5 py-1" value="View">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class='row'>
<div class='col-12 col-md-6'>
<div class="card mt-4">
<div class="card-header text-center">
<h1>Card header</h1>
<p class="lead">smaller header text here</p>
<a class="btn btn-primary" href="post/search.php?sort=top" role="button">View more</a>
</div>
<div class="card-body">
<p>This is the card body</p>
</div>
</div>
</div>
<div class='col-12 col-md-6'>
<div class="card mt-4">
<div class="card-header text-center">
<h1>Card header</h1>
<p class="lead">smaller header text here</p>
<a class="btn btn-primary" href="#" role="button">View more</a>
</div>
<div class="card-body">
<p>This is the card body</p>
</div>
</div>
</div>
</div>
</div>
</main>
</div> $("#menu-toggle").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
@charset "UTF-8";:root {
--indigo: #6610f2;
--primary: #03a9f4;
--secondary: #6c757d;
--success: #7dc855;
--info: #78bcee;
--warning: #fcce54;
--danger: #ed5564;
--light: #f8f9fa;
--dark: #272c33;
--breakpoint-xs: 0;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
"Liberation Mono", "Courier New", monospace;
}*,
::after,
::before {
box-sizing: border-box;
}html {
font-family: sans-serif;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
}main,
nav {
display: block;
}body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: left;
background-color: #ecf0f5;
}h1,
h4,
h5 {
margin-top: 0;
margin-bottom: 0.5rem;
}p {
margin-top: 0;
margin-bottom: 1rem;
}ul {
margin-top: 0;
margin-bottom: 1rem;
}small {
font-size: 80%;
}a {
color: #03a9f4;
text-decoration: none;
background-color: transparent;
}a:hover {
color: #0275a8;
text-decoration: underline;
}img {
vertical-align: middle;
border-style: none;
}label {
display: inline-block;
margin-bottom: 0.5rem;
}button {
border-radius: 0;
}button:focus {
outline: 1px dotted;
outline: 5px auto -webkit-focus-ring-color;
}button,
input,
select {
margin: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;
}button,
input {
overflow: visible;
}button,
select {
text-transform: none;
}select {
[type="submit"],
word-wrap: normal;
}
button {
-webkit-appearance: button;
} [type="button"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="submit"]:not(:disabled),
button:not(:disabled) {
cursor: pointer;
} [type="submit"]::-moz-focus-inner,
button::-moz-focus-inner {
padding: 0;
border-style: none;
}::-webkit-file-upload-button {
font: inherit;
-webkit-appearance: button;
}h1,
h4,
h5 {
margin-bottom: 0.5rem;
font-weight: 300;
line-height: 1.2;
color: #606676;
}h1 {
font-size: 2rem;
}h4 {
font-size: 1.2rem;
}h5 {
font-size: 1rem;
}.lead {
font-size: 1.25rem;
font-weight: 300;
}.display-3 {
font-size: 4.5rem;
font-weight: 300;
line-height: 1.2;
}small {
font-size: 80%;
font-weight: 400;
}.img-fluid {
max-width: 100%;
height: auto;
}.container-fluid {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}.row {
display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}.col-12,
.col-lg-6,
.col-md-12,
.col-md-6 {
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;
}.col-12 {
flex: 0 0 100%;
max-width: 100%;
}@media (min-width: 768px) {
.col-md-6 {
flex: 0 0 50%;
max-width: 50%;
}.col-md-12 {
flex: 0 0 100%;
max-width: 100%;
}
}@media (min-width: 992px) {
.col-lg-6 {
flex: 0 0 50%;
max-width: 50%;
}
}.form-control {
display: block;
width: 100%;
height: calc(1.5em + 0.75rem + 2px);
padding: 0.375rem 0.75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 0.25rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}@media (prefers-reduced-motion: reduce) {
.form-control {
transition: none;
}
}.form-control::-ms-expand {
background-color: transparent;
border: 0;
}.form-control:focus {
color: #495057;
background-color: #fff;
border-color: #79d4fd;
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(3, 169, 244, 0.25);
}.form-control:disabled {
background-color: #e9ecef;
opacity: 1;
}select.form-control:focus::-ms-value {
color: #495057;
background-color: #fff;
}.form-group {
margin-bottom: 1rem;
}.custom-control-input.is-valid:focus:not(:checked)
~ .custom-control-label::before,
.was-validated
.custom-control-input:valid:focus:not(:checked)
~ .custom-control-label::before {
border-color: #7dc855;
}.custom-control-input.is-invalid:focus:not(:checked)
~ .custom-control-label::before,
.was-validated
.custom-control-input:invalid:focus:not(:checked)
~ .custom-control-label::before {
border-color: #ed5564;
}.btn {
display: inline-block;
font-weight: 400;
color: #212529;
text-align: center;
vertical-align: middle;
user-select: none;
background-color: transparent;
border: 1px solid transparent;
padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: 0.25rem;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}@media (prefers-reduced-motion: reduce) {
.btn {
transition: none;
}
}.btn:hover {
color: #212529;
text-decoration: none;
}.btn:focus {
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(3, 169, 244, 0.25);
}.btn:disabled {
opacity: 0.65;
}.btn-primary {
color: #fff;
background-color: #03a9f4;
border-color: #03a9f4;
}.btn-primary:hover {
color: #fff;
background-color: #038fce;
border-color: #0286c2;
}.btn-primary:focus {
box-shadow: 0 0 0 0.2rem rgba(41, 182, 246, 0.5);
}.btn-primary:disabled {
color: #fff;
background-color: #03a9f4;
border-color: #03a9f4;
}.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active {
color: #fff;
background-color: #0286c2;
border-color: #027db5;
}.btn-primary:not(:disabled):not(.disabled).active:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus {
box-shadow: 0 0 0 0.2rem rgba(41, 182, 246, 0.5);
}.btn-secondary {
color: #fff;
background-color: #6c757d;
border-color: #6c757d;
}.btn-secondary:hover {
color: #fff;
background-color: #5a6268;
border-color: #545b62;
}.btn-secondary:focus {
box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5);
}.btn-secondary:disabled {
color: #fff;
background-color: #6c757d;
border-color: #6c757d;
}.btn-secondary:not(:disabled):not(.disabled).active,
.btn-secondary:not(:disabled):not(.disabled):active {
color: #fff;
background-color: #545b62;
border-color: #4e555b;
}.btn-secondary:not(:disabled):not(.disabled).active:focus,
.btn-secondary:not(:disabled):not(.disabled):active:focus {
box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5);
}.btn-success {
color: #212529;
background-color: #7dc855;
border-color: #7dc855;
}.btn-success:hover {
color: #fff;
background-color: #68ba3c;
border-color: #63b139;
}.btn-success:focus {
box-shadow: 0 0 0 0.2rem rgba(111, 176, 78, 0.5);
}.btn-success:disabled {
color: #212529;
background-color: #7dc855;
border-color: #7dc855;
}.btn-success:not(:disabled):not(.disabled).active,
.btn-success:not(:disabled):not(.disabled):active {
color: #fff;
background-color: #63b139;
border-color: #5da736;
}.btn-success:not(:disabled):not(.disabled).active:focus,
.btn-success:not(:disabled):not(.disabled):active:focus {
box-shadow: 0 0 0 0.2rem rgba(111, 176, 78, 0.5);
}.btn-info:not(:disabled):not(.disabled).active,
.btn-info:not(:disabled):not(.disabled):active {
color: #fff;
background-color: #4ba6e8;
border-color: #3fa0e7;
}.btn-info:not(:disabled):not(.disabled).active:focus,
.btn-info:not(:disabled):not(.disabled):active:focus {
box-shadow: 0 0 0 0.2rem rgba(107, 165, 208, 0.5);
}.btn-warning:not(:disabled):not(.disabled).active,
.btn-warning:not(:disabled):not(.disabled):active {
color: #212529;
background-color: #fbc022;
border-color: #fbbc15;
}.btn-warning:not(:disabled):not(.disabled).active:focus,
.btn-warning:not(:disabled):not(.disabled):active:focus {
box-shadow: 0 0 0 0.2rem rgba(219, 181, 78, 0.5);
}.btn-danger:not(:disabled):not(.disabled).active,
.btn-danger:not(:disabled):not(.disabled):active {
color: #fff;
background-color: #e8273a;
border-color: #e71b2f;
}.btn-danger:not(:disabled):not(.disabled).active:focus,
.btn-danger:not(:disabled):not(.disabled):active:focus {
box-shadow: 0 0 0 0.2rem rgba(240, 111, 123, 0.5);
}.btn-light:not(:disabled):not(.disabled).active,
.btn-light:not(:disabled):not(.disabled):active {
color: #212529;
background-color: #dae0e5;
border-color: #d3d9df;
}.btn-light:not(:disabled):not(.disabled).active:focus,
.btn-light:not(:disabled):not(.disabled):active:focus {
box-shadow: 0 0 0 0.2rem rgba(216, 217, 219, 0.5);
}.btn-dark:not(:disabled):not(.disabled).active,
.btn-dark:not(:disabled):not(.disabled):active {
color: #fff;
background-color: #111316;
border-color: #0b0d0f;
}.btn-dark:not(:disabled):not(.disabled).active:focus,
.btn-dark:not(:disabled):not(.disabled):active:focus {
box-shadow: 0 0 0 0.2rem rgba(71, 76, 82, 0.5);
}.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled):active {
color: #fff;
background-color: #03a9f4;
border-color: #03a9f4;
}.btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.btn-outline-primary:not(:disabled):not(.disabled):active:focus {
box-shadow: 0 0 0 0.2rem rgba(3, 169, 244, 0.5);
}.btn-outline-secondary:not(:disabled):not(.disabled).active,
.btn-outline-secondary:not(:disabled):not(.disabled):active {
color: #fff;
background-color: #6c757d;
border-color: #6c757d;
}.btn-outline-secondary:not(:disabled):not(.disabled).active:focus,
.btn-outline-secondary:not(:disabled):not(.disabled):active:focus {
box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
}.btn-outline-success:not(:disabled):not(.disabled).active,
.btn-outline-success:not(:disabled):not(.disabled):active {
color: #212529;
background-color: #7dc855;
border-color: #7dc855;
}.btn-outline-success:not(:disabled):not(.disabled).active:focus,
.btn-outline-success:not(:disabled):not(.disabled):active:focus {
box-shadow: 0 0 0 0.2rem rgba(125, 200, 85, 0.5);
}.btn-outline-info:not(:disabled):not(.disabled).active,
.btn-outline-info:not(:disabled):not(.disabled):active {
color: #212529;
background-color: #78bcee;
border-color: #78bcee;
}.btn-outline-info:not(:disabled):not(.disabled).active:focus,
.btn-outline-info:not(:disabled):not(.disabled):active:focus {
box-shadow: 0 0 0 0.2rem rgba(120, 188, 238, 0.5);
}.btn-outline-warning:not(:disabled):not(.disabled).active,
.btn-outline-warning:not(:disabled):not(.disabled):active {
color: #212529;
background-color: #fcce54;
border-color: #fcce54;
}.btn-outline-warning:not(:disabled):not(.disabled).active:focus,
.btn-outline-warning:not(:disabled):not(.disabled):active:focus {
box-shadow: 0 0 0 0.2rem rgba(252, 206, 84, 0.5);
}.btn-outline-danger:not(:disabled):not(.disabled).active,
.btn-outline-danger:not(:disabled):not(.disabled):active {
color: #fff;
background-color: #ed5564;
border-color: #ed5564;
}.btn-outline-danger:not(:disabled):not(.disabled).active:focus,
.btn-outline-danger:not(:disabled):not(.disabled):active:focus {
box-shadow: 0 0 0 0.2rem rgba(237, 85, 100, 0.5);
}.btn-outline-light:not(:disabled):not(.disabled).active,
.btn-outline-light:not(:disabled):not(.disabled):active {
color: #212529;
background-color: #f8f9fa;
border-color: #f8f9fa;
}.btn-outline-light:not(:disabled):not(.disabled).active:focus,
.btn-outline-light:not(:disabled):not(.disabled):active:focus {
box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
}.btn-outline-dark:not(:disabled):not(.disabled).active,
.btn-outline-dark:not(:disabled):not(.disabled):active {
color: #fff;
background-color: #272c33;
border-color: #272c33;
}.btn-outline-dark:not(:disabled):not(.disabled).active:focus,
.btn-outline-dark:not(:disabled):not(.disabled):active:focus {
box-shadow: 0 0 0 0.2rem rgba(39, 44, 51, 0.5);
}.collapse:not(.show) {
display: none;
}.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
border-color: #79d4fd;
}.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
color: #fff;
background-color: #ace4fe;
border-color: #ace4fe;
}.navbar {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
padding: 0.5rem 1rem;
}.navbar-brand {
display: inline-block;
padding-top: 0.3125rem;
padding-bottom: 0.3125rem;
margin-right: 1rem;
font-size: 1.25rem;
line-height: inherit;
white-space: nowrap;
}.navbar-brand:focus,
.navbar-brand:hover {
text-decoration: none;
}.navbar-collapse {
flex-basis: 100%;
flex-grow: 1;
align-items: center;
}.navbar-expand {
flex-flow: row nowrap;
justify-content: flex-start;
}.navbar-expand .navbar-collapse {
display: flex ;
flex-basis: auto;
}.navbar-dark .navbar-brand {
color: #fff;
}.navbar-dark .navbar-brand:focus,
.navbar-dark .navbar-brand:hover {
color: #fff;
}.card {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) ;
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid #e1e8ee;
border-radius: 0.25rem;
}.card-body {
flex: 1 1 auto;
padding: 1.25rem;
}.card-header {
padding: 0.75rem 1.25rem;
margin-bottom: 0;
background-color: rgba(0, 0, 0, 0.03);
border-bottom: 1px solid #e1e8ee;
}.card-header:first-child {
border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
}.list-group {
display: flex;
flex-direction: column;
padding-left: 0;
margin-bottom: 0;
}.list-group-item-action {
width: 100%;
color: #86939e;
text-align: inherit;
}.list-group-item-action:focus,
.list-group-item-action:hover {
z-index: 1;
color: #86939e;
text-decoration: none;
background-color: #f8f9fa;
}.list-group-item-action:active {
color: #212529;
background-color: #e9ecef;
}.list-group-item {
position: relative;
display: block;
padding: 0.75rem 1.25rem;
margin-bottom: -1px;
background-color: #fff;
border: 1px solid #e1e8ee;
}.list-group-item:first-child {
border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem;
}.list-group-item:last-child {
margin-bottom: 0;
border-bottom-right-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
}.list-group-item:disabled {
color: #6c757d;
pointer-events: none;
background-color: #fff;
}.close:not(:disabled):not(.disabled):focus,
.close:not(:disabled):not(.disabled):hover {
opacity: 0.75;
}.clearfix::after {
display: block;
clear: both;
content: "";
}.d-flex {
display: flex ;
}.flex-column {
flex-direction: column ;
}.justify-content-between {
justify-content: space-between ;
}.align-items-start {
align-items: flex-start ;
}@supports (position: sticky) {
}.shadow {
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) ;
}.w-50 {
width: 50% ;
}.mb-1 {
margin-bottom: 0.25rem ;
}.mb-2 {
margin-bottom: 0.5rem ;
}.mt-3 {
margin-top: 1rem ;
}.mt-4 {
margin-top: 1.5rem ;
}.py-1 {
padding-top: 0.25rem ;
}.py-1 {
padding-bottom: 0.25rem ;
}.p-3 {
padding: 1rem ;
}.px-5 {
padding-right: 3rem ;
}.px-5 {
padding-left: 3rem ;
}.mx-auto {
margin-right: auto ;
}.mx-auto {
margin-left: auto ;
}@media (min-width: 992px) {
.px-lg-5 {
padding-right: 3rem ;
}.px-lg-5 {
padding-left: 3rem ;
}
}.text-center {
text-align: center ;
}@media print {
*,
::after,
::before {
text-shadow: none ;
box-shadow: none ;
}a:not(.btn) {
text-decoration: underline;
}img {
page-break-inside: avoid;
}p {
orphans: 3;
widows: 3;
}@page {
size: a3;
}body {
min-width: 992px ;
}.navbar {
display: none;
}
}@font-face {
[class*=" icon-"] {
font-family: paperIcons;
src: url(https://cdn.dayzlocations.com/fonts/paperIcons.eot?8quail);
src: url(https://cdn.dayzlocations.com/fonts/paperIcons.eot?8quail#iefix)
format("embedded-opentype"),
url(https://cdn.dayzlocations.com/fonts/paperIcons.ttf?8quail)
format("truetype"),
url(https://cdn.dayzlocations.com/fonts/paperIcons.woff?8quail)
format("woff"),
url(https://cdn.dayzlocations.com/fonts/paperIcons.svg?8quail#paperIcons)
format("svg");
font-weight: 400;
font-style: normal;
}
font-family: paperIcons ;
speak: none;
font-style: normal;
font-weight: 400;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}.icon-exit_to_app:before {
content: "\e879";
}.icon-house:before {
content: "\e90b";
}.icon-user:before {
content: "\f007";
}.icon-clock-o:before {
content: "\f017";
}.icon-arrow-circle-o-up:before {
content: "\f01b";
}.icon-fire:before {
content: "\f06d";
}@font-face {
font-family: Roboto;
font-style: normal;
font-weight: 100;
src: url(https://cdn.dayzlocations.com/fonts/roboto/roboto-v16-latin-100.eot);
src: local("Roboto Thin"), local("Roboto-Thin"),
url(https://cdn.dayzlocations.com/fonts/roboto/roboto-v16-latin-100.eot?#iefix)
format("embedded-opentype"),
url(https://cdn.dayzlocations.com/fonts/roboto/roboto-v16-latin-100.woff2)
format("woff2"),
url(https://cdn.dayzlocations.com/fonts/roboto/roboto-v16-latin-100.woff)
format("woff"),
url(https://cdn.dayzlocations.com/fonts/roboto/roboto-v16-latin-100.ttf)
format("truetype"),
url(https://cdn.dayzlocations.com/fonts/roboto/roboto-v16-latin-100.svg#Roboto)
format("svg");
}@font-face {
font-family: Roboto;
font-style: italic;
font-weight: 100;
src: url(https://cdn.dayzlocations.com/fonts/roboto/roboto-v16-latin-100italic.eot);
src: local("Roboto Thin Italic"), local("Roboto-ThinItalic"),
url(https://cdn.dayzlocations.com/fonts/roboto/roboto-v16-latin-100italic.eot?#iefix)
format("embedded-opentype"),
url(https://cdn.dayzlocations.com/fonts/roboto/roboto-v16-latin-100italic.woff2)
format("woff2"),
url(https://cdn.dayzlocations.com/fonts/roboto/roboto-v16-latin-100italic.woff)
format("woff"),
url(https://cdn.dayzlocations.com/fonts/roboto/roboto-v16-latin-100italic.ttf)
format("truetype"),
url(https://cdn.dayzlocations.com/fonts/roboto/roboto-v16-latin-100italic.svg#Roboto)
format("svg");
}@font-face {
font-family: Roboto;
font-style: normal;
font-weight: 300;
src: url(https://cdn.dayzlocations.com/fonts/roboto/roboto-v16-latin-300.eot);
src: local("Roboto Light"), local("Roboto-Light"),
url(https://cdn.dayzlocations.com/fonts/roboto/roboto-v16-latin-300.eot?#iefix)
format("embedded-opentype"),
url(https://cdn.dayzlocations.com/fonts/roboto/roboto-v16-latin-300.woff2)
format("woff2"),
url(https://cdn.dayzlocations.com/fonts/roboto/roboto-v16-latin-300.woff)
format("woff"),
url(https://cdn.dayzlocations.com/fonts/roboto/roboto-v16-latin-300.ttf)
format("truetype"),
url(https://cdn.dayzlocations.com/fonts/roboto/roboto-v16-latin-300.svg#Roboto)
format("svg");
}@font-face {
font-family: Roboto;
font-style: italic;
font-weight: 300;
src: url(https://cdn.dayzlocations.com/fonts/roboto/roboto-v16-latin-300italic.eot);
src: local("Roboto Light Italic"), local("Roboto-LightItalic"),
url(https://cdn.dayzlocations.com/fonts/roboto/roboto-v16-latin-300italic.eot?#iefix)
format("embedded-opentype"),
url(https://cdn.dayzlocations.com/fonts/roboto/roboto-v16-latin-300italic.woff2)
format("woff2"),
url(https://cdn.dayzlocations.com/fonts/roboto/roboto-v16-latin-300italic.woff)
format("woff"),
url(https://cdn.dayzlocations.com/fonts/roboto/roboto-v16-latin-300italic.ttf)
format("truetype"),
url(https://cdn.dayzlocations.com/fonts/roboto/roboto-v16-latin-300italic.svg#Roboto)
format("svg");
}@font-face {
font-family: Roboto;
font-style: normal;
font-weight: 400;
src: url(https://cdn.dayzlocations.com/fonts/roboto/roboto-v16-latin-regular.eot);
src: local("Roboto"), local("Roboto-Regular"),
url(https://cdn.dayzlocations.com/fonts/roboto/roboto-v16-latin-regular.eot?#iefix)
format("embedded-opentype"),
url(https://cdn.dayzlocations.com/fonts/roboto/roboto-v16-latin-regular.woff2)
format("woff2"),
url(https://cdn.dayzlocations.com/fonts/roboto/roboto-v16-latin-regular.woff)
format("woff"),
url(https://cdn.dayzlocations.com/fonts/roboto/roboto-v16-latin-regular.ttf)
format("truetype"),
url(https://cdn.dayzlocations.com/fonts/roboto/roboto-v16-latin-regular.svg#Roboto)
format("svg");
}@font-face {
font-family: Roboto;
font-style: italic;
font-weight: 400;
src: url(https://cdn.dayzlocations.com/fonts/roboto/roboto-v16-latin-italic.eot);
src: local("Roboto Italic"), local("Roboto-Italic"),
url(https://cdn.dayzlocations.com/fonts/roboto/roboto-v16-latin-italic.eot?#iefix)
format("embedded-opentype"),
url(https://cdn.dayzlocations.com/fonts/roboto/roboto-v16-latin-italic.woff2)
format("woff2"),
url(https://cdn.dayzlocations.com/fonts/roboto/roboto-v16-latin-italic.woff)
format("woff"),
url(https://cdn.dayzlocations.com/fonts/roboto/roboto-v16-latin-italic.ttf)
format("truetype"),
url(https://cdn.dayzlocations.com/fonts/roboto/roboto-v16-latin-italic.svg#Roboto)
format("svg");
}@font-face {
font-family: Roboto;
font-style: normal;
font-weight: 500;
src: url(https://cdn.dayzlocations.com/fonts/roboto/roboto-v16-latin-500.eot);
src: local("Roboto Medium"), local("Roboto-Medium"),
url(https://cdn.dayzlocations.com/fonts/roboto/roboto-v16-latin-500.eot?#iefix)
format("embedded-opentype"),
url(https://cdn.dayzlocations.com/fonts/roboto/roboto-v16-latin-500.woff2)
format("woff2"),
url(https://cdn.dayzlocations.com/fonts/roboto/roboto-v16-latin-500.woff)
format("woff"),
url(https://cdn.dayzlocations.com/fonts/roboto/roboto-v16-latin-500.ttf)
format("truetype"),
url(https://cdn.dayzlocations.com/fonts/roboto/roboto-v16-latin-500.svg#Roboto)
format("svg");
}@font-face {
font-family: Roboto;
font-style: italic;
font-weight: 500;
src: url(https://cdn.dayzlocations.com/fonts/roboto/roboto-v16-latin-500italic.eot);
src: local("Roboto Medium Italic"), local("Roboto-MediumItalic"),
url(https://cdn.dayzlocations.com/fonts/roboto/roboto-v16-latin-500italic.eot?#iefix)
format("embedded-opentype"),
url(https://cdn.dayzlocations.com/fonts/roboto/roboto-v16-latin-500italic.woff2)
format("woff2"),
url(https://cdn.dayzlocations.com/fonts/roboto/roboto-v16-latin-500italic.woff)
format("woff"),
url(https://cdn.dayzlocations.com/fonts/roboto/roboto-v16-latin-500italic.ttf)
format("truetype"),
url(https://cdn.dayzlocations.com/fonts/roboto/roboto-v16-latin-500italic.svg#Roboto)
format("svg");
}@font-face {
font-family: Roboto;
font-style: normal;
font-weight: 700;
src: url(https://cdn.dayzlocations.com/fonts/roboto/roboto-v16-latin-700.eot);
src: local("Roboto Bold"), local("Roboto-Bold"),
url(https://cdn.dayzlocations.com/fonts/roboto/roboto-v16-latin-700.eot?#iefix)
format("embedded-opentype"),
url(https://cdn.dayzlocations.com/fonts/roboto/roboto-v16-latin-700.woff2)
format("woff2"),
url(https://cdn.dayzlocations.com/fonts/roboto/roboto-v16-latin-700.woff)
format("woff"),
url(https://cdn.dayzlocations.com/fonts/roboto/roboto-v16-latin-700.ttf)
format("truetype"),
url(https://cdn.dayzlocations.com/fonts/roboto/roboto-v16-latin-700.svg#Roboto)
format("svg");
}@font-face {
font-family: Roboto;
font-style: italic;
font-weight: 700;
src: url(https://cdn.dayzlocations.com/fonts/roboto/roboto-v16-latin-700italic.eot);
src: local("Roboto Bold Italic"), local("Roboto-BoldItalic"),
url(https://cdn.dayzlocations.com/fonts/roboto/roboto-v16-latin-700italic.eot?#iefix)
format("embedded-opentype"),
url(https://cdn.dayzlocations.com/fonts/roboto/roboto-v16-latin-700italic.woff2)
format("woff2"),
url(https://cdn.dayzlocations.com/fonts/roboto/roboto-v16-latin-700italic.woff)
format("woff"),
url(https://cdn.dayzlocations.com/fonts/roboto/roboto-v16-latin-700italic.ttf)
format("truetype"),
url(https://cdn.dayzlocations.com/fonts/roboto/roboto-v16-latin-700italic.svg#Roboto)
format("svg");
}@font-face {
font-family: Roboto;
font-style: normal;
font-weight: 900;
src: url(https://cdn.dayzlocations.com/fonts/roboto/roboto-v16-latin-900.eot);
src: local("Roboto Black"), local("Roboto-Black"),
url(https://cdn.dayzlocations.com/fonts/roboto/roboto-v16-latin-900.eot?#iefix)
format("embedded-opentype"),
url(https://cdn.dayzlocations.com/fonts/roboto/roboto-v16-latin-900.woff2)
format("woff2"),
url(https://cdn.dayzlocations.com/fonts/roboto/roboto-v16-latin-900.woff)
format("woff"),
url(https://cdn.dayzlocations.com/fonts/roboto/roboto-v16-latin-900.ttf)
format("truetype"),
url(https://cdn.dayzlocations.com/fonts/roboto/roboto-v16-latin-900.svg#Roboto)
format("svg");
}@font-face {
font-family: Roboto;
font-style: italic;
font-weight: 900;
src: url(https://cdn.dayzlocations.com/fonts/roboto/roboto-v16-latin-900italic.eot);
src: local("Roboto #000 Italic"), local("Roboto-BlackItalic"),
url(https://cdn.dayzlocations.com/fonts/roboto/roboto-v16-latin-900italic.eot?#iefix)
format("embedded-opentype"),
url(https://cdn.dayzlocations.com/fonts/roboto/roboto-v16-latin-900italic.woff2)
format("woff2"),
url(https://cdn.dayzlocations.com/fonts/roboto/roboto-v16-latin-900italic.woff)
format("woff"),
url(https://cdn.dayzlocations.com/fonts/roboto/roboto-v16-latin-900italic.ttf)
format("truetype"),
url(https://cdn.dayzlocations.com/fonts/roboto/roboto-v16-latin-900italic.svg#Roboto)
format("svg");
}/*! lightslider - v1.1.3 - 2015-04-14
* https://github.com/sachinchoolur/lightslider
* Copyright (c) 2015 Sachin N; Licensed MIT */
.navbar {
margin-bottom: 0;
}.navbar li a {
color: #86939e;
}.navbar li a:focus,
.navbar li a:hover {
opacity: 0.8;
text-decoration: none;
outline: medium none;
color: #03a9f4;
}.navbar .icon {
padding-right: 5px;
}.navbar-expand {
padding: 0 1rem;
}body {
color: #86939e;
font-family: Roboto, sans-serif, serif;
font-size: 14px;
height: 100%;
line-height: 1.5;
font-weight: 300;
letter-spacing: 0.2px;
padding-right: 0 ;
}a {
color: #03a9f4;
}a:active,
a:focus,
a:hover {
outline: 0;
text-decoration: none;
color: #03a9f4;
}h5 {
font-weight: 400;
color: #86939e;
line-height: 1.5;
margin: 0;
}p {
font-size: 14px;
font-weight: 300;
letter-spacing: 0.2px;
}img {
max-width: 100%;
}ul li {
list-style: none;
font-weight: 300;
}ul li i.icon {
padding-right: 15px;
}ul {
padding: 0;
}ul li:before {
position: absolute;
left: 0;
top: 0;
}.card-header {
position: relative;
}.shadow {
box-shadow: 0 0 6px rgba(0, 0, 0, 0.1) ;
}.light {
background-color: #f5f8fa;
}.indigo {
background-color: #3f51b5 ;
}.indigo.darken-1 {
background-color: #3949ab ;
}@supports (-ms-accelerator: true) {
}.trumbowyg-editor[>
Using FTP and PHP to get an array of file details such as size and…
Creating and using Laravel form requests to create cleaner code, separation and reusability for your…
Improving the default Laravel login and register views in such a simple manner but making…
A drained and empty Kennington reservoir images from a drone in early July 2024. The…
Merrimu Reservoir from drone. Click images to view larger.
Using FTP and PHP to get an array of file details such as size and…
Creating and using Laravel form requests to create cleaner code, separation and reusability for your…
Improving the default Laravel login and register views in such a simple manner but making…
Laravel validation for checking if a field value exists in the database. The validation rule…