Bootstrap 5 footer is overlapping the renderbody in MVC app - css

I know this seems to be a common issue - but I just cant get it to work!
I recently (stupidly) renamed my bootstrap.css file, as I had introduced a new one (from bootswatch). My render body content now overlaps the footer (even though I have re-renamed the bootstrap.css file. Everything else seems to work OK. I am using Bootstrap v5.1.0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - Suplizer</title>
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
<link rel="stylesheet" href="~/Suplizer.styles.css" asp-append-version="true" />
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
#* <link rel="stylesheet" href="~/lib/bootstrap/dist/css/pulse.css" />*#
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container-fluid">
<a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">Suplizer</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Suppliers" asp-action="Index">Suppliers</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Documents" asp-action="Index">Documents</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Questions" asp-action="Index">Questions</a>
</li>
#*<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="SupplierQuestions" asp-action="Index">Supplier Questions</a>
</li>*#
</ul>
<partial name="_LoginPartial" />
</div>
</div>
</nav>
</header>
<div class="container">
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2022 - Suplizer - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
#await RenderSectionAsync("Scripts", required: false)
</body>
</html>
Here is my layout file
Thanks in advance for any help
Reading other solutions - I have tried...
Removing the reference to the site.css file in the layout file
Using the new bootstrap swatch
Putting around the footer


#footer{background: #404040;padding: 0 0 30px 0;color: #fff;font-size: 14px}#footer .footer-newsletter{padding: 50px 0;background: #404040}#footer .footer-newsletter h4{font-size: 24px;margin: 0 0 20px 0;padding: 0;line-height: 1;font-weight: 600}#footer .footer-newsletter form{margin-top: 30px;background: #fff;padding: 6px 10px;position: relative;border-radius: 50px}#footer .footer-newsletter form input[type="email"]{border: 0;padding: 8px;width: calc(100% - 140px)}#footer .footer-newsletter form input[type="submit"]{position: absolute;top: 0;right: 0;bottom: 0;border: 0;background: none;font-size: 16px;padding: 0 30px;margin: 3px;background: #e96b56;color: #fff;transition: 0.3s;border-radius: 50px}#footer .footer-newsletter form input[type="submit"]:hover{background: #e6573f}#footer .footer-top{background: #3b3b3b;border-top: 1px solid #474747;border-bottom: 1px solid #474747;padding: 60px 0 30px 0}#footer .footer-top .footer-info{margin-bottom: 30px}#footer .footer-top .footer-info h3{font-size: 18px;margin: 0 0 20px 0;padding: 2px 0 2px 0;line-height: 1;font-weight: 700}#footer .footer-top .footer-info p{font-size: 14px;line-height: 24px;margin-bottom: 0;font-family: "Raleway", sans-serif;color: #fff}#footer .footer-top .social-links a{font-size: 18px;display: inline-block;background: #545454;color: #fff;line-height: 1;padding: 8px 0;margin-right: 4px;border-radius: 50%;text-align: center;width: 36px;height: 36px;transition: 0.3s}#footer .footer-top .social-links a:hover{background: #e96b56;color: #fff;text-decoration: none}#footer .footer-top h4{font-size: 16px;font-weight: bold;color: #fff;text-transform: uppercase;position: relative;padding-bottom: 12px}#footer .footer-top .footer-links{margin-bottom: 30px}#footer .footer-top .footer-links ul{list-style: none;padding: 0;margin: 0}#footer .footer-top .footer-links ul i{padding-right: 2px;color: #ec7f6d;font-size: 18px;line-height: 1}#footer .footer-top .footer-links ul li{padding: 10px 0;display: flex;align-items: center}#footer .footer-top .footer-links ul li:first-child{padding-top: 0}#footer .footer-top .footer-links ul a{color: #fff;transition: 0.3s;display: inline-block;line-height: 1}#footer .footer-top .footer-links ul a:hover{color: #e96b56}#footer .footer-top .footer-contact{margin-bottom: 30px}#footer .footer-top .footer-contact p{line-height: 26px}#footer .copyright{text-align: center;padding-top: 30px}#footer .credits{padding-top: 10px;text-align: center;font-size: 13px;color: #fff}
<link href="https://cdn.jsdelivr.net/npm/boxicons#latest/css/boxicons.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<footer id="footer"> <div class="footer-newsletter"> <div class="container"> <div class="row"> <div class="col-lg-6"> <h4>Our Newsletter</h4> <p>Tamen quem nulla quae legam multos aute sint culpa legam noster magna</p> </div> <div class="col-lg-6"> <form action="" method="post"> <input type="email" name="email"><input type="submit" value="Subscribe"> </form> </div> </div> </div> </div> <div class="footer-top"> <div class="container"> <div class="row"> <div class="col-lg-3 col-md-6 footer-links"> <h4>Useful Links</h4> <ul> <li><i class="bx bx-chevron-right"></i> Home</li> <li><i class="bx bx-chevron-right"></i> About us</li> <li><i class="bx bx-chevron-right"></i> Services</li> <li><i class="bx bx-chevron-right"></i> Terms of service</li> <li><i class="bx bx-chevron-right"></i> Privacy policy</li> </ul> </div> <div class="col-lg-3 col-md-6 footer-links"> <h4>Our Services</h4> <ul> <li><i class="bx bx-chevron-right"></i> Web Design</li> <li><i class="bx bx-chevron-right"></i> Web Development</li> <li><i class="bx bx-chevron-right"></i> Product Management</li> <li><i class="bx bx-chevron-right"></i> Marketing</li> <li><i class="bx bx-chevron-right"></i> Graphic Design</li> </ul> </div> <div class="col-lg-3 col-md-6 footer-contact"> <h4>Contact Us</h4> <p> A108 Adam Street <br> New York, NY 535022<br> United States <br><br> <strong>Phone:</strong> +1 5589 55488 55<br> <strong>Email:</strong> info#example.com<br> </p> </div> <div class="col-lg-3 col-md-6 footer-info"> <h3>About DevVE</h3> <p>Cras fermentum odio eu feugiat lide par naso tierra. Justo eget nada terra videa magna derita valies darta donna mare fermentum iaculis eu non diam phasellus.</p> <div class="social-links mt-3"> <i class="bx bxl-twitter"></i> <i class="bx bxl-facebook"></i> <i class="bx bxl-instagram"></i> <i class="bx bxl-linkedin"></i> </div> </div> </div> </div> </div> <div class="container"> <div class="copyright"> © Copyright <strong><span>DevVE</span></strong>. All Rights Reserved </div> <div class="credits"> Designed by SalvadorDevVE </div> </div>
</footer>
Try this out - Bootstrap 5 Footer

Related

How to add an element in a menu vertical

In fact, I use Bootstrap 5 for the create of a menu vertical.
My problem is that I would like to add a black background to the top of the left menu.
I don't understand where I should create the block in Bootstrap or CSS, please
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="d-flex flex-column vh-100 flex-shrink-0 p-3 text-white bg-dark" style="width: 250px;">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
<svg class="bi me-2" width="40" height="32"> </svg>
<span class="fs-4">BBBootstrap</span>
</a>
<div>
</div>
<hr>
<ul class="nav nav-pills flex-column mb-auto">
<li class="nav-item">
<i class="fa fa-home"></i><span class="ms-2">Home</span>
</li>
<li>
<i class="fa fa-dashboard"></i><span class="ms-2">Dashboard</span>
</li>
<li>
<i class="fa fa-first-order"></i><span class="ms-2">My Orders</span>
</li>
<li>
<i class="fa fa-cog"></i><span class="ms-2">Settings</span>
</li>
<li>
<i class="fa fa-bookmark"></i><span class="ms-2">Bookmarks</span>
</li>
</ul>
<hr>
</div>
</body>
</html>

You can add parent div to both the menus and add class d-flex to parent
class
please check this :
.navbar {
height: 60px;
width: 100%;
background: #000;
}
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="d-flex">
<div class="d-flex flex-column vh-100 flex-shrink-0 p-3 text-white bg-dark" style="width: 250px;">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
<svg class="bi me-2" width="40" height="32"> </svg>
<span class="fs-4">BBBootstrap</span>
</a>
<div>
</div>
<hr>
<ul class="nav nav-pills flex-column mb-auto">
<li class="nav-item">
<i class="fa fa-home"></i><span class="ms-2">Home</span>
</li>
<li>
<i class="fa fa-dashboard"></i><span class="ms-2">Dashboard</span>
</li>
<li>
<i class="fa fa-first-order"></i><span class="ms-2">My Orders</span>
</li>
<li>
<i class="fa fa-cog"></i><span class="ms-2">Settings</span>
</li>
<li>
<i class="fa fa-bookmark"></i><span class="ms-2">Bookmarks</span>
</li>
</ul>
<hr>
</div>
<nav class="navbar navbar-light">
<a class="navbar-brand" href="#">Navbar</a>
</nav>
</div>
</body>
</html>

After a little scroll, the sticky navbar just is not fixed anymore

I'm working with HTML, CSS and Bootstrap4. I need a navbar that should be fixed when I scroll. I did everything but after a little scroll, the navbar again won't fixed. I wonder if there is any way to solve this problem with bootstrap but if you can't, just tell me what to do with Css. Thanks
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
scroll-behavior: smooth;
font-family: 'Playfair Display', serif !important;
color: white !important;
}
#main-logo {
width: 60px;
}
#two-logos-right {
width: 30px;
height: 30px;
}
#two-logos-left {
width: 40px;
}
#a-links {
text-decoration: none;
color: black;
}
/* On the main nav bar */
#little-logo-main-nav {
width: 30px;
}
/* center the little h&m icon */
#little-icon {
float: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/*Two images that are half the page*/
#img-half {
width: 50%;
}
/* positioning */
#text-on-two-car-half-page {
position: absolute;
top: 90%;
left: 50%;
transform: translate(-50%, -50%);
}
/* magazine */
#cards-magazine {
width: 400px;
}
#a-links-card-magazine {
position: absolute;
top: 98%;
left: 50%;
transform: translate(-50%, -50%);
text-decoration: none;
color: red;
}
<!-- In the name GOD who gave me this power -->
<!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.0">
<meta name="keywords" content="Clothing Shop, H and M, H&M, Modeling, Clothing Brand"/>
<meta name="description" content="H&M clothing shop"/>
<meta name="author" content="Ali Bolouki"/>
<!--Title bar-->
<link rel="shortcut icon" href="images/title bar/Logo.svg"/>
<title>H&M | Fashion Clothing Store and Online Shop</title>
<!--CSS3-->
<link rel="stylesheet" type="text/css" href="style.css"/>
<!--Bootstrap4-->
<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">
<!-- Google fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital#1&display=swap" rel="stylesheet">
</head>
<body id="body">
<div class="container-fluid mb-2">
<div class="row">
<!-- Two icons in left side -->
<a id="a-links" class="mt-3 ml-3 d-sm-block d-none" href="#">
<span>Andriod</span>
<img id="two-logos-left" src="images/header icons/icons8-android-64.png" alt="Android icon for download the app"/>
</a>
<a id="a-links" class="mt-3 ml-3 d-sm-block d-none" href="#">
<span>ios</span>
<img id="two-logos-left" src="images/header icons/icons8-iphone-x-64.png" alt="ios icon for download the app"/>
</a>
<!--Main icon | H&M-->
<img id="main-logo" class="mx-auto mt-3" src="images/main logo/Logo.svg" alt="H and M red logo"/>
<!-- Two icons in right side -->
<a id="a-links" class="mr-3 mt-3 d-sm-block d-none" href="#">
<span>Sign in</span>
<img id="two-logos-right" src="images/header icons/download.svg" alt="Sign in icon"/>
</a>
<a id="a-links" class="mr-3 mt-3 d-sm-block d-none" href="#">
<span>Bag</span>
<img id="two-logos-right" src="images/header icons/download (1).svg" alt="Shoping icon"/>
</a>
</div>
</div>
<header class="sticky-top">
<!-- The main navbar menu -->
<div class="container-fluid">
<div class="row">
<nav class="col-12 navbar navbar-expand-sm navbar-light bg-light sticky-top">
<button class="navbar-toggler mx-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a id="a-links" class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#">Man</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#">Woman</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#">Kids</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#">Baby</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#body">↑</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#">↓</a>
</li>
<li class="nav-item d-none d-md-block" id="little-icon">
<img id="little-logo-main-nav" src="images/main logo/Logo.svg" alt="little H&M's icon"/>
</li>
<!-- Dropdown menu -->
<li class="nav-item dropdown d-md-none d-block">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
More
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Sign in</a>
<a class="dropdown-item" href="#">Youe Bag</a>
<a class="dropdown-item" href="#">ios App</a>
<a class="dropdown-item" href="#">Andriod App</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control col-md-8 mr-2 w-50" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-danger my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</div>
</div>
</header>
<main id="main">
<!--Carousel slider-->
<div class="container-fluid">
<div class="row">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="carousel-item" data-interval="3000">
<img class="img-fluid" src="images/slider/hmgoepprod (1).jpg" alt="Model">
<div class="carousel-caption">
<h3>Beauty with H&M</h3>
<p>Be simple!</p>
</div>
</div>
<div class="carousel-item" data-interval="3000">
<img class="img-fluid" src="images/slider/hmgoepprod (2).jpg" alt="Model">
<div class="carousel-caption">
<h3>Be amazing with H&M</h3>
<p>Be rich</p>
</div>
</div>
<div class="carousel-item" data-interval="3000">
<img class="img-fluid" src="images/slider/hmgoepprod (3).jpg" alt="Model">
<div class="carousel-caption">
<h3>New things</h3>
<p>We love to be new</p>
</div>
</div>
<div class="carousel-item active" data-interval="3000">
<img class="img-fluid" src="images/slider/hmgoepprod (4).jpg" alt="Model">
<div class="carousel-caption">
<h3>Everything is good</h3>
<p>Be happy</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Two images half the page-->
<div class="container-fluid">
<div class="row">
<div id="img-half" class="card border-0">
<img class="card-img-top" src="images/half the page/hmgoepprod.jpg" alt="Card image">
<div class="card-img-overlay">
<p id="text-on-two-car-half-page" class="card-text">One store but</p>
</div>
</div>
<div id="img-half" class="card border-0">
<img class="card-img-top" src="images/half the page/hmgoepprod (1).jpg" alt="Card image">
<div class="card-img-overlay">
<p id="text-on-two-car-half-page" class="card-text">more than one store</p>
</div>
</div>
</div>
</div>
<!--Magazine-->
<div class="container-fluid">
<div class="row">
<h2 class="col-12 text-center mt-3 mb-3">Magazine</h2>
<div class="card mx-auto" id="cards-magazine">
<img class="card-img-top" src="images/magazine section/hmgoepprod (2).jpg" alt="Card image">
<div class="card-body">
<p class="card-title text-center">Inside H&M</p>
<h3 class="card-text text-center">A meadow of wildflowers</h3>
<a id="a-links-card-magazine" href="#" class="btn-link">See Profile ></a>
</div>
</div>
<div class="card mx-auto" id="cards-magazine">
<img class="card-img-top" src="images/magazine section/hmgoepprod (3).jpg" alt="Card image">
<div class="card-body">
<p class="card-title text-center">Inside H&M</p>
<h3 class="card-text text-center">The Colour Story Collection</h3>
<a id="a-links-card-magazine" href="#" class="btn-link">See Profile ></a>
</div>
</div>
<div class="card mx-auto" id="cards-magazine">
<img class="card-img-top" src="images/magazine section/hmgoepprod (4).jpg" alt="Card image">
<div class="card-body">
<p class="card-title text-center">Inside H&M</p>
<h3 class="card-text text-center">“Fashion is a means to social equality when everyone is given access to it”</h3>
<a id="a-links-card-magazine" href="#" class="btn-link">See Profile ></a>
</div>
</div>
</div>
</div>
</main>
<!--Bootstrap4-->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</body>
</html>
Please run my code and scroll down to see what I'm trying to say.

