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>

modal show event is not firing

I have one view in asp.net MVC application, in which i have one table. on each row i have one anchor tag which will open modal window. I have written some code on modal show event. but the event is not firing. my view's layout is coming from custom layout page.following is the code for my view.
#Model
#Imports System.Data
#Code
ViewBag.Title = ViewBag.Title
Layout = "~/Views/Shared/_MyLayout.vbhtml"
End Code
#Section js
<script src="#Session("baseurl")/Scripts/bootstrap.min.js"></script>
<script src="#Session("baseurl")/Scripts/jquery-3.3.1.slim.min.js"></script>
<script src="#Session("baseurl")/Scripts/jquery.min.js"></script>
End Section
#section css
End Section
<script src="#Session("baseurl")/Scripts/jquery-1.12.4.js"></script>
<script src="#Session("baseurl")/Scripts/jquery-ui.js"></script>
<link href="#Session("baseurl")/Styles/jquery-ui.css" rel="stylesheet" />
<link href="#Session("baseurl")/Styles/jquery.dataTables.min.css" rel="stylesheet" />
<script src="#Session("baseurl")/Scripts/jquery.dataTables.min.js"></script>
<form action="#Session("baseurl")/ContainerList/List" method="post">
<div class="row pl-md-1 pb-0">
<div class="col-md-12 pl-1">
<p class="lead" id="heading">#ViewBag.Heading</p>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<div class="alert alert-info form-control" id="infomsg">
<label id="lblInfo" class="fa fa-info-circle">#Session("InfoMsg")</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10 border border-primary pt-2 pb-2">
<div class="row pb-3">
<!--<div class="col-md-2 pt-1">
<label Class="col-form-label">#Session("ContainerNo")</label>
</div>
<div class="col-md-3">
<input type="text" name="containerno" id="containerno" class="form-control form-control-sm font-weight-bold text-uppercase" />
</div>
<div class="col-md-2"></div>-->
<div class="col-md-2">
<label Class="col-form-label">#Session("BOLNumber")</label>
</div>
<div class="col-md-5">
<input type="text" name="bolnumber" class="form-control form-control-sm font-weight-bold text-uppercase" />
</div>
</div>
<div class="row">
#If Session("Lang") = "E" Then
#:<div Class="col-md-2 pr-0">
Else
#:<div Class="col-md-2 pl-0">
End If
<Label Class="col-form-label">#Session("FromRecvdDate")</label>
</div>
<div class="col-md-3">
<div class="inputWithIcon inputIconBg">
<i class="fa fa-calendar fa-lg"></i>
<input class="form-control form-control-sm font-weight-bold readonly" type="text" placeholder="dd/mm/yyyy"
name="fromrecvdate" id="fromrecvdate" style="width:100%" maxlength="12" />
</div>
</div>
<div class="col-md-2"></div>
<div class="col-md-2">
<label Class="col-form-label">#Session("UptoRecvdDate")</label>
</div>
<div class="col-md-3">
<div class="inputWithIcon inputIconBg">
<i class="fa fa-calendar fa-lg"></i>
<input type="text" class="form-control form-control-sm font-weight-bold readonly" placeholder="dd/mm/yyyy"
name="uptorecvdate" id="uptorecvdate" style="width:100%" maxlength="12" />
</div>
</div>
</div>
<div class="row pt-3">
#If Session("Lang") = "E" Then
#:<div Class="col-md-12 text-right">
Else
#:<div Class="col-md-12 text-left">
End If
<button type="submit" name="BtnCntList" class="btn btn-info">
<i class="fa fa-search"></i>
#Session("BtnCntList")
</button>
</div>
</div>
</div>
<div class="col-md-1"></div>
</div>
<div class="row pt-3">
<div class="col-md-12">
#If ViewBag.RowCount > 0 Then
#:<table id="cntlist" class="table-responsive table table-bordered table-hover table-lightfont table-condensed">
#:<thead class="thead-light">
#:<th>#Session("tdcontainerno")</th>
#:<th>#Session("tdbolnumber")</th>
#:<th>#Session("tdarrivaldate")</th>
#:<th>#Session("tdrecvddate")</th>
#:<th>#Session("tdsku")</th>
#:<th>#Session("tdagent")</th>
#:<th>#Session("tdlot")</th>
#:<th>#Session("tdstatus")</th>
#:<th></th>
#:</thead>
#:<tbody>
#For Each row As System.Data.DataRow In Model.Rows
#:<tr>
For Each cell In row.ItemArray
#:<td>#cell.ToString</td>
Next
#:<td><i class="fa fa-file-text-o"></i></td>
#:</tr>
Next
#:</tbody>
#:</table>
End If
</div>
</div>
following is the HTML code for modal
<div id="cntdetail" class="modal show fade" data-backdrop="static" role="dialog">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h6>#Session("CntDetails")</h6>
</div>
<div class="modal-body">
<input type="text" name="containerno" />
<input type="text" name="lot" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">
<i class="fa fa-close"></i>
Close
</button>
</div>
</div>
</div>
</div>
following is the JavaScript for event firing for modal show
<script>
$(function () {
$('#cntdetail').on('show.bs.modal', function (e) {
alert("a");
});
});
</script>

