Bootstrap's v4 btn-outline-primary doesn't work - html

Bootstrap's v4 btn-outline-primary doesn't work on the nav links when viewed on my iPhone, but works fine (albeit solid without outline) when viewed on my laptop and desktop screens. I looked around and didn't find any solutions specific to this. I'm using Bootstrap 4.0.0.
HTML is:
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" 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-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
</head>
<body>
<!-- START NAVBAR -->
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<div class="container">
<!-- ADDED DIV TO MANIPULATE POSITIONS OF "navbar-brand" and "navbar-nav", the ul -->
<span class="navbar-brand mb-0 h1">JavaScript Is Cool</span>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<!-- removed .active -->
<a class="nav-link btn-outline-primary" href="/">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link btn-outline-primary" href="/bio">Bio</a>
</li>
<li class="nav-item">
<a class="nav-link btn-outline-primary" href="/history">Resume´</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle btn-outline-primary" href="" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Coming Soon</a>
<a class="dropdown-item" href="#">Coming Soon</a>
<a class="dropdown-item" href="#">Coming Soon</a>
</div>
</li>
</ul>
<!-- REMOVED THE SEARCH FORM -->
<!-- <form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form> -->
</div>
</div>
<!-- END ADDED DIV -->
</nav>
<!-- END NAVBAR -->
<!-- START JUMBOTRON -->
<div class="jumbotron jumbotron-fluid">
<div class="container">
<div class="row">
<div class="col titleDiv">
<h1 class="line1">RON SMITH</h1>
<p class="line2">JavaScript Is Cool</p>
</div>
</div>
</div>
</div>
<!-- END JUMBOTRON -->
<!-- START FOOTER -->
{{>footer}}
<!-- END FOOTER -->
<script src="../js/jquery.slim.min.js"></script>
<script src="../js/popper.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</body>
Everything works fine except when tapping on iPhone. There's no highlighting of the button or links with color in responsive mode.


The btn-outline-primary class is not designed to be used the way you were using it. So, saying that it "works fine" means you misunderstood how it was supposed to work in the first place because based on the current behavior resulting from your code, it does NOT work "fine".
To make the btn-outline-primary class work the way it's supposed to be used and work, you need to add the btn class additionally to that as shown in the code snippet below. In other words, btn is required for btn-outline-primary to work properly even though the effect you get that way might not be the effect you were going for.
Here's the code snippet (click "run code snippet" below and expand to full page):
<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>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<div class="container"> <!-- ADDED DIV TO MANIPULATE POSITIONS OF "navbar-brand" and "navbar-nav", the ul -->
<span class="navbar-brand mb-0 h1">JavaScript Is Cool</span>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item"> <!-- removed .active -->
<a class="nav-link btn btn-outline-primary" href="/">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link btn btn-outline-primary" href="/bio">Bio</a>
</li>
<li class="nav-item">
<a class="nav-link btn btn-outline-primary" href="/history">Resume´</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link btn dropdown-toggle btn-outline-primary" href="" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Coming Soon</a>
<a class="dropdown-item" href="#">Coming Soon</a>
<a class="dropdown-item" href="#">Coming Soon</a>
</div>
</li>
</ul>
<!-- REMOVED THE SEARCH FORM -->
<!-- <form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form> -->
</div>
</div> <!-- END ADDED DIV -->
</nav>

Related

Cannot get bootstrap dropdown to work with local files offline

so I have been looking for how to solve this and it's been over a day now.
I have bootstrap version 4.5.2 downloaded locally. I have linked it to my html page and it seems to already be working, but one thing I cannot seem to get to work is the dropdown menu. I tried it with the exact same code in bootstrap website but it doesn't seem to want to work. If anyone could help I would appreciate it very much, thank you all! Also note that when I use the cdn everything works but I want it to work offline if possible.
I will link the code below.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="./css/bootstrap/css/bootstrap.min.css">
<title>Test</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</body>
</html>

To make bootstrap work offline. you have to link the boostrap javascript to your project. It comes with the downloaded file. Also you have to link the dependencies.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- Your Locally downloaded bootstrap css link--!>
<link rel="stylesheet" type="text/css" href="./css/bootstrap/css/bootstrap.min.css">
<!-- uncomment this if you want to check if the code is working and remember to comment in the previous link
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> --!>
<title>Test</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<!--Dependencies--!>
<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/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<!--BOOTSTRAP Javascript LINK remember your Js comes after the dependencies link--!>
<script src="./css/bootstrap/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<!-- uncomment this and comment the previous link to check if the code works
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script> --!>
</body>
</html>

