Bootstrap 5.2 Navbar Dropdown doesn't work - html

I apologize for the topic! I've found many similar topics and advises, however nothing help. I want to create dropdown <a> menu inside the navbar. The code is:
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>
<link href="css/navbar.css" rel="stylesheet" />
</head>
<body id="page-top">
<nav class="navbar navbar-expand-lg navbar-light bg-white fixed-top" id="mainNav">
<div class="container-fluid">
<a class="navbar-brand" href="#page-top"><img src="" alt="..." /></a>
<ul class="navbar-nav ms-auto py-4 py-lg-0">
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#about"
id="navbarDropdownMenuLink"
role="button"
data-bs-toogle="dropdown"
aria-expanded="false"
aria-haspopup="true"
>
About
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink" >
<li>
<a class="dropdown-item" href="#">One</a>
</li>
<li>
<a class="dropdown-item" href="#">Two</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</body>


Change the "data-bs-toogle="dropdown" to "data-bs-toggle="dropdown".
Check the spelling of toggle.
Try this:
<!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">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>
<link href="css/navbar.css" rel="stylesheet" />
</head>
<body id="page-top">
<nav class="navbar navbar-expand-lg navbar-light bg-white fixed-top" id="mainNav">
<div class="container-fluid">
<a class="navbar-brand" href="#page-top"><img src="" alt="..." /></a>
<ul class="navbar-nav ms-auto py-4 py-lg-0">
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#about"
id="navbarDropdownMenuLink"
role="button"
data-bs-toggle="dropdown"
aria-expanded="false"
aria-haspopup="true"
>
About
</a>
<ul class="dropdown-menu position-absolute" aria-labelledby="navbarDropdownMenuLink" >
<li>
<a class="dropdown-item" href="#">One</a>
</li>
<li>
<a class="dropdown-item" href="#">Two</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</body>
</html>

Related

How to fix Nav Item Position and Dropdown Position?

So i have been working with bootstrap dropdowns and its not aligning correctly for some reason. I tried using multiple solutions such as updating my bootstrap versions but they aren't working at all.
Here is my code:
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
<link href='https://css.gg/add.css' rel='stylesheet'>
<link rel="stylesheet" href="/static/css/dashboard.css">
</head>
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="shortcut icon" type="image/x-icon" href="/static/img/AdiAvi.png" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="/static/js/dashboard.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/static/css/dashboard.css">
<link rel="stylesheet" href="/static/css/base.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Avyukt's Dashboard</title>
<style>
.trigger {
display: none !important;
}
#loginButton {
display: none !important;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark" style="background-color: rgb(0, 0, 0);">
<a class="navbar-brand" href="/">
<img class="ms-3" src="/static/img/AdiAvi.png" width="30" height="30" class="d-inline-block align-top" alt="">
AdiAvi
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 ms-auto mb-2 mb-lg-0 align-items-start align-items-lg-center">
<li class="nav-item">
<a class="nav-link active" class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact">Contact</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img src="/static/profilePictures/A.png" width="50" height="50" class="rounded-circle mt-8">
</a>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="/dashboard">Dashboard</a>
<a class="dropdown-item" href="/account">Edit Profile</a>
<a class="dropdown-item" href="/logout">Log Out</a>
</div>
</li>
</ul>
</div>
</nav>
Does anyone know how to fix this problem? I am using bootstrap 5 and i think i am using the latest versions of the bundle.
Screenshot: https://ibb.co/pQPVdx2
Like i cant even click on the dropdown.