The body and html height shouldn't be 100%. It looks like that is issue causing the sticky nav to only stick for part of the page. I added a border and some extra space to demonstrate how your sticky div alternates between position: relative and position: fixed depending on the scroll position in the body:
body,
html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
scroll-behavior: smooth;
font-family: 'Playfair Display', serif !important;
color: white !important;
border: 2px solid red;
}
#main-logo {
width: 60px;
}
#two-logos-right {
width: 30px;
height: 30px;
}
#two-logos-left {
width: 40px;
}
#a-links {
text-decoration: none;
color: black;
}
/* On the main nav bar */
#little-logo-main-nav {
width: 30px;
}
/* center the little h&m icon */
#little-icon {
float: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/*Two images that are half the page*/
#img-half {
width: 50%;
}
/* positioning */
#text-on-two-car-half-page {
position: absolute;
top: 90%;
left: 50%;
transform: translate(-50%, -50%);
}
/* magazine */
#cards-magazine {
width: 400px;
}
#a-links-card-magazine {
position: absolute;
top: 98%;
left: 50%;
transform: translate(-50%, -50%);
text-decoration: none;
color: red;
}
<!-- In the name GOD who gave me this power -->
<!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.0">
<meta name="keywords" content="Clothing Shop, H and M, H&M, Modeling, Clothing Brand" />
<meta name="description" content="H&M clothing shop" />
<meta name="author" content="Ali Bolouki" />
<!--Title bar-->
<link rel="shortcut icon" href="images/title bar/Logo.svg" />
<title>H&M | Fashion Clothing Store and Online Shop</title>
<!--CSS3-->
<link rel="stylesheet" type="text/css" href="style.css" />
<!--Bootstrap4-->
<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">
<!-- Google fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital#1&display=swap" rel="stylesheet">
</head>
<body id="body">
<div class="container-fluid mb-2">
<div class="row">
<!-- Two icons in left side -->
<a id="a-links" class="mt-3 ml-3 d-sm-block d-none" href="#">
<span>Andriod</span>
<img id="two-logos-left" src="images/header icons/icons8-android-64.png" alt="Android icon for download the app" />
</a>
<a id="a-links" class="mt-3 ml-3 d-sm-block d-none" href="#">
<span>ios</span>
<img id="two-logos-left" src="images/header icons/icons8-iphone-x-64.png" alt="ios icon for download the app" />
</a>
<!--Main icon | H&M-->
<img id="main-logo" class="mx-auto mt-3" src="images/main logo/Logo.svg" alt="H and M red logo" />
<!-- Two icons in right side -->
<a id="a-links" class="mr-3 mt-3 d-sm-block d-none" href="#">
<span>Sign in</span>
<img id="two-logos-right" src="images/header icons/download.svg" alt="Sign in icon" />
</a>
<a id="a-links" class="mr-3 mt-3 d-sm-block d-none" href="#">
<span>Bag</span>
<img id="two-logos-right" src="images/header icons/download (1).svg" alt="Shoping icon" />
</a>
</div>
</div>
<header class="sticky-top">
<!-- The main navbar menu -->
<div class="container-fluid">
<div class="row">
<nav class="col-12 navbar navbar-expand-sm navbar-light bg-light sticky-top">
<button class="navbar-toggler mx-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a id="a-links" class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#">Man</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#">Woman</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#">Kids</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#">Baby</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#body">↑</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#">↓</a>
</li>
<li class="nav-item d-none d-md-block" id="little-icon">
<img id="little-logo-main-nav" src="images/main logo/Logo.svg" alt="little H&M's icon" />
</li>
<!-- Dropdown menu -->
<li class="nav-item dropdown d-md-none d-block">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
More
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Sign in</a>
<a class="dropdown-item" href="#">Youe Bag</a>
<a class="dropdown-item" href="#">ios App</a>
<a class="dropdown-item" href="#">Andriod App</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control col-md-8 mr-2 w-50" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-danger my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</div>
</div>
</header>
<main id="main">
<!--Carousel slider-->
<div class="container-fluid">
<div class="row">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="carousel-item" data-interval="3000">
<img class="img-fluid" src="images/slider/hmgoepprod (1).jpg" alt="Model">
<div class="carousel-caption">
<h3>Beauty with H&M</h3>
<p>Be simple!</p>
</div>
</div>
<div class="carousel-item" data-interval="3000">
<img class="img-fluid" src="images/slider/hmgoepprod (2).jpg" alt="Model">
<div class="carousel-caption">
<h3>Be amazing with H&M</h3>
<p>Be rich</p>
</div>
</div>
<div class="carousel-item" data-interval="3000">
<img class="img-fluid" src="images/slider/hmgoepprod (3).jpg" alt="Model">
<div class="carousel-caption">
<h3>New things</h3>
<p>We love to be new</p>
</div>
</div>
<div class="carousel-item active" data-interval="3000">
<img class="img-fluid" src="images/slider/hmgoepprod (4).jpg" alt="Model">
<div class="carousel-caption">
<h3>Everything is good</h3>
<p>Be happy</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Two images half the page-->
<div class="container-fluid">
<div class="row">
<div id="img-half" class="card border-0">
<img class="card-img-top" src="images/half the page/hmgoepprod.jpg" alt="Card image">
<div class="card-img-overlay">
<p id="text-on-two-car-half-page" class="card-text">One store but</p>
</div>
</div>
<div id="img-half" class="card border-0">
<img class="card-img-top" src="images/half the page/hmgoepprod (1).jpg" alt="Card image">
<div class="card-img-overlay">
<p id="text-on-two-car-half-page" class="card-text">more than one store</p>
</div>
</div>
</div>
</div>
<!--Magazine-->
<div class="container-fluid">
<div class="row">
<h2 class="col-12 text-center mt-3 mb-3">Magazine</h2>
<div class="card mx-auto" id="cards-magazine">
<img class="card-img-top" src="images/magazine section/hmgoepprod (2).jpg" alt="Card image">
<div class="card-body">
<p class="card-title text-center">Inside H&M</p>
<h3 class="card-text text-center">A meadow of wildflowers</h3>
<a id="a-links-card-magazine" href="#" class="btn-link">See Profile ></a>
</div>
</div>
<div class="card mx-auto" id="cards-magazine">
<img class="card-img-top" src="images/magazine section/hmgoepprod (3).jpg" alt="Card image">
<div class="card-body">
<p class="card-title text-center">Inside H&M</p>
<h3 class="card-text text-center">The Colour Story Collection</h3>
<a id="a-links-card-magazine" href="#" class="btn-link">See Profile ></a>
</div>
</div>
<div class="card mx-auto" id="cards-magazine">
<img class="card-img-top" src="images/magazine section/hmgoepprod (4).jpg" alt="Card image">
<div class="card-body">
<p class="card-title text-center">Inside H&M</p>
<h3 class="card-text text-center">“Fashion is a means to social equality when everyone is given access to it”</h3>
<a id="a-links-card-magazine" href="#" class="btn-link">See Profile ></a>
</div>
</div>
</div>
</div>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
</main>
<!--Bootstrap4-->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</body>
</html>
To solve this, simply remove the height value:
body, html {
margin: 0;
padding: 0;
width: 100%;
scroll-behavior: smooth;
font-family: 'Playfair Display', serif !important;
color: white !important;
}
According to w3schools, sticky is defined as:
The element is positioned based on the user's scroll position A sticky
element toggles between relative and fixed, depending on the scroll
position. It is positioned relative until a given offset position is
met in the viewport - then it "sticks" in place (like position:fixed).
Note: Not supported in IE/Edge 15 or earlier. Supported in Safari from
version 6.1 with a -webkit- prefix.
CSS Position Property
Full code snippet with the border and extra space to demonstrate the result:
body,
html {
margin: 0;
padding: 0;
width: 100%;
scroll-behavior: smooth;
font-family: 'Playfair Display', serif !important;
color: white !important;
border: 2px solid red;
}
#main-logo {
width: 60px;
}
#two-logos-right {
width: 30px;
height: 30px;
}
#two-logos-left {
width: 40px;
}
#a-links {
text-decoration: none;
color: black;
}
/* On the main nav bar */
#little-logo-main-nav {
width: 30px;
}
/* center the little h&m icon */
#little-icon {
float: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/*Two images that are half the page*/
#img-half {
width: 50%;
}
/* positioning */
#text-on-two-car-half-page {
position: absolute;
top: 90%;
left: 50%;
transform: translate(-50%, -50%);
}
/* magazine */
#cards-magazine {
width: 400px;
}
#a-links-card-magazine {
position: absolute;
top: 98%;
left: 50%;
transform: translate(-50%, -50%);
text-decoration: none;
color: red;
}
<!-- In the name GOD who gave me this power -->
<!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.0">
<meta name="keywords" content="Clothing Shop, H and M, H&M, Modeling, Clothing Brand" />
<meta name="description" content="H&M clothing shop" />
<meta name="author" content="Ali Bolouki" />
<!--Title bar-->
<link rel="shortcut icon" href="images/title bar/Logo.svg" />
<title>H&M | Fashion Clothing Store and Online Shop</title>
<!--CSS3-->
<link rel="stylesheet" type="text/css" href="style.css" />
<!--Bootstrap4-->
<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">
<!-- Google fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital#1&display=swap" rel="stylesheet">
</head>
<body id="body">
<div class="container-fluid mb-2">
<div class="row">
<!-- Two icons in left side -->
<a id="a-links" class="mt-3 ml-3 d-sm-block d-none" href="#">
<span>Andriod</span>
<img id="two-logos-left" src="images/header icons/icons8-android-64.png" alt="Android icon for download the app" />
</a>
<a id="a-links" class="mt-3 ml-3 d-sm-block d-none" href="#">
<span>ios</span>
<img id="two-logos-left" src="images/header icons/icons8-iphone-x-64.png" alt="ios icon for download the app" />
</a>
<!--Main icon | H&M-->
<img id="main-logo" class="mx-auto mt-3" src="images/main logo/Logo.svg" alt="H and M red logo" />
<!-- Two icons in right side -->
<a id="a-links" class="mr-3 mt-3 d-sm-block d-none" href="#">
<span>Sign in</span>
<img id="two-logos-right" src="images/header icons/download.svg" alt="Sign in icon" />
</a>
<a id="a-links" class="mr-3 mt-3 d-sm-block d-none" href="#">
<span>Bag</span>
<img id="two-logos-right" src="images/header icons/download (1).svg" alt="Shoping icon" />
</a>
</div>
</div>
<header class="sticky-top">
<!-- The main navbar menu -->
<div class="container-fluid">
<div class="row">
<nav class="col-12 navbar navbar-expand-sm navbar-light bg-light sticky-top">
<button class="navbar-toggler mx-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a id="a-links" class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#">Man</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#">Woman</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#">Kids</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#">Baby</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#body">↑</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#">↓</a>
</li>
<li class="nav-item d-none d-md-block" id="little-icon">
<img id="little-logo-main-nav" src="images/main logo/Logo.svg" alt="little H&M's icon" />
</li>
<!-- Dropdown menu -->
<li class="nav-item dropdown d-md-none d-block">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
More
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Sign in</a>
<a class="dropdown-item" href="#">Youe Bag</a>
<a class="dropdown-item" href="#">ios App</a>
<a class="dropdown-item" href="#">Andriod App</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control col-md-8 mr-2 w-50" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-danger my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</div>
</div>
</header>
<main id="main">
<!--Carousel slider-->
<div class="container-fluid">
<div class="row">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="carousel-item" data-interval="3000">
<img class="img-fluid" src="images/slider/hmgoepprod (1).jpg" alt="Model">
<div class="carousel-caption">
<h3>Beauty with H&M</h3>
<p>Be simple!</p>
</div>
</div>
<div class="carousel-item" data-interval="3000">
<img class="img-fluid" src="images/slider/hmgoepprod (2).jpg" alt="Model">
<div class="carousel-caption">
<h3>Be amazing with H&M</h3>
<p>Be rich</p>
</div>
</div>
<div class="carousel-item" data-interval="3000">
<img class="img-fluid" src="images/slider/hmgoepprod (3).jpg" alt="Model">
<div class="carousel-caption">
<h3>New things</h3>
<p>We love to be new</p>
</div>
</div>
<div class="carousel-item active" data-interval="3000">
<img class="img-fluid" src="images/slider/hmgoepprod (4).jpg" alt="Model">
<div class="carousel-caption">
<h3>Everything is good</h3>
<p>Be happy</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Two images half the page-->
<div class="container-fluid">
<div class="row">
<div id="img-half" class="card border-0">
<img class="card-img-top" src="images/half the page/hmgoepprod.jpg" alt="Card image">
<div class="card-img-overlay">
<p id="text-on-two-car-half-page" class="card-text">One store but</p>
</div>
</div>
<div id="img-half" class="card border-0">
<img class="card-img-top" src="images/half the page/hmgoepprod (1).jpg" alt="Card image">
<div class="card-img-overlay">
<p id="text-on-two-car-half-page" class="card-text">more than one store</p>
</div>
</div>
</div>
</div>
<!--Magazine-->
<div class="container-fluid">
<div class="row">
<h2 class="col-12 text-center mt-3 mb-3">Magazine</h2>
<div class="card mx-auto" id="cards-magazine">
<img class="card-img-top" src="images/magazine section/hmgoepprod (2).jpg" alt="Card image">
<div class="card-body">
<p class="card-title text-center">Inside H&M</p>
<h3 class="card-text text-center">A meadow of wildflowers</h3>
<a id="a-links-card-magazine" href="#" class="btn-link">See Profile ></a>
</div>
</div>
<div class="card mx-auto" id="cards-magazine">
<img class="card-img-top" src="images/magazine section/hmgoepprod (3).jpg" alt="Card image">
<div class="card-body">
<p class="card-title text-center">Inside H&M</p>
<h3 class="card-text text-center">The Colour Story Collection</h3>
<a id="a-links-card-magazine" href="#" class="btn-link">See Profile ></a>
</div>
</div>
<div class="card mx-auto" id="cards-magazine">
<img class="card-img-top" src="images/magazine section/hmgoepprod (4).jpg" alt="Card image">
<div class="card-body">
<p class="card-title text-center">Inside H&M</p>
<h3 class="card-text text-center">“Fashion is a means to social equality when everyone is given access to it”</h3>
<a id="a-links-card-magazine" href="#" class="btn-link">See Profile ></a>
</div>
</div>
</div>
</div>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
</main>
<!--Bootstrap4-->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</body>
</html>