You were forgotten to add jquery and bootstrap js
and you should follow the sequence.
you have to add jquery first and then popper.min.js and then bootstrap.min.js
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="">
<title>Test</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</body>
</html>

Bootstrap nav mr-auto not working as expected

I have the bootstrap nav snippet below:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<nav class="navbar bg-secondary navbar-dark">
<div class="container">
<nav class="navbar navbar-expand-lg"><a class="navbar-brand text-white" href="/">Test Site 2</a><button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarMain" aria-controls="navbarMain" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse d-flex" id="navbarMain">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" role="button" id="navbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">View Categories</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<div class="container container-sm">
<div class="row">
<a class="dropdown-item" href="/categories/5cfe472022a68840484a3652" style="white-space: normal;">Category 1</a><a class="dropdown-item" href="/categories/5dc7ff6bac641e2548a9e279" style="white-space: normal;">Category 2</a><a class="dropdown-item" href="/categories/5dc7ffa1ac641e2548a9e27a" style="white-space: normal;">Category 3</a>
</div>
</div>
</div>
</li>
<li class="nav-item"><a class="nav-link" href="/pages/about-us">About Us</a></li>
<li class="nav-item"><a class="nav-link" href="/pages/contact-us">Contact Us</a></li>
<li class="nav-item"><a class="nav-link" href="/pages/finding-us">Finding Us</a></li>
</ul>
<ul class="navbar-nav">
<li class="nav-item mr-2">
<form class="form-inline" method="get" action="/search">
<div class="input-group input-group-sm mt-1"><input class="form-control" type="search" placeholder="Search..." name="term">
<div class="input-group-append"><button class="btn btn-success" type="submit">Go</button></div>
</div>
</form>
</li>
<li class="nav-item"><a class="nav-link" href="/login">Login / Register</a></li>
</ul>
</div>
</nav>
</div>
</nav>
I have copied their example on the bootstrap documentation site where possible.
I want to get the second <ul> pushed to the right so am using mr-auto as they do in their example however it's not working for me like it is in the example, I don't understand why. I even tried adding the class d-flex to the #navbarMain div but still no luck.
Even running through the values in the inspector shows everything the same as in the example as far as I can see.
Can someone tell me why this isn't working?

What you want from image you attached:
What my code produces to match your image:
Updated Code: Demo on JsFiddle
<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<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">
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark justify-content-end">
<a class="navbar-brand" href="#">Navbar</a>
<a class="navbar-item text-white pr-2" href="#">Home</a>
<a class="navbar-item text-white pr-2" href="#">Link</a>
<div class="dropdown">
<button class="btn text-white dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<button class="btn btn-disabled text-white pr-2" disabled>Disabled</button>
<nav class="navbar navbar-dark bg-dark ml-auto mr-1">
<form class="form-inline">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</nav>
</nav>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>
</body>
</html>

Found the issue, it was where I had used a container to constrain the nav elements:
<nav class="navbar bg-secondary navbar-dark">
<div class="container">
<nav class="navbar navbar-expand-lg">
You can have nested nav's but shouldn't have nested navbar classes, removing the additional <nav class="navbar"> made everything work:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg bg-secondary navbar-dark">
<div class="container">
<a class="navbar-brand text-white" href="/">Test Site 2</a><button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarMain" aria-controls="navbarMain" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse d-flex" id="navbarMain">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" role="button" id="navbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">View Categories</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<div class="container container-sm">
<div class="row">
<a class="dropdown-item" href="/categories/5cfe472022a68840484a3652" style="white-space: normal;">Category 1</a><a class="dropdown-item" href="/categories/5dc7ff6bac641e2548a9e279" style="white-space: normal;">Category 2</a><a class="dropdown-item"
href="/categories/5dc7ffa1ac641e2548a9e27a" style="white-space: normal;">Category 3</a>
</div>
</div>
</div>
</li>
<li class="nav-item"><a class="nav-link" href="/pages/about-us">About Us</a></li>
<li class="nav-item"><a class="nav-link" href="/pages/contact-us">Contact Us</a></li>
<li class="nav-item"><a class="nav-link" href="/pages/finding-us">Finding Us</a></li>
</ul>
<ul class="navbar-nav">
<li class="nav-item mr-2">
<form class="form-inline" method="get" action="/search">
<div class="input-group input-group-sm mt-1"><input class="form-control" type="search" placeholder="Search..." name="term">
<div class="input-group-append"><button class="btn btn-success" type="submit">Go</button></div>
</div>
</form>
</li>
<li class="nav-item"><a class="nav-link" href="/login">Login / Register</a></li>
</ul>
</div>
</div>
</nav>

