We Keep Coding

Putting the button in the footer area of the modal

Can anyone help me on my problem wherein the two buttons should be on the footer side which is at the bottom side of the modal. Just focus on the two buttons, do not mind the other contents hehe. I did some adjustments of the modal height because I am trying to copy the height of the modal design for us.
Herewith is the attached jfiddle to fully elaborate my problem. Thanks! https://jsfiddle.net/wqj9x0md/
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<button class="btn m-2 btn-primary add-order myBtn">ADD ORDER</button>
<!-- Trigger/Open The Add Order -->
<div id="modal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-body">
<span class="close float-end">×</span></h3>
<form action="" method="">
<div class="row title">
<div class="col">Order</div>
<div class="col">Pieces</div>
<div class="col">Price</div>
</div>
<div class="row add-order-info text-center">
<div class="col">
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
Select...
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Laptop</a></li>
<li><a class="dropdown-item" href="#">Computer</a></li>
<li><a class="dropdown-item" href="#">IPAD</a></li>
</ul>
</div>
</div>
<div class="col">
<input type="text" name="" id="">
</div>
<div class="col">
<input type="text" name="" id="">
</div>
</div>
<div id="formsContainer">
<div style="display: none;" id="form1">
<form action="" method="" id="add-order-form">
<div class="row add-order-info text-center">
<div class="col">
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
Select...
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Laptop</a></li>
<li><a class="dropdown-item" href="#">Computer</a></li>
<li><a class="dropdown-item" href="#">IPAD</a></li>
</ul>
</div>
</div>
<div class="col">
<input type="text" name="" id="">
</div>
<div class="col">
<input type="text" name="" id="">
</div>
</div>
</form>
</div>
</div>
<button type="button" value="Add Child" onclick="addForm();" id="add-button">
&plus;
</button>
<div class="center my-3">
<div class="row fw-bold">
<div class="col-4 total" style="color: #116657;">TOTAL</div>
<div class="col-3">450</div>
</div>
</div>
<div class="d-inline d-flex justify-content-center
align-items-center">
<button class="btn-add-order" type="submit">Add Order</button>
<button class="btn-cancel-order">Cancel</button>
</div>
</form>
</div>
</div>
</div>
<!-- Modal END -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

The div element containing your Add order and Cancel buttons:
<div class="d-inline d-flex justify-content-center align-items-center" ...
Could be positioned absolute since the modal already has position:relative;
So if you style it like this:
position: absolute;
bottom: 1em;
left: 50%;
transform: translate(-50%, 0);
You'll have it centered and with a gap of 1em from its parent bottom border.
BUT...of course I forgot to take into account the fact that position absolute was going to detach the element from the flow and it won't occupy space anymore.
So as you pointed out in comments there's the chance some content will overlap.
There's a solution while still keeping the absolute positioning strategy but I don't like it indeed.
You could put a padding bottom on that containing block, thick as much as the height of your button stripe.
But it's very annoying because you should move the position: relative; to your .modal-content instead of your .modal-body and you should have it styled also with padding-bottom: 4em;
It will work as far as I tried in your jsfiddle but I'm the first one saying there must be a better way.