Try activating the modal via javascript using class instead of data-target.
$(".yourModalClassHere").click(() => {
$('#cntdetail').modal('show');
})
$('#cntdetail').on('show.bs.modal', function (e) {
alert("a");
});

How to avoid flex items have same height on collapse

There are some elements that come from array, then I need them to get placed in a list with a diplay flex, my problem is I added a button that should collapse the selected one but others get their height modified aswell...
Have tryed with diferent display and placing inline on li elements but nothing works.
Any way to have elements in a list inline and heigh independant?
.dragscroll {
display: flex;
overflow-x: auto;
}
.rectangle-holder {
border: 1px solid black;
}
ul {
list-style-type: none;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<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>
<div class="container-fluid p-0">
<div class="row">
<div class="col-12">
<ul class="dragscroll">
<li class="rectangle-holder">
<div class="row">
<div class="col-12">
<p>Hello</p>
</div>
<div class="col-12">
<button class="btn btn-primary" data-target="#comment1" data-toggle="collapse" type="button">Collapse</button>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="collapse" id="comment1">
<p>Collapsable!</p>
</div>
</div>
</div>
</li>
<li class="rectangle-holder">
<div class="row">
<div class="col-12">
<p>Hello</p>
</div>
<div class="col-12">
<button class="btn btn-primary" data-target="#comment2" data-toggle="collapse" type="button">Collapse</button>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="collapse" id="comment2">
<p>Collapsable!</p>
</div>
</div>
</div>
</li>
<li class="rectangle-holder">
<div class="row">
<div class="col-12">
<p>Hello</p>
</div>
<div class="col-12">
<button class="btn btn-primary" data-target="#comment3" data-toggle="collapse" type="button">Collapse</button>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="collapse" id="comment3">
<p>Collapsable!</p>
</div>
</div>
</div>
</li>
<li class="rectangle-holder">
<div class="row">
<div class="col-12">
<p>Hello</p>
</div>
<div class="col-12">
<button class="btn btn-primary" data-target="#comment4" data-toggle="collapse" type="button">Collapse</button>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="collapse" id="comment4">
<p>Collapsable!</p>
</div>
</div>
</div>
</li>
<li class="rectangle-holder">
<div class="row">
<div class="col-12">
<p>Hello</p>
</div>
<div class="col-12">
<button class="btn btn-primary" data-target="#comment5" data-toggle="collapse" type="button">Collapse</button>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="collapse" id="comment5">
<p>Collapsable!</p>
</div>
</div>
</div>
</li>
<li class="rectangle-holder">
<div class="row">
<div class="col-12">
<p>Hello</p>
</div>
<div class="col-12">
<button class="btn btn-primary" data-target="#comment6" data-toggle="collapse" type="button">Collapse</button>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="collapse" id="comment6">
<p>Collapsable!</p>
</div>
</div>
</div>
</li>
<li class="rectangle-holder">
<div class="row">
<div class="col-12">
<p>Hello</p>
</div>
<div class="col-12">
<button class="btn btn-primary" data-target="#comment7" data-toggle="collapse" type="button">Collapse</button>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="collapse" id="comment7">
<p>Collapsable!</p>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" 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>
</html>

You need to add css property align-items: flex-start;.
It defines the default behaviour for how flex items are laid out along the cross axis on the current line. And flex-start set cross-start margin edge of the items is placed on the cross-start line.
.dragscroll {
display: flex;
overflow-x: auto;
align-items: flex-start;
}

Why does my bootstrap button overlap when window is resized smaller

I am trying to have my buttons be beside each other at all display sizes.However when I make my window smaller, they overlap each other as shown in the jsfiddle.
I have tried using col-xs-offset and col-xs-push but it affects my col-md and col-lg settings for some reason, I have checked my bootstrap and html but there doesn't appear to be any issues there.
How can I fix this?
JSFiddle:
https://jsfiddle.net/whywymam/2u79tpp2/1/
HTML:
<div class="container">
<div class="row upperRow">
<nav class="nav logoFw">
<div class="col-xs-6 col-sm-4 col-md-4 col-lg-4">
<img src="../image/logo.jpg" class="img-responsive" alt="logo">
</div>
</nav>
<ul class="nav navbar-nav navbar-right">
<li>
<div class="col-xs-3 col-sm-4 col-md-4 col-lg-4">
<a href="../jobseeker/signupLogin.php" class="btn btn-danger" role="button">
<i class="glyphicon glyphicon-user"></i>Job Seeker
</a>
</div>
</li>
<li>
<div class="col-xs-3 col-md-4 col-lg-4">
<a href="../employer/signupLoginEmp.php" class="btn btn-danger" role="button">
<i class="glyphicon glyphicon-user"></i><i class="glyphicon glyphicon-user"></i>Employer
</a>
</div>
</li>
</ul>
</div>
<div class="clearfix visible-xs-block visible-md-block visible-sm-block visible-lg-block"></div>
<div class="row bottomRow">
<div class="col-sm-12 col-md-12 col-lg-12">
<nav role="navigation" class="navbar-inner navbar-default navbar-static-top navcolor">
<div class="navbar-header ">
<!--button to appear when display is on mobile device-->
<button type="button" data-target="#nav-collapse" data-toggle="collapse" class="navbar-toggle">
<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="nav-collapse" class="collapse navbar-collapse topmenu">
<ul class="nav navbar-nav center-block">
<li>Home</li>
<li>About</li>
<li>Job</li>
<li>Resources</li>
</ul>
</div>
</nav> <!-- end navbar-inner navbar-default navbar-static-top navcolor -->
</div>
</div> <!-- end middle row -->
<!--to indicate which page user is on -->
</div><!-- end container -->

You may want to remove the unordered list that is containing your buttons and instead use a button group:
http://getbootstrap.com/components/#btn-groups
Also, since button groups make the buttons flush to each other, use some CSS to override their margins.
JS Fiddle:
https://jsfiddle.net/1dwq7bqx/
CSS
.btn-group button { margin: 0 7px; }
HTML
<div class="container">
<div class="row">
<div class="col-md-4 text-left">
<img src="logo.jpg" class="img-responsive" alt="logo" />
</div>
<div class="col-md-8 text-right">
<div class="btn-group" role="group">
<button type="button" class="btn btn-danger"><i class="glyphicon glyphicon-user"></i> Job Seekers</button>
<button type="button" class="btn btn-danger"><i class="glyphicon glyphicon-user"></i><i class="glyphicon glyphicon-user"></i> Employers</button>
</div>
</div>
</div>
</div>

Bootstrap toggle is not working?

I have bootstrap tabs implementation when i click on title its not toggling and also when i click on tabs its redirecting to home page its not going into panel body , I spent alot of time but could not figure out the issue. Any help will be appreciated.
So far tried code....
HTML
<div class="panel panel-default">
<div class="panel-body" collapse="isCollapsed">
<accordion close-others="false">
<accordion-group heading="Process Rating" is-open="status.isMetricBaseOpen">
<accordion-heading>
<small>Process Rating <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.isMetricBaseOpen, 'glyphicon-chevron-right': !status.isMetricBaseOpen}"></i></small>
</accordion-heading>
<!-- Process edit mode -->
<ul class="nav nav-tabs" role="tablist" id="myTab">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Line of Business
Ratings</a></li>
<li role="presentation">Compliance Ratings</li>
</ul>
<div class="row tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<form class="form-horizontal" role="form">
<div class="form-group">
<div class="col-md-11">
<button require-control-point="PROCESS_RATING_ADD"
class="btn btn-default pull-right " type="button"
ng-click="gotoQstnPage(1)" ng-disabled="disableRiskRatingBtn">Create
Inherent Risk Rating</button>
</div>
</div>
<strong>Inherent Risk Ratings</strong>
<div kendo-grid="ihtRskRatingGrid"
options="ihtRskRatingGridOptions"></div>
<br /> <strong>Process Ratings</strong>
<div kendo-grid="processRatingGrid"
options="processRatingGridOptions">
<div kendo-window="ProcessRatingWin" options="PrtWinOptions"></div>
</div>
</form>
</div>
<div role="tabpanel" class="tab-pane" id="profile">THis is compliance </div>
</div>
</accordion-group>
</div>