You need to update your code to use the proper version of the bootstrap.js & popper.js (or use the bootstrap.bundle.js). You will then need to modify all of your Bootstrap-specific data-* attribute names to use the new format for BS5+: data-bs-*.
Your issue with the dropdown menu alignment is solved by adding .dropdown-menu-end to the .dropdown-menu.
The vertical alignment of the .nav-items can be controlled by adding a .align-items-* class to the parent .navbar-nav. Be aware, this also affects the horizontal alignment on the mobile collapsed navbar. Use the responsive variant (.align-items-lg-center) matching the breakpoint of your navbar (.navbar-expand-lg) to control alignment only for the expanded state.
Here is a minimal example with .nav-items having left alignment for collapsed navbar, and vertically centered for expanded navbar:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-dark bg-black">
<a class="navbar-brand" href="/">
<img class="ms-3" src="https://via.placeholder.com/30" width="30" height="30" class="d-inline-block align-top" alt=""> AdiAvi
</a>
<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 ms-auto mb-2 mb-lg-0 align-items-start align-items-lg-center">
<li class="nav-item">
<a class="nav-link active" class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact">Contact</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img src="https://via.placeholder.com/50" width="50" height="50" class="rounded-circle mt-8">
</a>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="/dashboard">Dashboard</a>
<a class="dropdown-item" href="/account">Edit Profile</a>
<a class="dropdown-item" href="/logout">Log Out</a>
</div>
</li>
</ul>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js"></script>
Note:
As is the above snippet and in the docs, the bootstrap.js should be included at the end just before the closing body tag.
Include Bootstrap’s CSS and JS. Place the <link> tag in the <head> for our CSS, and the <script> tag for our JavaScript bundle (including Popper for positioning dropdowns, poppers, and tooltips) before the closing </body>.
--https://getbootstrap.com/docs/5.2/getting-started/introduction/#quick-start

Aligning items to right in navbar with bootstrap

I am trying to right align some elements in the navbar using bootstrap by using mr-auto but it is not working. What should I do to make it work correctly?
This is my index.html code.
<html lang="en" dir="ltr">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="manifest" href="site.webmanifest">
<meta charset="utf-8">
<title>Silicon</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid ">
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="logo.png" alt="" width="200" height="83" class="d-inline-block align-text-top">
</a>
</div>
</nav>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 mb-2 mb-lg-0 ml-auto"> */here i used ml-auto for margin*/
<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="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
In bootstrap documentation, it says you should you ml-auto for margin on left and mr-auto for margin on right. But it is not working here.

Since version 5, ml-auto is not in Bootstrap anymore... Use new syntax instead:
ml-auto => ms-auto (start)
mr-auto => me-auto (end)

Why my navbar-toggler show the navbar-item on default

I wonder why the nav-items keeps showing every time I refresh the page in mobile view. I checked the aria-expanded: false but still it does not work.
This is my code:
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Portfolio</title>
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg fixed-top navbar-light">
<div class="container-fluid justify-content-between mx-5 px-4">
<a class="navbar-brand" href="#">HELLO</a>
<button
class="navbar-toggler collapse collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarCollapse"
aria-controls="navbarTogglerDemo02"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav ms-auto">
<li class="navbar-item">
<a class="nav-link active " aria-current="page" href="#">ABOUT</a>
</li>
<li class="navbar-item">
<a class="nav-link active" aria-current="page"href="#">PROJECT</a>
</li class="navbar-item">
<li class="navbar-item">
<a class="nav-link active" aria-current="page" href="#">RESUME</a>
</li>
<li class="navbar-item">
<a class="nav-link active" aria-current="page" href="#">CONTACT</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- <img class="img-fluid" src="img\heading-image.jpg" alt=""> -->
</header>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>
Please note: I'm still a beginner in bootstrap, html and css.

Remove the class collapse collapsed from button and add collapseto a menu div
here is the full code
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Portfolio</title>
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg fixed-top navbar-light"
<a class="navbar-brand" href="#">HELLO</a>
<button
class="navbar-toggler "
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarCollapse"
aria-controls="navbarCollapse"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse " id="navbarCollapse">
<ul class="navbar-nav ms-auto">
<li class="navbar-item">
<a class="nav-link active " aria-current="page" href="#">ABOUT</a>
</li>
<li class="navbar-item">
<a class="nav-link active" aria-current="page"href="#">PROJECT</a>
<li class="navbar-item">
<li class="navbar-item">
<a class="nav-link active" aria-current="page" href="#">RESUME</a>
</li>
<li class="navbar-item">
<a class="nav-link active" aria-current="page" href="#">CONTACT</a>
</li>
</ul>
</div>
</nav>
<!-- <img class="img-fluid" src="img\heading-image.jpg" alt=""> -->
</header>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>

How to move bootstrap bottom navbar in a desired place?