if you take a look at the code you will see that there is a class called " modal-body" and the content inside of it is the body, if you want to display the buttons in the footer you will have to add a div with class "modal-footer" u can tell that it will display the content in the footer by its name haha
here's the full code of the modal :
<div class="modal-content">
<div class="modal-body">
<span class="close float-end">×</span>
<form action="" method="">
<div class="row title">
<div class="col">Order</div>
<div class="col">Pieces</div>
<div class="col">Price</div>
</div>
<div class="row add-order-info text-center">
<div class="col">
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
Select...
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Laptop</a></li>
<li><a class="dropdown-item" href="#">Computer</a></li>
<li><a class="dropdown-item" href="#">IPAD</a></li>
</ul>
</div>
</div>
<div class="col">
<input type="text" name="" id="">
</div>
<div class="col">
<input type="text" name="" id="">
</div>
</div>
<div id="formsContainer">
<div style="display: none;" id="form1">
<form action="" method="" id="add-order-form">
<div class="row add-order-info text-center">
<div class="col">
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
Select...
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Laptop</a></li>
<li><a class="dropdown-item" href="#">Computer</a></li>
<li><a class="dropdown-item" href="#">IPAD</a></li>
</ul>
</div>
</div>
<div class="col">
<input type="text" name="" id="">
</div>
<div class="col">
<input type="text" name="" id="">
</div>
</div>
</form>
</div>
</div>
<button type="button" value="Add Child" onclick="addForm();" id="add-button">
&plus;
</button>
<div class="center my-3">
<div class="row fw-bold">
<div class="col-4 total" style="color: #116657;">TOTAL</div>
<div class="col-3">450</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<div class="d-inline d-flex justify-content-center
align-items-center">
<button class="btn-add-order" type="submit">Add Order</button>
<button class="btn-cancel-order">Cancel</button>
</div>
</div>

Create popup with bootstrap and javascript

This is cshtml
<a href="#" data-toggle="modal" data-target="#empmodal">
#Html.DisplayFor(model => model.FullName, new { #id = "empName" })
</a>
<div class="ui tiny modal new-employee-modal" id="empmodal">
<div class="ui placeholder">
<div class="header">
<div class="line"></div>
<div class="line"></div>
</div>
<div class="paragraph">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<div class="paragraph">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<div class="paragraph">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<div class="paragraph">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</div>
</div>
this is my js
$('a').click(function (event) {
var url = '#Url.Action("Details")' /*+ input_index*/;
$('.modal.new-employee-modal').modal({
autofocus: false,
onHidden: function () {
$('.modal.new-employee-modal').empty();
$('.modal.new-employee-modal').append(
`<div class="ui placeholder">
<div class="header">
<div class="line"></div>
<div class="line"></div>
</div>
<div class="paragraph">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<div class="paragraph">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<div class="paragraph">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<div class="paragraph">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</div>`)
}
})
.modal('show');
$.get(url).done(function (a) {
$(".modal.new-employee-modal").html(a);
});
});
This is my particalview and pop-up in inside
<div class="modal-title-area">
<div class="modal-name">
#{ ViewBag.Title = "employee details";
}
</div>
<div class="modal-root-page tag-label red"></div>
</div>
<div class="modal-divider"></div>
<div class="modal-content-area">
<div class="box-title"></div>
<div class="two fields">
<div class="field">
<div class="label">#EmployeeCardRes.FirstName</div>
<div class="text">#Model.FirstName</div>
</div>
<div class="field">
<div class="label">#EmployeeCardRes.JobTitle</div>
<div class="text">#ViewBag.JobTitle</div>
</div>
</div>
<div class="two fields">
<div class="field">
<div class="label">#EmployeeCardRes.LastName</div>
<div class="text">#Model.LastName</div>
</div>
<div class="field">
<div class="label">#EmployeeCardRes.PositionCode</div>
<div class="text">#ViewBag.Position</div>
</div>
</div>
<div class="two fields">
<div class="field">
<div class="label">#EmployeeCardRes.BirthDate</div>
<div class="text">#Model.BirthDate</div>
</div>
<div class="field">
<div class="label">#EmployeeCardRes.ClassCode</div>
<div class="text">#ViewBag.Department</div>
</div>
</div>
<div class="two fields">
<div class="field">
<div class="label">#EmployeeCardRes.Gender</div>
<div class="text">#Model.Gender.EnumDisplayNameFor()</div>
</div>
<div class="field">
<div class="label">#EmployeeCardRes.MobilePhoneNo</div>
<div class="text">#Model.MobilePhoneNo</div>
</div>
</div>
<div class="two fields">
<div class="field">
<div class="label">#EmployeeCardRes.CompanyEMail</div>
<div class="text">#Model.CompanyEMail</div>
</div>
<div class="field">
<div class="label">#EmployeeCardRes.FirstEmploymentDate</div>
<div class="text">#Html.DisplayFor(model => model.FirstEmploymentDate)</div>
</div>
</div>
</div>
I try to open popup.When I click on the link, the modal should open and it should fetch the data in the model.I'm not sure what I'm doing wrong in the examples I've looked at it's pretty much done like this.I need to go to the url I gave in javascript and open a partial view from the controller, that is, the last page I threw.
Sorry for my English

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>popup modal</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
<!-- Large modal -->
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#largeModal">Large modal</button>
<div id="largeModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Large Modal</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<p>Add the <code>.modal-lg</code> class on <code>.modal-dialog</code> to create this large modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">OK</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