Bootstrap 4 navigation bar is not sliding down when clicking the dropdown menu

I'm trying to get the bootstrap 4 navigation bar when toggled, to slide down upon clicking a dropdown menu. It slides when the toggle button is pressed, but then when a dropdown menu is clicked, it just expands normally with no transitioning. Any help or guidance would be greatly appreciated.
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"/>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #122a38;">
<a class="navbar-brand" href="#">
<img src="#" width="80" height="40" alt="">
</a>
<span class="navbar-brand mb-0 h1">Project</span>
<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="navbar-collapse" id="navbarNav" style="height:auto;">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 1</a>
</li>
<li class="nav-item dropdown">
<a class= "nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Projects
</a>
<div class="dropdown-menu animate__animated animate__slideInUp" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Project 1</a>
<a class="dropdown-item" href="#">Project 2</a>
<a class="dropdown-item" href="#">Project 3</a>
<a class="dropdown-item" href="#">See All</a>
</div>
</li>
</ul>
<div class="d-none d-lg-block">
<form class="form-inline">
<div class="input-group input-group-sm mr-sm-2">
<input type="email" class="form-control mr-sm-2" aria-label="Username" type="email" placeholder="Email" aria-label="Email">
<input type="password" class="form-control" aria-label="Password" type="Password" placeholder="Password" aria-label="Password">
</div>
<button class="btn btn-sm btn-success my-2 my-sm-0 mr-sm-2" type="submit">Login/Logout</button>
<button class="btn btn-sm btn-primary my-2 my-sm-0" type="submit">Sign Up</button>
</form>
</div>
<div class="d-block d-lg-none">
<ul class="navbar-nav ">
<li class="nav-item">
<a class="nav-link" href="#">Sign Out/In/Up</a>
</li>
</ul>
</div>
</div>
</nav>
<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/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" 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>
</body>
</html>
Sliding Menu
Thanks kindly everyone!
Please see the attached image for reference.
What should happen

i remove the classes .animate__animated .animate__slideInUp from your div wich contains a list
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"/>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #122a38;">
<a class="navbar-brand" href="#">
<img src="#" width="80" height="40" alt="">
</a>
<span class="navbar-brand mb-0 h1">Project</span>
<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="navbar-collapse" id="navbarNav" style="height:auto;">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 1</a>
</li>
<li class="nav-item dropdown">
<a class= "nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Projects
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Project 1</a>
<a class="dropdown-item" href="#">Project 2</a>
<a class="dropdown-item" href="#">Project 3</a>
<a class="dropdown-item" href="#">See All</a>
</div>
</li>
</ul>
<div class="d-none d-lg-block">
<form class="form-inline">
<div class="input-group input-group-sm mr-sm-2">
<input type="email" class="form-control mr-sm-2" aria-label="Username" type="email" placeholder="Email" aria-label="Email">
<input type="password" class="form-control" aria-label="Password" type="Password" placeholder="Password" aria-label="Password">
</div>
<button class="btn btn-sm btn-success my-2 my-sm-0 mr-sm-2" type="submit">Login/Logout</button>
<button class="btn btn-sm btn-primary my-2 my-sm-0" type="submit">Sign Up</button>
</form>
</div>
<div class="d-block d-lg-none">
<ul class="navbar-nav ">
<li class="nav-item">
<a class="nav-link" href="#">Sign Out/In/Up</a>
</li>
</ul>
</div>
</div>
</nav>
<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/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" 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>
</body>
</html>

I put data-toggle="collapse" and data-target="#collapsibleNavbar" from button to top tag.
Now, it's working. please have a look at it. it's work same as you want
or not.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</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.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark " data-toggle="collapse" data-target="#collapsibleNavbar">
<a class="navbar-brand" href="#">Project</a>
<button class="navbar-toggler bg-dark d-lg-none d-xl-none" type="button" >
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Project 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Project 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Project 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Project 4</a>
</li>
<li class="nav-item ">
<a class="nav-link float-lg-right" href="#">Sign Out/In/Up</a>
</li>
</ul>
</div>
</nav>
</body>
</html>