Here is my bootstrap html:
<!doctype html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="css/style.css" rel="stylesheet">
<link rel="stylesheet" href="jqueryui/jquery-ui.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<title></title>
</head>
<body >
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="index.php">
<img src="http://getbootstrap.com/docs/4.3/assets/brand/bootstrap-solid.svg" width="30" height="30" alt=""></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.php">خانه<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.php">درباره ما</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> حساب کاربری </a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="signup.php">ثبت نام</a>
<a class="dropdown-item" href="login.php">ورود</a>
</div>
</li>
</ul>
</div>
</nav>
<div class="container py-5">
Lorem ipsum
</div>
<nav class="navbar navbar-light bg-light">
<div class="container">
<a class="nav-link" href="privacy.php">سیاست حریم خصوصی</a>
<p>کلیه حقوق این سایت محفوظ است.</p>
</div>
</nav>
</body>
For short pages, footer is in middle of the screen, how to move it at the very bottom? I used fixed-bottom class, but this time for longer pages, the footer is over the last lines of the page and they are unreadable. How to fix it?

#media (min-width: 1000px) {
html {
height: 100%!important;
}
body {
-ms-flex-direction: column !important;
flex-direction: column !important;
display: -ms-flexbox !important;
display: flex !important;
height: 100% !important;
}
nav.navbar.navbar-expand-lg.navbar-light.bg-light {
margin-top: 0 !important;
}
nav.navbar.navbar-light.bg-light {
margin-top: auto !important;
}}
<!doctype html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="css/style.css" rel="stylesheet">
<link rel="stylesheet" href="jqueryui/jquery-ui.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<title></title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="index.php">
<img src="http://getbootstrap.com/docs/4.3/assets/brand/bootstrap-solid.svg" width="30" height="30" alt=""></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.php">خانه<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.php">درباره ما</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> حساب کاربری </a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="signup.php">ثبت نام</a>
<a class="dropdown-item" href="login.php">ورود</a>
</div>
</li>
</ul>
</div>
</nav>
<div class="container py-5">
Lorem ipsum
</div>
<nav class="navbar navbar-light bg-light">
<div class="container">
<a class="nav-link" href="privacy.php">سیاست حریم خصوصی</a>
<p>کلیه حقوق این سایت محفوظ است.</p>
</div>
</nav>
</body>

You can set the position of the footer to absolute (i used inline style but it's not suggested...i did so just to point out clearly what i've done)
<footer style="display:block; position:absolute; bottom:0; right:0; left:0">
<nav class="navbar navbar-light bg-light">
<div class="container">
<a class="nav-link" href="privacy.php">سیاست حریم خصوصی</a>
<p>کلیه حقوق این سایت محفوظ است.</p>
</div>
</nav>
</footer>

Text do not show up with bootstrap 4

I have added the following navbar with the new bootstrap 4 version. but it doesn't show anything below the nav bar as well. The text inserted after the nav, also it doesn't take the width and height properties if an external css file is used to give css to the image inserted below. Any idea why this is happening??
<!DOCTYPE html>
<html lang="en">
<head>
<title>Forestpin</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="assets/css/home.css"/>
</head>
<body>
<nav class="navbar navbar-toggleable-md navbar-light fixed-top bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">
<img src="assets/images/logofpin.png" alt="Forestpin" width="70" height="30">
</a>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Products
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Risk Engine</a>
<a class="dropdown-item" href="#">Analytics</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Insights</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">FAQ</a>
</li>
</ul>
</div>
</nav>
vdfnfhmjhngsdhfjfnd
fdbnmjnfbdfgn
sample text
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html>

In your nav tag fixed-top class causes the issue. You are suppose to use navbar-fixed-top for fixed navbar. Check below snippet for reference.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Forestpin</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="assets/css/home.css" />
</head>
<body>
<nav class="navbar navbar-toggleable-md navbar-light navbar-fixed-top bg-faded">
<div class="navbar-header">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">
<img src="assets/images/logofpin.png" alt="Forestpin" width="70" height="30">
</a>
</div>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Products
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Risk Engine</a>
<a class="dropdown-item" href="#">Analytics</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Insights</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">FAQ</a>
</li>
</ul>
</div>
</nav>
vdfnfhmjhngsdhfjfnd fdbnmjnfbdfgn sample text
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</html>