It is better you insert the complete bootstrap and modal libraries:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
And instead of links, maybe use a <button></button>
or define an onclick event.

Bootstrap - Have items display as block in two column layout rather than split over two columns

I have created a bootstrap accordion like in this snippet and styled it into two columns.
However, when I expand a section I want to try keep each .card as a block so its not expanding over two columns.
Any ideas or suggestions on how I can achieve this would be greatly appreciated.
Adding display:block; to .card has no effect.
#accordion {
column-count: 2;
}
.card {
margin: 0px 20px 20px 20px;
}
<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">
<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>
<div id="accordion">
<div class="card">
<div class="card-header" id="heading1">
<button class="btn" data-toggle="collapse" data-target="#collapse1" aria-expanded="false" aria-controls="collapse1">Heading1</button>
</div>
<div id="collapse1" class="collapse" aria-labelledby="heading1" data-parent="#accordion">
<div class="card-body">
item1
item2
item3
item4
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading2">
<button class="btn" data-toggle="collapse" data-target="#collapse2" aria-expanded="false" aria-controls="collapse2">Heading2</button>
</div>
<div id="collapse2" class="collapse" aria-labelledby="heading2" data-parent="#accordion">
<div class="card-body">
item1
item2
item3
item4
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading3">
<button class="btn" data-toggle="collapse" data-target="#collapse3" aria-expanded="false" aria-controls="collapse3">Heading3</button>
</div>
<div id="collapse3" class="collapse" aria-labelledby="heading3" data-parent="#accordion">
<div class="card-body">
item1
item2
item3
item4
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading4">
<button class="btn" data-toggle="collapse" data-target="#collapse4" aria-expanded="false" aria-controls="collapse4">Heading4</button>
</div>
<div id="collapse4" class="collapse" aria-labelledby="heading4" data-parent="#accordion">
<div class="card-body">
item1
item2
item3
item4
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading5">
<button class="btn" data-toggle="collapse" data-target="#collapse5" aria-expanded="false" aria-controls="collapse5">Heading5</button>
</div>
<div id="collapse5" class="collapse" aria-labelledby="heading5" data-parent="#accordion">
<div class="card-body">
item1
item2
item3
item4
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading6">
<button class="btn" data-toggle="collapse" data-target="#collapse6" aria-expanded="false" aria-controls="collapse6">Heading6</button>
</div>
<div id="collapse6" class="collapse" aria-labelledby="heading6" data-parent="#accordion">
<div class="card-body">
item1
item2
item3
item4
</div>
</div>
</div>
</div>