Bootstrap Footer covering Body content

In the below example code, the footer is covering the body content.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" rel="stylesheet">
<style>
body {
min-height: 100vh;
position: relative;
}
.footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
</style>
</head>
<body>
<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light self-navbar text-light">
<a class="navbar-brand" href="http://localhost/project/new_version/"><img src="" alt="Website" title="Website" width="30" height="30" loading="lazy" /> Website</a>
<ul class="navbar-nav self-first-ul">
Slogan
</ul>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto self-second-ul">
<li class="nav-item"><a class="nav-link" target="_blank" href="https://wa.me/919595951111"><i class="fab fa-whatsapp"></i> 9595951111</a></li>
<li class="nav-item"><a class="nav-link" href="mailto:email#site.com"><i class="far fa-envelope"></i> email#site.com</a></li>
<li class="nav-item"><a class="nav-link" href="tel:9595950000"><i class="fas fa-mobile-alt"></i> 9595950000</a></li>
</ul>
</div>
</span>
</nav>
<div class="container p-3 bg-white rounded">
<div id="carouselExampleIndicators" class="carousel slide carousel-fade d-none d-md-block d-lg-none" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item ">
<div class="row">
<div class="col-md-4">
<div class="card text-white bg-primary">
<div class="card-body">
<h5 class="card-title">C6</h5>
<p class="card-text">00</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-white bg-primary">
<div class="card-body">
<h5 class="card-title">C8</h5>
<p class="card-text">00</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-white bg-primary">
<div class="card-body">
<h5 class="card-title">C5</h5>
<p class="card-text">00</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br /><br />
<div class="row">
<label for="Number">Search your transaction here <i class="far fa-hand-point-down far-blink"></i></label>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Search" aria-label="Number" aria-describedby="basic-addon2" id="number" name="srch_num">
<div class="input-group-append">
<input type="submit" class="btn btn-success" id="submit-addon2" value="Search" />
</div>
</div>
</div>
<p>How to search specific transaction?</p>
</div>
<footer class="footer bg-primary">
<div class="container">
<div class="row">
<div class="col-md-4">
<h3>Company Name</h3>
<p>Some text to be shown. This will be a paragraph. Some text to be shown. This will be a paragraph. Some text to be shown. This will be a paragraph. Some text to be shown. This will be a paragraph. Some text to be shown. This will be a paragraph.
Some text to be shown. This will be a paragraph.</p>
</div>
<div class="col-md-3 ml-auto">
<h3>Links</h3>
<ul class="list-unstyled footer-links">
<li>Home</li>
<li>Categories</li>
<li>Contact Us</li>
<li>About Us</li>
<li>Terms & Conditions</li>
<li>Refund Policy</li>
</ul>
</div>
<div class="col-md-4">
<h3>Dial Sales & Support</h3>
<p><i class="fa fa-phone" aria-hidden="true"></i> <a class="dial_link" href="tel:'.$website_phone.'" title="Dial '.$website_phone.'"> '.$website_phone.'</a></p>
<p><i class="fa fa-mobile" aria-hidden="true"></i> <a class="dial_link" href="tel:'.$website_mobile.'" title="Dial '.$website_mobile.'">'.$website_mobile.'</a></p>
<p><i class="fa fa-mobile" aria-hidden="true"></i> <a class="dial_link" href="https://wa.me/91'.$website_wamobile.'" title="Whatsapp '.$website_wamobile.'">'.$website_wamobile.'</a></p>
<p><i class="fa fa-envelope" aria-hidden="true"></i> <strong></strong> '.$website_email.'</p>
<p><i class="fa fa-calendar-check-o" aria-hidden="true"></i><strong></strong> Monday to Saturday</p>
<p><i class="fa fa-clock-o" aria-hidden="true"></i> <strong></strong> 10am to 6pm</p>
</div>
</div>
<div class="row pt-5 text-center">
<div class="col-md-12">
<div class="border-top pt-5">
<p>
Website Slogan
</p>
</div>
</div>
</div>
</div>
</footer>
</body>
</html>
What actually I want is, the footer should always be in the bottom. Like if there are long body content (scrollable) then footer should be in last. But if the content is very few, finishes in one/two line the footer should be in bottom last. No space after that.

