I know this has been asked but I can't fix it based on the answers as I've made the includes found in other threads. My dropdown in bootstrap navbar is not working. I find it very odd as other features like the menu for mobile are working. I will join the code below. Thank You!!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW" />
<META NAME=“Version” CONTENT=“Plano R1” />
<title>Plano</title>
<script src="/scripts/jquery-latest.min.js" type="text/javascript"></script>
<script src="/scripts/jquery.jeditable.js" type="text/javascript"></script>
<script src="/scripts/jquery.jeditable.masked.js" type="text/javascript"></script>
<script src="/scripts/jquery.maskedinput-latest.min.js" type="text/javascript"></script>
<script src="/scripts/jquery.autocomplete.js" type="text/javascript"></script>
<script src="/scripts/date.format.js" type="text/javascript"></script>
<script src="/scripts/jquery.floatThead.js" type="text/javascript"></script>
<script src="/scripts/PatientSearch.js" type="text/javascript"></script>
<script src="/scripts/jquery-ui.js" type="text/javascript"></script>
<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="/css/jquery-ui-latest.css">
<link rel="stylesheet" type="text/css" href="/css/iPad.css">
<link rel="stylesheet" type="text/css" href="/css/cms.v2.css">
<link rel="stylesheet" type="text/css" href="/css/css3-buttons.css">
<link rel="stylesheet" type="text/css" href="/css/patients.css">
<link rel="stylesheet" type="text/css" href="/css/appointments.css">
<link rel="stylesheet" type="text/css" href="/css/jquery.autocomplete.css">
<link rel="stylesheet" type="text/css" href="/css/base/jquery.ui.autocomplete.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="../dist/css/bootstrap.css">
<script src="../dist/js/bootstrap.min.js"></script>
</head>
<body>
<header class="noPrint">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand plano"> Plano </a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav" role="navigation">
<li><span class="icon icon33"></span><span class="">Agenda</span></li>
<li class="dropdown">
Répertoires<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Fournisseurs</li>
<li>Patients</li>
<li>Professionels</li>
</ul>
</li>
<li><span class="icon icon120">Tâches</li>
<li><span class="icon icon96">Réglages</li>
<li>Disponibilités</li>
<li><span class="icon icon3">Patient</li>
<li><span class="icon icon151">Déconnexion</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" id="searchboxappointment" name="searchboxappointment" placeholder="Rechercher un patient" class="form-control searchboxappointment searchengine " size="35" value="<?php echo isset($_POST['searchboxappointment']) ? $_POST['searchboxappointment'] : "";?>" />
</div>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header
Your loading 2 versions of jQuery. Get rid of the 1.11.0 version.
<script src="/scripts/jquery-latest.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
I added your code to a codepen. HERE li It seems to be working for me. Perhaps your problem is somewhere else.
Have you checked if those CDN resources are actually providing you with their libraries or even connecting online with your site? Are working off your server in offline mode? If you are, the CDN references will not connect.
I would save those CDN references inside your root. They are great for testing purposes, but they are not meant to be permanent resources. If their server goes down, so will your site. Not to mention, you can't modify the code in them, should you needed to do so.
Related
So, my navbar is saved as a partial in a fairly straightforward express app. I have the navbar also included in a boilerplate wrapper which is being used on most pages, like so:
<h1>HELLO<h1>
and in the boilerplate file I have
<%- include("../partials/navbar")%>
The problem is that the navbar shows up but the two .svg images don't show on certain pages, which to my eye are using the exact same format. Does anyone have any ideas what the problem might be?
Also, please let me know if I can clarify anything - I'm quite fresh to coding so I'm a bit limited in my vocabulary.
Thanks in advance!
EDIT(nowhere near enough infomation, sorry):
here is the code for navbar partial:
<nav class="navbar navbar-expand-md sticky-top navbar-dark">
<img class="brand" src="logo.svg" alt="" />
<div class="container-fluid">
<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">
<div class="navbar-nav">
<a class="nav-link ms-3" href="/events">Upcoming Events</a>
<a class="nav-link ms-3" href="/events/new">New Event</a>
<a class="nav-link ms-3" href="/community">Community</a>
</div>
<div class="navbar-nav ml-auto rightLinks" id="navbarSupportedContent">
<% if(!currentUser) { %>
<p><%= currentUser %></p>
<a class="nav-link" href="/login">Login</a>
<a class="nav-link" href="/register">Register</a>
<% } else { %>
<a class="nav-link" href="/logout">Logout</a>
<p class="nav-link">
<%=currentUser.username %><img class="profileIcon" src="profile.svg"></img>
</p>
<% } %>
</div>
</div>
</div>
</nav>
and here is the boilerplate:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/style2.css" />
<link rel="icon" href="/favicon.ico" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Anton&display=swap"
rel="stylesheet"
/>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap"
rel="stylesheet"
/>
<script src="https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.js"></script>
<link
href="https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.css"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
<title>Street Music</title>
</head>
<body class="flex-column">
<%- include("../partials/navbar")%>
<main class="containter vw-100"><%- body %></main>
<script src="https://cdn.jsdelivr.net/npm/bs-custom-file-input/dist/bs-custom-file-input.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.0/axios.js"></script>
<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>
<!-- <script src="/javascripts/validateForms.js"></script> -->
</body>
</html>
Maybe I should mention that the pages in which the images show up are in the same directory, and the images themselves are in public.
Each file begins with <% layout("layouts/boilerplate") %> but it only displays the images on certain pages.
first:-
img tag doesn`t have a closed tag so this is wrong
<img class="profileIcon" src="profile.svg"></img>
you should delete the closed tag to be like that
<img class="profileIcon" src="profile.svg">
second:-
you mentioned that the images is in anther directory and you didn`t route them in src
src="profile.svg"
to make the route correctly there is two ways :-
first :-
src="../public/profile.svg"
second:-
if you use express ,you can do static file to your public file in server.js like so
app.use(express.static('public'))
and then you can route directly to the public directory
src="./public/profile.svg"
Layout view not shared across other views
Currently my home page and other main pages share the view of my layout however the other pages such as the login page share the view but with no styling or images. Also my main pages such as about for example all the crud features like delete also remove styling, anyone know how to link this all together?
Actual View of login page and Home Page
Login.cshtml
#page
#model LoginModel
#{
ViewData["Title"] = "Log in";
}
<h2>#ViewData["Title"]</h2>
<div class="row">
<div class="col-md-4">
<section>
<form method="post">
<h4>Use a local account to log in.</h4>
<hr />
<div asp-validation-summary="All" class="text-danger"></div>
<div class="form-group">
<label asp-for="Input.Email"></label>
<input asp-for="Input.Email" class="form-control" />
<span asp-validation-for="Input.Email" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Input.Password"></label>
<input asp-for="Input.Password" class="form-control" />
<span asp-validation-for="Input.Password" class="text-danger"></span>
</div>
<div class="form-group">
<div class="checkbox">
<label asp-for="Input.RememberMe">
<input asp-for="Input.RememberMe" />
#Html.DisplayNameFor(m => m.Input.RememberMe)
</label>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">Log in</button>
</div>
<div class="form-group">
<p>
<a asp-page="./ForgotPassword">Forgot your password?</a>
</p>
<p>
<a asp-page="./Register" asp-route-returnUrl="#Model.ReturnUrl">Register as a new user</a>
</p>
</div>
</form>
</section>
</div>
</div>
#section Scripts {
<partial name="_ValidationScriptsPartial" />
}
Layout.cshtml
<!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">
<meta name="description" content="">
<meta name="author" content="">
<title>Clean Blog</title>
<!-- Bootstrap Core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Theme CSS -->
<link href="css/clean-blog.min.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-default navbar-custom navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
Menu <i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="index.html">Start Bootstrap</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
Home
</li>
<li>
About
</li>
<li>
Sample Post
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Page Header -->
<!-- Set your background image for this header on the line below. -->
<header class="intro-header" style="background-image: url('img/home-bg.jpg')">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<div class="site-heading">
<h1>Clean Blog</h1>
<hr class="small">
<span class="subheading">A Clean Blog Theme by Start Bootstrap</span>
</div>
</div>
</div>
</div>
</header>
<!-- jQuery -->
<script src="vendor/jquery/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- Contact Form JavaScript -->
<script src="js/jqBootstrapValidation.js"></script>
<script src="js/contact_me.js"></script>
<!-- Theme JavaScript -->
<script src="js/clean-blog.min.js"></script>
</body>
</html>
In your Layout.cshtml the path to the css files are relative.
Change them to absolute (by adding a leading / to the CSS paths) and it should work.
The problem is that the main page is on /, so the CSS directory is /css.
However other pages might be at /Account/Login, so the CSS directory would be /Account/Login/css (which is wrong)
Assuming that the folders /css and /vendor are correct:
<!-- Bootstrap Core CSS -->
<link href="~/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Theme CSS -->
<link href="~/css/clean-blog.min.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="~/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
the same applies to the JS scripts at the end:
<!-- Bootstrap Core JavaScript -->
<script src="~/vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- Contact Form JavaScript -->
<script src="~/js/jqBootstrapValidation.js"></script>
<script src="~/js/contact_me.js"></script>
<!-- Theme JavaScript -->
<script src="~/js/clean-blog.min.js"></script>
I have the following image tag that I am trying to add to my site.
<a href="#Url.Action("Index", "core")" class="navbar-brand">
<img src="~/images/core.png" title="core" alt="additional title" />
</a>
I've tried to add this tag in both head as well as body tags of my _Layout.cshtml page and it ends up just below the header.Where should I add the tag so that it appears at the top left corner of the site?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - core</title>
<environment names="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
</environment>
<environment names="Staging,Production">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>
#Html.ApplicationInsightsJavaScript(TelemetryConfiguration)
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a asp-area="" asp-controller="core" asp-action="Index" class="navbar-brand">core</a>
</div>
<div class="navbar-collapse collapse">
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© 2017 - core Inc. - core</p>
</footer>
</div>
<environment names="Development">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
</environment>
<environment names="Staging,Production">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery">
</script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/bootstrap.min.js"
asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal">
</script>
<script src="~/js/site.min.js" asp-append-version="true"></script>
</environment>
#RenderSection("scripts", required: false)
</body>
</html>
In the body but this would place the logo below the head.
<body>
<a href="#Url.Action("Index", "core")" class="navbar-brand">
<img src="~/images/core.png" title="core" alt="additional title" />
</a>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
.
.
.
I figured it out myself.It needs to go inside the <div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar navbar-inverse navbar-fixed-top">
<a href="#Url.Action("Index", "core")" class="navbar-brand">
<img src="~/images/core.png" title="core" alt="" />
</a>
<div class="container">
<div class="navbar-header">
try:
position:relative
top: (add here the amount of pixels)
another option is to use
position: absolute and change the logo's place, you may also send me a private msg and I'll try to help you more with more code/direct link to your site
I need to reuse the boostrap navbar on all pages so I been trying to have a single file for the menu and render it using a ng-include angularJS tag
The menu is this file /partials/top_menu.html
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">EXAMPLE</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
Quienes Somos
</li>
<li>
Organización
</li>
<li>
Servicios
</li>
<li>
Clientes
</li>
<li>
Galeria
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
And here is the index.html that tries to include that partial as the navigation menu of the page
<!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">
<meta name="description" content="">
<meta name="author" content="">
<title>TITLE</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/modern-business.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
<div ng-include="'partials/top_menu.html'"></div>
</nav>
<body>
The problem is that the menu bar is not being render at all and the WebDeveloper console does not show any error or file missing
What am I doing wrong or if this is the wrong aproach to do it let me know can I achieve it
You need to add the ng-app to the body tag of your index.html
<body ng-app>
This is AngularJS bootstraping directive. Without this, the AngularJS process does not start.
And you need to do that for any html file that needs to use angularJS directives
Use this script may be it help you :
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#includedContent").load("b.html");
});
</script>
</head>
<body>
<div id="includedContent"></div>
</body>
</html>
Must include Jquery file.
I'm new to bootstrap, i'm working with the last version. I want to do a simple site, to get to know bootstrap, but already have a problem, that I can't solve. The navbar and the icon appears to be ok, but when I click, nothing happend. I have put my complete code bellow.
<!-- <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Getting started with Bootstrap</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">
<script src="js/bootstrap.js"></script>
</head>
<body>-->
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- Be sure to leave the brand out there if you want it shown -->
<a class="brand" href="#">Site name</a>
<!-- Everything you want hidden at 940px or less, place within here -->
<nav class="nav-collapse collapse">
<!-- .nav, .navbar-search, .navbar-form, etc -->
<ul class="nav">
<li class="active">Home</li>
<li>Link</li>
<li>Link</li>
</ul>
</nav>
</div>
</div>
</div>
I am somewhat new to using Bootstrap as well and I think I may have found some answer to your problem. It looks like you downloaded all the libraries but you may not have included all the jquery, JS, and Popper.js links in your head.
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<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>
It happened to me too because I didn't link all the libraries. So check to see if there aren't any libraries you didn't refer to in your head.
PS: Sorry I don't use the downloaded version of the libraries so I can't tell you specifically which files and libraries to select.
Hope it helps still ;)