Reference.
#accordion {
column-count: 2;
}
.card {
margin: 0px 20px 20px 20px;
break-inside: avoid-column;
-webkit-column-break-inside: avoid;
}
<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">
<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>
<div id="accordion">
<div class="card">
<div class="card-header" id="heading1">
<button class="btn" data-toggle="collapse" data-target="#collapse1" aria-expanded="false" aria-controls="collapse1">Heading1</button>
</div>
<div id="collapse1" class="collapse" aria-labelledby="heading1" data-parent="#accordion">
<div class="card-body">
item1
item2
item3
item4
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading2">
<button class="btn" data-toggle="collapse" data-target="#collapse2" aria-expanded="false" aria-controls="collapse2">Heading2</button>
</div>
<div id="collapse2" class="collapse" aria-labelledby="heading2" data-parent="#accordion">
<div class="card-body">
item1
item2
item3
item4
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading3">
<button class="btn" data-toggle="collapse" data-target="#collapse3" aria-expanded="false" aria-controls="collapse3">Heading3</button>
</div>
<div id="collapse3" class="collapse" aria-labelledby="heading3" data-parent="#accordion">
<div class="card-body">
item1
item2
item3
item4
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading4">
<button class="btn" data-toggle="collapse" data-target="#collapse4" aria-expanded="false" aria-controls="collapse4">Heading4</button>
</div>
<div id="collapse4" class="collapse" aria-labelledby="heading4" data-parent="#accordion">
<div class="card-body">
item1
item2
item3
item4
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading5">
<button class="btn" data-toggle="collapse" data-target="#collapse5" aria-expanded="false" aria-controls="collapse5">Heading5</button>
</div>
<div id="collapse5" class="collapse" aria-labelledby="heading5" data-parent="#accordion">
<div class="card-body">
item1
item2
item3
item4
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading6">
<button class="btn" data-toggle="collapse" data-target="#collapse6" aria-expanded="false" aria-controls="collapse6">Heading6</button>
</div>
<div id="collapse6" class="collapse" aria-labelledby="heading6" data-parent="#accordion">
<div class="card-body">
item1
item2
item3
item4
</div>
</div>
</div>
</div>

issues with jquery date dropdown

<!doctype html>
<html>
<head>
<title>title</title>
<link rel="icon" href="img/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/bootstrap.css"/>
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<img src="img/logo.png" id="logo" class="img-responsive">
</div>
<div class="col-md-4" id="searchbox">
<div id="search-input">
<div class="input-group col-md-12">
<input type="text" class="form-control input-lg"/>
</div>
</div>
</div>
<div class="col-md-1" id="search-button">
<span class="input-group-btn">
<button class="btn btn-info btn-lg" type="button">
<img src="img/search.png" class="img-responsive"/>
</button>
<span>
</div>
<div class="col-md-3" id="login-name">
<p> Logged in: John Smith </p>
</div>
<div class="col-md-1">
<img src="img/settings.png" id="settings-icon" class="img-responsive"/>
</div>
</div>
<div class="row">
<!-- Static navbar -->
<nav class="navbar navbar-default navbar-static-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Projects</li>
<li>News</li>
<li>Careers</li>
<li class="active" id="active-link">Contact Us</li>
<li>About Us</li>
<li>Case Studies</li>
<li>Blog</li>
<li>Customers</li>
<li class="dropdown">
<ul class="dropdown-menu">
<li>Home</li>
<li>Projects</li>
<li>News</li>
<li>Careers</li>
<li class="active">Contact Us</li>
<li>About Us</li>
<li>Case Studies</li>
<li>Blog</li>
<li>Customers</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</nav>
</div>
<div class="row" id="banner-top-row">
<div class="col-md-12" id="banner-top-col">
<img src="img/banner-top.png" id="banner-top" class="img-responsive center-block"/>
<div class="banner-information text-center">
<h4> For more information.... </h4>
<h1> Contact Us </h1>
</div>
</div>
<div class="row" id="detail-request">
<div class="col-md-12">
<h1> Send us your details to request our latest brochure <h1>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-4">
<div id="map-holder-image">
<img src="img/map-holder.png" class="img-responsive"/>
</div>
</div>
<form class="form">
<div class="form-group col-xs-4 col-md-4">
<label for="first-name" class="control-label">First Name</label>
<input type="text" class="form-control" id="first-name">
</div>
<div class="form-group col-xs-4 col-md-4">
<label for="email-address" class="control-label">Email</label>
<input type="email" class="form-control" id="email-address">
</div>
<br>
<div class="form-group col-xs-4 col-md-4">
<label for="last-name" class="control-label">Last Name</label>
<input type="text" class="form-control" id="last-name">
</div>
<div class="form-group col-xs-4 col-md-4">
<label for="confirm-email-address" class="control-label">Confirm Email</label>
<input type="email" class="form-control" id="confirm-email-address">
</div>
<div class="form-group col-xs-4 col-md-4">
<input type="hidden" id="date-dropdown">
<script>
$("#date-dropdown").dateDropdowns({
defaultValue: "2010-02-17"
});
</script>
</div>
<div class="form-group col-xs-4 col-md-4">
</div>
<div class="col-md-4">
<button class="btn btn-info btn-lg" id="submit-button" type="button">
<h3>Submit</h3>
</button>
</div>
</form>
</div>
<div class="row">
<div class="col-md-12">
<div class="support-box">
<h3>Start a Live Chat with one of our Tech Team</h3>
<button class="btn btn-info btn-lg" id="support" type="button">
<h3>Start</h3><img src="img/button-icon-livechat.png" id="support-image" class="img-responsive"/>
</button>
</div>
<div class="support-box">
<h3>Start a Skype Call with one of our Sales Team</h3>
<button class="btn btn-info btn-lg" id="support" type="button">
<h3>Start</h3><img src="img/button-icon-skype.png" id="support-image" class="img-responsive"/>
</button>
</div>
<div class="support-box">
<h3>Send an email to our Customer Services Team</h3>
<button class="btn btn-info btn-lg" id="support" type="button">
<h3>Start</h3><img src="img/button-icon-email.png" id="support-image" class="img-responsive"/>
</button>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row" id="banner-bottom-row">
<div class="col-md-12" id="banner-bottom-col">
<img src="img/banner-bottom.png" id="banner-bottom" class="img-responsive center-block"/>
<div class="banner-information text-center">
<h4> We will be in touch </h4>
<h1> Thank you </h1>
</div>
</div>
</div>
<div class="row" id="footer">
<p>Terms and Conditions | Privacy Policy | Copyright Code 2016</p>
<hr id ="footer-line">
</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-date-dropdowns.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>
https://gyazo.com/06ad94c6b0c0b173da9dfd1d95bb02f6 here is my browser loading in the jquery js. My error message is
contact-us.html:121 Uncaught ReferenceError: $ is not defined(anonymous function) # contact-us.html:121