Using Flexbox
$("#add").on("click", function() {
$("<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>").appendTo(".content");
});
html, body {
/* IE 10-11 didn't like using min-height */
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.content {
flex: 1 0 auto; /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
padding: 20px;
}
.footer {
flex-shrink: 0; /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
padding: 20px;
background:#fe5;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
<h1>Sticky Footer with Flexbox</h1>
<p><button id="add">Add Content</button></p>
</div>
<footer class="footer">
Footer
</footer>

Spacing Evenly Elements of a Form in Bootstrap

I have the following todolist web app, and I'm trying to space the two inputs and the button evenly. But I can't figure out by inspecting the elements in the form what element has a margin or padding that pushes the button further down. The form has three elements two inputs and one button. I want the three evenly spaced. If you can let me know how to fix this appreciated.
Link to webapp: http://pctechtips.org/apps/todo/
Code:
body {
margin: 0 auto;
height: 100vh;
color: white;
/*display: flex;*/
background: linear-gradient(to bottom right, #6a176a, #7c811b) 100% no-repeat;
}
.navbar-brand {
color: white;
}
.add-item {
font-size: 2em;
margin: 0 auto;
border-radius: 30px;
}
.list-group {
color: gray;
font-size: 18px;
}
<title>TodoList App</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<!-- navbar -->
<nav class="navbar navbar-expand-lg navbar-drak bg-dark mb-4">
<a class="navbar-brand" href="#"><i class="fa fa-thumb-tack" aria-hidden="true"></i> Todo<strong>List</strong></a>
</nav>
<!-- /navbar -->
<!-- todoList -->
<div class="container">
<div class=" add-item text-white text-center border col-sm-12 col-md-10 col-lg-8 mb-4">
<a class="new-todo text-white text-center" href=""><i class="fa fa-plus-circle" aria-hidden="true"></i> Enter new todo item</a>
<div class="add-item text-center col-sm-12 col-md-12 col-lg-8">
<form class="mb-4">
<div class="form-group">
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Todo Title">
</div>
<div class="form-group">
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Todo Description">
</div>
<button type="button" class="btn btn-primary btn-lg col-12">Submit Todo</button>
</form>
</div>
<!-- horizontal line -->
<hr>
<!-- list items -->
<h1 class="heading-4">Todo List Items</h1>
<ul class="list-group mt-4 pb-4">
<li class="list-group-item d-flex justify-content-between align-items-center">
Cras justo odio
<span class="badge badge-primary badge-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Dapibus ac facilisis in
<span class="badge badge-primary badge-pill">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Morbi leo risus
<span class="badge badge-primary badge-pill">1</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Morbi leo risus
<span class="badge badge-primary badge-pill">1</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Morbi leo risus
<span class="badge badge-primary badge-pill">1</span>
</li>
</ul>
</div>
</div>

In your class .add-item you are applying a font-size in EM units which I believe is the problem. The way font sizes are calculated when EM is specified can cause inconsistent 'stacking' issues where font sizes compound up or down far more than expected.
Removing this declaration, or changing it from 2em to 2rem resolves the issue.
body {
margin: 0 auto;
height: 100vh;
color: white;
/*display: flex;*/
background: linear-gradient(to bottom right, #6a176a, #7c811b) 100% no-repeat;
}
.navbar-brand {
color: white;
}
.add-item {
font-size: 2rem;
margin: 0 auto;
border-radius: 30px;
}
.list-group {
color: gray;
font-size: 18px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="container">
<div class=" add-item text-white text-center border col-sm-12 col-md-10 col-lg-8 mb-4">
<a class="new-todo text-white text-center" href=""><i class="fa fa-plus-circle" aria-hidden="true"></i> Enter new todo item</a>
<div class="add-item text-center col-sm-12 col-md-12 col-lg-8">
<form class="mb-4">
<div class="form-group">
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Todo Title">
</div>
<div class="form-group">
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Todo Description">
</div>
<button type="button" class="btn btn-primary btn-lg col-12">Submit Todo</button>
</form>
</div>
</div>
</div>

That's because form.mb-4 has a computed line-height:96px. Resetting it to 1.5rem fixes the issue :
body {
margin: 0 auto;
height: 100vh;
color: white;
/*display: flex;*/
background: linear-gradient(to bottom right, #6a176a, #7c811b) 100% no-repeat;
}
.navbar-brand {
color: white;
}
.add-item {
font-size: 2em;
margin: 0 auto;
border-radius: 30px;
}
.list-group {
color: gray;
font-size: 18px;
}
form.mb-4 {
line-height: 1.5rem;
}
<title>TodoList App</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<!-- navbar -->
<nav class="navbar navbar-expand-lg navbar-drak bg-dark mb-4">
<a class="navbar-brand" href="#"><i class="fa fa-thumb-tack" aria-hidden="true"></i> Todo<strong>List</strong></a>
</nav>
<!-- /navbar -->
<!-- todoList -->
<div class="container">
<div class=" add-item text-white text-center border col-sm-12 col-md-10 col-lg-8 mb-4">
<a class="new-todo text-white text-center" href=""><i class="fa fa-plus-circle" aria-hidden="true"></i> Enter new todo item</a>
<div class="add-item text-center col-sm-12 col-md-12 col-lg-8">
<form class="mb-4">
<div class="form-group">
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Todo Title">
</div>
<div class="form-group">
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Todo Description">
</div>
<button type="button" class="btn btn-primary btn-lg col-12">Submit Todo</button>
</form>
</div>
<!-- horizontal line -->
<hr>
<!-- list items -->
<h1 class="heading-4">Todo List Items</h1>
<ul class="list-group mt-4 pb-4">
<li class="list-group-item d-flex justify-content-between align-items-center">
Cras justo odio
<span class="badge badge-primary badge-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Dapibus ac facilisis in
<span class="badge badge-primary badge-pill">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Morbi leo risus
<span class="badge badge-primary badge-pill">1</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Morbi leo risus
<span class="badge badge-primary badge-pill">1</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Morbi leo risus
<span class="badge badge-primary badge-pill">1</span>
</li>
</ul>
</div>
</div>

It seems that the .add-item class manipulates the button.
You can try
css:
.test {
font-size: 1rem;
}
.test button {
font-size: 1em;
}
Html (wrap content with a ):
<div class="test">
<button type="button" class="btn btn-primary btn-lg col-12">Submit Todo</button>
</div>

How to remove the border-bottom from bootstrap navbar

I realize this question has answers that have worked for some but try as I may, I cannot remove this annoying border.
I have tried the following CSS:
.nav-container{
border-width:0;
box-shadow:none;
background-color: aliceblue;
}
.navbar {
background-color: #99ccff;
border: 0;
}
Although the background-color does get set, the border remains.
Here is the site.
index.html:
html,
body {
background-color: aliceblue;
}
.nav-container {
border-width: 0;
box-shadow: none;
background-color: aliceblue;
}
.navbar {
background-color: #99ccff;
border: 0;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap-theme.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<header>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid nav-container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#Writers-Tryst">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div style="display: inline-block">
<a class="navbar-brand" href="#">
<img id="logo" src="img/writers-tryst-logo-min.png" alt="logo" />
</a>
<br/>
<br/>
<div id="shares" class="row">
<!-- Twitter -->
<a href="http://twitter.com/share?url=writers.tryst.ron-tornambe.com&text=<TEXT>&via=<VIA>" target="_blank" title="twitter" class="share-btn twitter">
<i class="fa fa-twitter"></i>
</a>
<!-- Facebook -->
<a href="http://www.facebook.com/sharer/sharer.php?u=http://writers.tryst.com" target="_blank" title="facebook" class="share-btn facebook">
<i class="fa fa-facebook"></i>
</a>
<!-- StumbleUpon (url, title)
<a href="http://www.stumbleupon.com/submit?url=http://writers.tryst.com&title=<TITLE>" target="_blank" class="share-btn stumbleupon" title="stumble-upon">
<i class="fa fa-stumbleupon-circle"></i>
</a> -->
<!-- Reddit (url, title)
<a href="http://reddit.com/submit?url=http://writers.tryst.com&title=<TITLE>" target="_blank" class="share-btn reddit" title="reddit">
<i class="fa fa-reddit-square"></i>
</a> -->
<!-- LinkedIn -->
<a href="http://www.linkedin.com/shareArticle?url=http://writers.tryst.com&title=<TITLE>&summary=<SUMMARY>&source=<SOURCE_URL>" target="_blank" title="linked-in" class="share-btn linkedin">
<i class="fa fa-linkedin"></i>
</a>
<!-- Google Plus -->
<a href="https://plus.google.com/share?url=writers.tryst.ron-tornambe.com" target="_blank" title="google+" class="share-btn google-plus">
<i class="fa fa-google-plus"></i>
</a>
</div>
</div>
</div>
<!--navbar-header-->
<div class="collapse navbar-collapse" id="Writers-Tryst">
<ul class="nav navbar-nav">
<li class="active"><a id="homepage" href="#/"><i class="acctive glyphicon glyphicon-home fa fa-home"></i> Home</a>
</li>
<li> Writers
</li>
<li> Enablers
</li>
<li> About
</li>
<li> Privacy/Rules
</li>
<li> Contact
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a id="login" href="#log-in"><i class="fa fa-sign-in"></i> Log-In</a>
</li>
<li><a id="accounts-link" href="#accounts"><i class="fa fa-user hidden"></i> Create Account</a>
</li>
<li class="dropdown" data-toggle="popover" data-trigger="hover" data-placement="bottom">
<button class="btn btn-custom-primary dropdown-toggle fa fa-user" style="margin-top: 8px; color: white;" data-html="true" type="button" id="user-dropdown-link" data-toggle="dropdown"><span class="caret"></span>
</button>
</a>
<ul class="dropdown-menu" role="menu" data-aria-labelledby="create-account-link">
<li><a id="update-profile" href="#update-profile" class="fa fa-database"> Update profile</a>
</li>
<li><a id="manage-uploads" href="#manage-uploads" class="fa fa-book"> Manage uploads</a>
</li>
<li><a id="review-submissions" href="#review-submissions" class="fa fa-book"> Review Submissions</a>
</li>
<li><a id="update-submissions" href="#update-submissions" class="fa fa-book"> Update Reviews</a>
</li>
</ul>
</li>
<li>
<a id="reset-pwd-link" href="#reset-pwd"></a>
</li>
</ul>
</div>
<!--navbar-collapse-->
</div>
<!--container fluid-->
</nav>
</header>
<div>
<div id="message" class="alert m-t-10 m-b-10"></div>
<div id="main" class="content container">
<!-- angular templating -->
<!-- this is where content will be injected -->
<div data-ng-view></div>
</div>
<footer class="panel panel-default panel-transparent">
<div id="footer" class="text-right small">© 2016 Ronald Tornambe, Inc.</div>
</footer>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

There is a box shadow added by the bootstrap theme. The following rules will remove it as well as on the .navbar-collapse class when the nav is under 768px.
Note: you have a stray tag after the fa fa-user button and are (possibly) using normalize.css twice since Bootstrap3 uses a version of it all ready. See normalize.less.
.navbar.navbar-default {
background-color: #99ccff;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.navbar.navbar-default .navbar-collapse {
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
Before with box-shadow:
After removing the box-shadow:
Working Example:
/*FOR DEMO ONLY*/
html,
body {
background: aliceblue;
}
/*FOR DEMO ONLY*/
.nav-container {
border-width: 0;
box-shadow: none;
background-color: aliceblue;
}
.navbar.navbar-default {
background-color: #99ccff;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.navbar.navbar-default .navbar-collapse {
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap-theme.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<header>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid nav-container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#Writers-Tryst">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div style="display: inline-block">
<a class="navbar-brand" href="#">
<img id="logo" src="https://writers-tryst.com//img/writers-tryst-logo-min.png" alt="logo" />
</a>
<br/>
<br/>
<div id="shares" class="row">
<a href="http://twitter.com/share?url=writers.tryst.ron-tornambe.com&text=<TEXT>&via=<VIA>" target="_blank" title="twitter" class="share-btn twitter">
<i class="fa fa-twitter"></i>
</a>
<a href="http://www.facebook.com/sharer/sharer.php?u=http://writers.tryst.com" target="_blank" title="facebook" class="share-btn facebook">
<i class="fa fa-facebook"></i>
</a>
<a href="http://www.linkedin.com/shareArticle?url=http://writers.tryst.com&title=<TITLE>&summary=<SUMMARY>&source=<SOURCE_URL>" target="_blank" title="linked-in" class="share-btn linkedin">
<i class="fa fa-linkedin"></i>
</a>
<a href="https://plus.google.com/share?url=writers.tryst.ron-tornambe.com" target="_blank" title="google+" class="share-btn google-plus">
<i class="fa fa-google-plus"></i>
</a>
</div>
</div>
</div>
<div class="collapse navbar-collapse" id="Writers-Tryst">
<ul class="nav navbar-nav">
<li class="active"><a id="homepage" href="#/"><i class="acctive glyphicon glyphicon-home fa fa-home"></i> Home</a>
</li>
<li> Writers
</li>
<li> Enablers
</li>
<li> About
</li>
<li> Privacy/Rules
</li>
<li> Contact
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a id="login" href="#log-in"><i class="fa fa-sign-in"></i> Log-In</a>
</li>
<li><a id="accounts-link" href="#accounts"><i class="fa fa-user hidden"></i> Create Account</a>
</li>
<li class="dropdown" data-toggle="popover" data-trigger="hover" data-placement="bottom">
<button class="btn btn-custom-primary dropdown-toggle fa fa-user" style="margin-top: 8px; color: white;" data-html="true" type="button" id="user-dropdown-link" data-toggle="dropdown"><span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" data-aria-labelledby="create-account-link">
<li><a id="update-profile" href="#update-profile" class="fa fa-database"> Update profile</a>
</li>
<li><a id="manage-uploads" href="#manage-uploads" class="fa fa-book"> Manage uploads</a>
</li>
<li><a id="review-submissions" href="#review-submissions" class="fa fa-book"> Review Submissions</a>
</li>
<li><a id="update-submissions" href="#update-submissions" class="fa fa-book"> Update Reviews</a>
</li>
</ul>
</li>
<li>
<a id="reset-pwd-link" href="#reset-pwd"></a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div>
<div id="message" class="alert m-t-10 m-b-10"></div>
<div id="main" class="content container">
<div data-ng-view></div>
</div>
<footer class="panel panel-default panel-transparent">
<div id="footer" class="text-right small">© 2016 Ronald Tornambe, Inc.</div>
</footer>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

simply apply box-shadow: none; in navbar

You have several declarations for the CSS box-shadow property on the .navbar-default element. If you remove all of those the border will be gone.

The only solution that is working for me is inline css with !important property:
border: none !important; outline: none !important;
inside navbar-toggler:
<button class="navbar-toggler" style="border: none !important; outline: none !important;"
type="button" data-toggle="collapse" data-target="#collapsingNavbar">

Resources