Make sure you have embeded javascript and jquery at the end of the page,
Jquery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
Javascript
<script src="js/bootstrap.min.js"></script>
Or See below your code is working
<!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">
<title>Bootstrap Template</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="panel-group" id="accordion" >
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse"
href="" data-target="#collapseProcessRating">Process Rating</a>
</h4>
</div>
<!-- Process edit mode -->
<div id="collapseProcessRating" class="panel-collapse collapse in">
<div class="panel-body">
<ul class="nav nav-tabs" role="tablist" id="myTab">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Line of Business
Ratings</a></li>
<li role="presentation">Compliance Ratings</li>
</ul>
<div class="row tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<form class="form-horizontal" role="form">
<div class="form-group">
<div class="col-md-11">
<button require-control-point="PROCESS_RATING_ADD"
class="btn btn-default pull-right " type="button"
ng-click="gotoQstnPage(1)" ng-disabled="disableRiskRatingBtn">Create
Inherent Risk Rating</button>
</div>
</div>
<strong>Inherent Risk Ratings</strong>
<div kendo-grid="ihtRskRatingGrid"
options="ihtRskRatingGridOptions"></div>
<br /> <strong>Process Ratings</strong>
<div kendo-grid="processRatingGrid"
options="processRatingGridOptions">
<div kendo-window="ProcessRatingWin" options="PrtWinOptions"></div>
</div>
</form>
</div>
<div role="tabpanel" class="tab-pane" id="profile">THis is compliance </div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>