Move the jquery library to the head of your page
<script type="text/javascript" src="js/jquery.min.js"></script>
This should solve it.
The $ is not defined(anonymous function) means jQuery hasn't been loaded yet

Your jQuery selector is incorrect in two ways:
"example1" is looking for an element called <example1>, which of course doesn't exist. To select an element by its id, prepend a # character.
Your element's id is example3.
Try:
$("#example3")

How to make multiple windows draggable by using bootstrap and Draggable.min.js

I am using bootstrap and this library for draggable windows:https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/utils/Draggable.min.js
I can make one window draggable in the page, however, when i toggle multiple windows, only the first window is draggable.
Does anyone have a solution?
Here is the code:
<div class="btn-group">
<label class="btn btn-primary" ng-click="toggleNotebook()">Notebook</label>
<label class="btn btn-primary" ng-click="toggleMissionsDB()">Missions </label>
</div>
<!-- Begin Missions DB -->
<div class="row" ng-show="missionsDBVisible">
<div class="col-md-offset-1 col-md-4 draggable">
<div class = "row">
<div class="window-title">
<!--Nav-->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="missionsdb.html">Missions Database</a>
</div>
</div>
</nav>
</div>
</div>
<div class="row">
<div class="col-md-12 content">
<h4 class="window_note-title">Missions</h4>
<p>Here you will find information on Nasa missions.</p>
</div>
</div>
</div>
</div>
<!-- Begin Notebook -->
<div class="row" ng-show="notebookVisible">
<div class="col-md-offset-1 col-md-4 draggable">
<div class = "row">
<div class="window-title">
<!--Nav-->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
</div>
</div>
</nav>
</div>
</div>
<div class="row">
<div class="col-md-12 content">
<h4 class="window_note-title">notebook</h4>
<p>Notebook</p>
</div>
</div>
</div>
</div>
`