This question already has answers here:
Bootstrap 5 navbar align items right
(13 answers)
How to align nav items to the right in Bootstrap 5?
(7 answers)
Closed 1 year ago.
We are trying to have our navigation items aligned to the right of our page. We have used a container class as well as align-items-end to no avail. We will admit that this section is pretty hacked together and we don't quite understand everything that's going on. What we're trying to accomplish is to have the top of our page have a cover cover image with our navigation to the right, included in the container, we want a heading and two buttons. We also need our navigation collapse at the small (mobile) breakpoint.
This is our design from Photoshop and what we want our end design to look like.
This is what our current code renders.
What are we doing wrong?
.cover {
min-height: 500px;
background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(img/moco-trucks.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: #fff;
position: relative;
}
.navbar-dark .navbar-nav .nav-link {
color: #fff;
}
.navbar-dark:hover,
.navbar-dark:focus,
.navbar-dark:active {
color: rgba(199, 84, 40, 1)
}
.nav-item,
.nav-link {
color: #fff;
text-transform: uppercase;
}
.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
color: #fff;
background-color: #c75428;
}
.nav-pills .nav-link.active:hover,
.nav-pills .show>.nav-link {
color: #fff;
background-color: #a64723;
}
.nav-link:hover,
.nav-link:focus,
.nav-link:active {
color: #c75428;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<!-- container with bg img -->
<div class="cover">
<div class="container justify-content-end">
<!-- NAV Here -->
<nav class="navbar navbar-expand-sm navbar-dark" aria-label="responsive navbar">
<a class="navbar-brand" href="index.html"><img src="img/the-other-side-moving-storage-color-white.png" width="75%" height="75%"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#responsive-navbar" aria-controls="responsive-navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="responsive-navbar">
<ul class="navbar-nav me-auto mb-2 mb-sm-0">
<li class="nav-item">
<a class="nav-link" href="denver-moving-services.html">Moving</a>
</li>
<li class="nav-item">
<a class="nav-link" href="denver-storage-company.html">Storage</a>
</li>
<li class="nav-item">
<a class="nav-link" href="receiving-and-delivery.html">Furniture Delivery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about-us.html">About</a>
</li>
<li class="nav-item">
<button class="btn btn-tosa" type="submit">Free Estimate</button>
</li>
</ul>
</div>
</nav>
</div>
<!-- Nav end -->
<!-- FS Hero -->
<div class="container-xl mb-4">
<div class="row text-center">
<div class="col-12">
<h1 class="py-5">Denver Moving and Storage</h1>
<button type="button" class="btn btn-tosa mx-3">Free Estimate</button>
<button type="button" class="btn btn-outline-tosa mx-3">Our Story</button>
</div>
</div>
</div>
<!-- End FS Hero -->
</div>
<!-- End Cover -->
I've applied justify-content-end to the link wrapper.
See all flex utilities.
.cover {
min-height: 500px;
background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(img/moco-trucks.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: #fff;
position: relative;
}
.navbar-dark .navbar-nav .nav-link {
color: #fff;
}
.navbar-dark:hover,
.navbar-dark:focus,
.navbar-dark:active {
color: rgba(199, 84, 40, 1)
}
.nav-item,
.nav-link {
color: #fff;
text-transform: uppercase;
}
.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
color: #fff;
background-color: #c75428;
}
.nav-pills .nav-link.active:hover,
.nav-pills .show>.nav-link {
color: #fff;
background-color: #a64723;
}
.nav-link:hover,
.nav-link:focus,
.nav-link:active {
color: #c75428;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<!-- container with bg img -->
<div class="cover">
<div class="container">
<!-- NAV Here -->
<nav class="navbar navbar-expand-sm navbar-dark d-flex" aria-label="responsive navbar">
<a class="navbar-brand" href="index.html"><img src="https://via.placeholder.com/60" width="75%" height="75%"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#responsive-navbar" aria-controls="responsive-navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="responsive-navbar">
<ul class="navbar-nav me-auto mb-2 mb-sm-0">
<li class="nav-item">
<a class="nav-link" href="denver-moving-services.html">Moving</a>
</li>
<li class="nav-item">
<a class="nav-link" href="denver-storage-company.html">Storage</a>
</li>
<li class="nav-item">
<a class="nav-link" href="receiving-and-delivery.html">Furniture Delivery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about-us.html">About</a>
</li>
<li class="nav-item">
<button class="btn btn-tosa" type="submit">Free Estimate</button>
</li>
</ul>
</div>
</nav>
<!-- Nav end -->
</div>
<!-- FS Hero -->
<div class="container-xl mb-4">
<div class="row text-center">
<div class="col-12">
<h1 class="py-5">Denver Moving and Storage</h1>
<button type="button" class="btn btn-tosa mx-3">Free Estimate</button>
<button type="button" class="btn btn-outline-tosa mx-3">Our Story</button>
</div>
</div>
</div>
<!-- End FS Hero -->
</div>
<!-- End Cover -->
I added this code to your CSS:
#responsive-navbar .navbar-nav{
position: absolute !important;
right: 0;
}
to make the navbar position to the right.
.cover {
min-height: 500px;
background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),url(img/moco-trucks.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: #fff;
position: relative;
}
.navbar-dark .navbar-nav .nav-link {
color: #fff;
}
.navbar-dark:hover, .navbar-dark:focus, .navbar-dark:active{
color: rgba(199, 84, 40, 1)
}
.nav-item, .nav-link {
color: #fff;
text-transform: uppercase;
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
color: #fff;
background-color: #c75428;
}
.nav-pills .nav-link.active:hover, .nav-pills .show>.nav-link {
color: #fff;
background-color: #a64723;
}
.nav-link:hover, .nav-link:focus, .nav-link:active {
color: #c75428;
}
#responsive-navbar .navbar-nav{
position: absolute !important;
right: 0;
}
<!-- container with bg img -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="cover">
<div class="container justify-content-end">
<!-- NAV Here -->
<nav class="navbar navbar-expand-sm navbar-dark" aria-label="responsive navbar">
<a class="navbar-brand" href="index.html"><img src="img/the-other-side-moving-storage-color-white.png" width="75%" height="75%"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#responsive-navbar" aria-controls="responsive-navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="responsive-navbar">
<ul class="navbar-nav me-auto mb-2 mb-sm-0">
<li class="nav-item">
<a class="nav-link" href="denver-moving-services.html">Moving</a>
</li>
<li class="nav-item">
<a class="nav-link" href="denver-storage-company.html">Storage</a>
</li>
<li class="nav-item">
<a class="nav-link" href="receiving-and-delivery.html">Furniture Delivery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about-us.html">About</a>
</li>
<li class="nav-item">
<button class="btn btn-tosa" type="submit">Free Estimate</button>
</li>
</ul>
</div>
</nav>
</div>
<!-- Nav end -->
<!-- FS Hero -->
<div class="container-xl mb-4">
<div class="row text-center">
<div class="col-12">
<h1 class="py-5">Denver Moving and Storage</h1>
<button type="button" class="btn btn-tosa mx-3">Free Estimate</button>
<button type="button" class="btn btn-outline-tosa mx-3">Our Story</button>
</div>
</div>
</div>
<!-- End FS Hero -->
</div>
<!-- End Cover -->
I have used html,css and bootstrap to design this section but the problem is whichever video I upload has some extra width and height resulting in vertical and horizontal scroll bar. It effects my nav-bar. Any help please? I am mentioning the code and CSS.
* {
margin: 0;
padding: 0;
font-family: 'Exo 2', sans-serif;
}
h1,
h2 {
font-family: 'Lemonada', cursive;
}
h1,
h2 {
color: yellow;
}
.home-data-container {
z-index: 1;
position: relative;
bottom: 850px;
left: 40px;
}
.heading-btn {
margin-top: 15px;
}
.heading-btn:hover {
color: black;
background: whitesmoke;
}
#media screen and (max-width: 992px) {
.home-data-container {
text-align: center;
}
}
<!-- Header -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Special</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Dishes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
<a class="navbar-brand" href="#"> DANY</a>
</div>
</nav>
<!-- Hedaer End -->
<!-- Home section -->
<section class="home" id="home">
<div class="video-container">
<video autoplay loop muted>
<source
src="videos/Seasoning Pizza at Italian Restaurant.mp4"
type="video/mp4"
/>
</video>
</div>
<div class="home-data-container">
<h1 class="home-heading">Food that you cant resist</h1>
<h2 class="home-heading">Enjoy the marvelous taste</h2>
<button type="button" class="btn btn-dark btn-lg heading-btn">
Get Started
</button>
</div>
</section>
screen shot
What exactly am I doing wrong here? I checked adding width and height attributes to the video tag but it didn't work
Can you try to add css to video tag and set width:100% ?
I'm trying to create a quite complex navbar using bootstrap. I wonder wether it is possible to make the dropdown menu floating, so it does not make the navbar big and ugly. The picture is quite self-explanatory:
Code:
.menu-item-seleccionado {
color: white !important;
background-color: grey;
padding: 10px !important;
}
.menu-item-sin-seleccionar {
color: white !important;
padding: 10px !important;
}
.titulo-menu {
margin-left: 1%;
color: white !important;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>
<nav class="navbar navbar-expand-lg sticky-top navbar-light bg-dark">
<div class="container-fluid" style="margin: 0; width: 100%;">
<div class="flex-izquierda">
<a class="navbar-brand titulo-menu" href="inicio.html">Resano Innovación</a>
</div>
<button class="navbar-toggler bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#bar"
aria-controls="bar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="flex-derecha collapse navbar-collapse" id="bar">
<ul class="navbar-nav me-auto mb-2 mb-lg-0" style="margin: 0 !important; ">
<li class="nav-item"><a class="nav-link active rounded menu-item-seleccionado" aria-current="page" href="inicio.html">Inicio</a></li>
<li class="nav-item"><a class="nav-link menu-item-sin-seleccionar" href="ubicacion.html">Ubicación</a></li>
<li class="nav-item"><a class="nav-link menu-item-sin-seleccionar" href="contacto.html">Contacto</a></li>
<li class="nav-item"><a class="nav-link menu-item-sin-seleccionar" href="certificado.html">Certificado de calidad</a></li>
<!-- Imagen para cambiar el idioma -->
<li class="nav-item"><a class="navbar-brand" href="../en/inicio.html">
<img src="../img/eng.png" style="max-width: 100%; max-height: 40px; padding-left: 10px;" alt="">
</a>
</li>
</ul>
</div>
</div>
</nav>
.menu-item-seleccionado {
color: white !important;
background-color: grey;
padding: 10px !important;
}
.menu-item-sin-seleccionar {
color: white !important;
padding: 10px !important;
}
.titulo-menu {
margin-left: 1%;
color: white !important;
}
#media screen and (max-width: 736px) {
.navbar-expand-lg .navbar-collapse {
flex-basis: auto;
}
.flex-derecha {
width: 250px;
position: absolute;
height: auto;
background: black;
top: 50px;
right: 0;
}
.collapse:not(.show) {
display: none !important;
}
.nav-item
{
width:250px;
}
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>
<nav class="navbar navbar-expand-lg sticky-top navbar-light bg-dark">
<div class="container-fluid" style="margin: 0; width: 100%;">
<div class="flex-izquierda">
<a class="navbar-brand titulo-menu" href="inicio.html">Resano Innovación</a>
</div>
<button class="navbar-toggler bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#bar"
aria-controls="bar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="flex-derecha collapse navbar-collapse" id="bar">
<ul class="navbar-nav me-auto mb-2 mb-lg-0" style="margin: 0 !important; ">
<li class="nav-item"><a class="nav-link active rounded menu-item-seleccionado" aria-current="page" href="inicio.html">Inicio</a></li>
<li class="nav-item"><a class="nav-link menu-item-sin-seleccionar" href="ubicacion.html">Ubicación</a></li>
<li class="nav-item"><a class="nav-link menu-item-sin-seleccionar" href="contacto.html">Contacto</a></li>
<li class="nav-item"><a class="nav-link menu-item-sin-seleccionar" href="certificado.html">Certificado de calidad</a></li>
<!-- Imagen para cambiar el idioma -->
<li class="nav-item"><a class="navbar-brand" href="../en/inicio.html">
<img src="../img/eng.png" style="max-width: 100%; max-height: 40px; padding-left: 10px;" alt="">
</a>
</li>
</ul>
</div>
</div>
</nav>
Coded a webpage as practice using some JS, everything works how I'd like except I can't figure out how to make the toggle functional. I tried a few things but it didn't work out. The page collapses, the toggle appears, but when you click on it the nav does not pop up.
Tips and suggestions would be great, thanks for your time and patience!
Link to all code on codepen here
snippet of html below
<nav class="navbar navbar-expand-lg px-4" style="font-size:25px;">
<a class="navbar-brand"></a>
<button class="navbar-toggler" data-toggle="collapse" href="myNav" role="button" type="button" >
<span class="toggler-icon"><i class="fas fa-bars"></i></span>
</button>
<div class="collapse navbar-collapse" id="myNav">
<ul class="navbar-nav mx-auto text-capitalize">
<li class="nav-item active">
<a class="nav-link" style="font-size:35px;" href="#">home</a>
</li>
<li class="nav-item">
<a class="nav-link " style="font-size:35px;" href="#about">about</a>
</li>
<li class="nav-item">
<a class="nav-link" style="font-size:35px;" href="#store">store</a>
</li>
</ul>
<div class="nav-info-items d-none d-lg-flex ">
<div class="nav-info align-items-center d-flex justify-content-between mx-lg-5">
<span class="info-icon mx-lg-3"><i class="fas fa-phone"></i></span>
<p class="mb-0">+ 123 456 789</p>
</div>
<div id="cart-info" class="nav-info align-items-center cart-info d-flex justify-content-between mx-lg-5">
<span class="cart-info__icon mr-lg-3"><i class="fas fa-shopping-cart"></i></span>
<p class="mb-0 text-capitalize"><span id="item-count">2 </span> items - $<span class="item-total">10.49</span></p>
</div>
</div>
</div>
</nav>
snippet of css below
.navbar-toggler {
outline: none !important;
}
.toggler-icon {
font-size: 2.5rem;
color: var(--mainBlue);
}
.nav-link {
color: var(--mainBlue);
font-size: 1.5rem;
transition: all 0.5s ease-in-out;
}
.nav-link:hover {
color: var(--mainYellow);
}
.cart-info__icon {
color: var(--mainBlue);
cursor: pointer;
}
I think you want Element.classList.
var toggle = document.querySelector('.toggle');
var nav = document.querySelector('.nav');
toggle.onclick = function() {
nav.classList.toggle('collapsed');
}
.nav {
background: lightblue;
transition: .2s;
}
.nav.collapsed {
opacity: 0;
}
<button class="toggle">Toggle</button>
<div class="nav">
<ul>
<li>
home
</li>
<li>
about
</li>
<li>
store
</li>
</ul>
</div>
I have page where there is four components.
Top Navigation
Sidebar
Footer
Main content
I want Top Navigation fixed at top and footer to be fixed at bottom. But sidebar needs to be sticked to left with the full height.
To achieve all these stuff I have created this plunker. When we run it in full screen it makes the sidebar collapse to actual height.
Here is a code
/* Styles go here */
body, html {
height:100%;
}
/*
* Off Canvas sidebar at medium breakpoint
* --------------------------------------------------
*/
#media screen and (max-width: 992px) {
.row-offcanvas {
position: relative;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
.row-offcanvas-left
.sidebar-offcanvas {
left: -33%;
}
.row-offcanvas-left.active {
left: 33%;
margin-left: -6px;
}
.sidebar-offcanvas {
position: absolute;
top: 0;
width: 33%;
height: 100%;
}
}
/*
* Off Canvas wider at sm breakpoint
* --------------------------------------------------
*/
#media screen and (max-width: 34em) {
.row-offcanvas-left
.sidebar-offcanvas {
left: -45%;
}
.row-offcanvas-left.active {
left: 45%;
margin-left: -6px;
}
.sidebar-offcanvas {
width: 45%;
}
}
.card {
overflow:hidden;
}
.card-body .rotate {
z-index: 8;
float: right;
height: 100%;
}
.card-body .rotate i {
color: rgba(20, 20, 20, 0.15);
position: absolute;
left: 0;
left: auto;
right: -10px;
bottom: 0;
display: block;
-webkit-transform: rotate(-44deg);
-moz-transform: rotate(-44deg);
-o-transform: rotate(-44deg);
-ms-transform: rotate(-44deg);
transform: rotate(-44deg);
}
HTML
<nav class="navbar fixed-top navbar-expand-md navbar-dark bg-primary mb-3">
<div class="flex-row d-flex">
<button type="button" class="navbar-toggler mr-2 " data-toggle="offcanvas" title="Toggle responsive left sidebar">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#" title="Free Bootstrap 4 Admin Template">Admin Template</a>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="collapsingNavbar">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">Home</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="//www.codeply.com">Link</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#myAlert" data-toggle="collapse">Alert</a>
</li>
<li class="nav-item">
<a class="nav-link" href="" data-target="#myModal" data-toggle="modal">About</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid" id="main">
<div class="row row-offcanvas row-offcanvas-left">
<div class="col-md-3 col-lg-2 sidebar-offcanvas bg-light pl-0" id="sidebar" role="navigation">
<ul class="nav flex-column sticky-top pl-0 pt-5 mt-3">
<li class="nav-item"><a class="nav-link" href="#">Overview</a></li>
<li class="nav-item">
<a class="nav-link" href="#submenu1" data-toggle="collapse" data-target="#submenu1">Reports▾</a>
<ul class="list-unstyled flex-column pl-3 collapse" id="submenu1" aria-expanded="false">
<li class="nav-item"><a class="nav-link" href="">Report 1</a></li>
<li class="nav-item"><a class="nav-link" href="">Report 2</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="#">Analytics</a></li>
<li class="nav-item"><a class="nav-link" href="#">Export</a></li>
<li class="nav-item"><a class="nav-link" href="#">Snippets</a></li>
<li class="nav-item"><a class="nav-link" href="#">Flexbox</a></li>
<li class="nav-item"><a class="nav-link" href="#">Layouts</a></li>
<li class="nav-item"><a class="nav-link" href="#">Templates</a></li>
<li class="nav-item"><a class="nav-link" href="#">Themes</a></li>
</ul>
</div>
<!--/col-->
<div class="col main pt-5 mt-3">
<h1 class="display-4 d-none d-sm-block">
Bootstrap 4 Dashboard
</h1>
</div>
</div>
</div>
<!--/.container-->
<footer class="container-fluid">
<p class="text-right small">©2016-2018 Company</p>
</footer>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Modal</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
</div>
<div class="modal-body">
<p>This is a dashboard layout for Bootstrap 4. This is an example of the Modal component which you can use to show content. Any content can be placed inside the modal and it can use the Bootstrap grid classes.</p>
<p>
Grab the code at Codeply
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary-outline" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
With the help of Bootstrap 4 you can do the following changes on your code:
Add h-100 class to your #main container and to the .row-offcanvas right next to it.
Add fixed-bottom class to your <footer>.
Your code will look like these:
<div class="container-fluid h-100" id="main">
<div class="row row-offcanvas row-offcanvas-left h-100">
<!-- your subsequent codes -->
</div>
</div>
<!--/.container-->
<footer class="container-fluid fixed-bottom">
<!-- your footer's paragraph code -->
</footer>
You can check it on Plunker.
I think you should review the structure of your code. I hope that it helps.
Add h-100 class on both the below divs
<div class="container-fluid h-100" id="main">
<div class="row row-offcanvas row-offcanvas-left h-100">
See the updated plunker
For the footer this might help :
footer{
position: absolute;
bottom:0;
transform: translateX(-40%);
}
https://plnkr.co/edit/gKmLbFcF1IxVS7QyYyaL?p=preview - if you want this solution:
.container-fluid, .row {
height: 100%;
}