Show scrollbar in Bootstrap 4 when content goes beyond window

So I'm using the new Bootstrap 4.1 and I'm having trouble with scrollbars not appearing. When the page loads, it isn't big enough to need any scrollbars, but then the user does some searches and when the results show up, the page is bigger than the window. You can scroll, but there is no scrollbar to see. I've tried using overflow-y: scroll, but it doesn't work.
How do I get the page to show scrollbars when the content exceeds the vertical size of the window?
<body>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">BRAND</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" id="searchInput" aria-label="Search">
<div class="dropdown">
<button class="btn btn-outline-info my-2 my-sm-0 dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span id="searchType">All</span>
<span class="caret"></span></button>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Option 1</a>
<a class="dropdown-item" href="#">Option 2</a>
<a class="dropdown-item" href="#">Option 3</a>
</div>
</div>
<button class="btn btn-outline-success my-2 my-sm-0" id="searchButton" type="submit">Search</button>
</form>
</div>
</nav>
<main role="main">
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron JumboHeaderImg">
<div class="container">
<h1 class="display-3">MAIN JUMBOTRON TEXT</span></h1>
<p class="jumboTextStyle">SECONDARY JUMBOTRON TEXT</p>
</div>
</div>
<div class="container">
<div class="row">
<!-- Left Column with navbar search results -->
<div class="col-md-6">
Blah, blah, blah
</div>
<!-- Right column with details of item chosen from left column -->
<div class="col-md-6" id="detailsContainer" style="display:none">
<h2>Details</h2>
<span class="detailsTable"></span>
</div>
</div>
<hr>
</div> <!-- /container -->
</main>
<!-- Custom Script -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
<script src="js/script.js" type="text/javascript"></script>
</body>

OK, so I think this was an issue with the browser/computer. I had an update/shutdown and when I got back into the page, the scrollbars started appearing automatically. I didn't change the code with regard to trying to display scrollbars, but it seems to have solved itself.
Thanks to everyone who looked into this.

Add form to new line in navbar

I am using this code for following things
->add search form to new line in sm or smaller screen sizes
->float right the toggle button in sm or smaller screen sizes
The main issue is that the text input is not expanding when size is changin in the small screen it keep a constant max size of 13rem.
and how to make the toggle button right aligned.
note: float-right is not working
<nav class="navbar navbar-expand-sm justify-content-between navbar-light bg-light d-flex flex-row">
<a class="navbar-brand" href="{{route('homepage')}}">ODekh</a>
<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>
<form method="get" action="{{route('product.search')}}" id="nav-form" class="form-inline">
<div class="input-group mb-3">
<input class="form-control" type="search" placeholder="Search" aria-label="Search" id="search" placeholder="Search Books, Authors" name="search" value="">
<div class="input-group-append border-0 bg-white">
<button class="btn btn-outline-secondary" type="submit"><span class="fa fa-search"></span></button>
</div>
</div>
</form>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="">Books</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Cart</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Login</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="">My Account</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="">Logout</a>
</div>
</li>
</ul>

Below is the fix for your toggle button alignment. It's not entirely clear what you want with the search input though. You want it to expand on smaller screens?? Do you really mean expand and not shrink? (expanding on smaller screens doesn't make any sense to me)
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<nav class="navbar navbar-expand-sm justify-content-between navbar-light bg-light">
<a class="navbar-brand" href="{{route('homepage')}}">ODekh</a>
<form method="get" action="{{route('product.search')}}" id="nav-form" class="form-inline order-sm-12">
<div class="input-group mb-0">
<input class="form-control" type="search" placeholder="Search" aria-label="Search" id="search" placeholder="Search Books, Authors" name="search" value="">
<div class="input-group-append border-0 bg-white">
<button class="btn btn-outline-secondary" type="submit"><span class="fa fa-search"></span></button>
</div>
</div>
</form>
<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 mr-auto">
<li class="nav-item">
<a class="nav-link" href="">Books</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Cart</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Login</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="">My Account</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="">Logout</a>
</div>
</li>
</ul>
</div>
</nav>
<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-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>