We Keep Coding

Bootstrap's v4.5 checkbox cannot be aligned Horizontally or Vertically when next to an input

just like the title says: Bootstrap's checkbox cannot be aligned Horizontally or Vertically when next to an input.
Problem Rendering:
I have tried the following with no good results that code Snippet.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<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://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
<div class="container mt-5">
<form>
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-4">
<input type="email" class="form-control" id="inputEmail3">
</div>
<div class="col-sm-2">Checkbox</div>
<div class="col-sm-4">
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="gridCheck1">
<label class="form-check-label" for="gridCheck1">
Ex
</label>
</div>
</div>
</div>
</form>
</div>

If you add the class "align-items-center" to your form-group the checkbox will be aligned vertically.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<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://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
<div class="container mt-5">
<form>
<div class="form-group row align-items-center">
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-4">
<input type="email" class="form-control" id="inputEmail3">
</div>
<div class="col-sm-2">Checkbox</div>
<div class="col-sm-4">
<div class="form-check orm-check-inline">
<input class="form-check-input" type="checkbox" id="gridCheck1">
<label class="form-check-label" for="gridCheck1">
Example checkbox
</label>
</div>
</div>
</div>
</form>
</div>

Date time pciker doesn't works

I'm trying to add a date time picker to an input in a modal, but for some reason, I can't, when I make click in the input it doesn't display, I don't have an idea why but I need it for a better UX/UI in the modal, something that I try was change the id to the divs but it didn't work.
I'm leaving my code.
Modal
<!-- Modal newevent-->
<div class="container">
<div class="modal fade " id="newevent">
<div class="modal-dialog modal-lg mw-80 ">
<div class="modal-content border-0 rounded">
<div class="modal-body mr-4 ml-4 pr-2 pl-2">
<form action="./plugins/login/php/completedetails" class="" method="POST">
<div class="form-group ">
<input maxlength="30" class="form-control-plaintext" type="text" name="name" placeholder="Nueva Tarea" id="name" />
</div>
<div class="form-group row">
<label for="inputPassword" class="col-sm-4 col-form-label"><i class="fas fa-user mr-3 text-primary"></i>Responsable</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="inputPassword">
</div>
</div>
<div class="form-group row">
<label for="inputPassword" class="col-sm-4 col-form-label"><i class="fas fa-stream mr-3 text-primary"></i>Estado</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="inputPassword">
</div>
</div>
<div class="form-group row">
<label class="col-sm-4 col-form-label"><i class="fas fa-calendar-day mr-3 text-primary"></i>Fecha de entrega</label>
<div class="col-sm-8 input-group">
<input type="text" id="datetimepicker-default" class="form-control">
</div>
</div>
<div class="form-group row">
<label for="inputPassword" class="col-sm-4 col-form-label"><i class="fas fa-stopwatch mr-3 text-primary"></i>Tiempo estimado</label>
<div class="input-group mb-3 col-sm-8">
<input type="number" class="form-control" aria-label="Amount (to the nearest dollar)">
<div class="input-group-append">
<span class="input-group-text">h</span>
</div>
</div>
</div>
</div>
<div class="form-group col-md-12">
<label for="inputPassword4">Descripción</label>
<textarea class="form-control" rows="5" id="comment" placeholder="Añade detalles"></textarea>
</div>
</div>
</form>
</div>
</div>
</div>
Scripts and stylesheets
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- ELemeentos añadidos para el datepicker -->
<!-- jquery JS -->
<script
type="text/javascript"
src="https://code.jquery.com/jquery-3.3.1.min.js"
></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<!-- Bootstrap js -->
<script
type="text/javascript"
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
></script>
<!-- Propeller textfield js -->
<script type="text/javascript" src="dist/js/propeller.min.js"></script>
<!-- Datepicker moment with locales -->
<script
type="text/javascript"
language="javascript"
src="datetimepicker/js/moment-with-locales.js"
></script>
<!-- Propeller Bootstrap datetimepicker -->
<script
type="text/javascript"
language="javascript"
src="datetimepicker/js/bootstrap-datetimepicker.js"
></script>
<script>
// Default date and time picker
$("#datetimepicker-default").datetimepicker();
</script>

I think datetimepicker init success before html render
check state html create after script
try $(document).ready(function(){$("#datetimepicker-default").datetimepicker();
});

bootstrap thumbnail appearing without border

i'm including bootstrap in my project:
<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>
and i'm just taking this code from their website:
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p>Button Button</p>
</div>
</div>
</div>
</div>
i'm not sure why, but i'm getting the thumbnail without the border unlike in their website.
thanks.

If you can change bootstrap css version. Use
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Use Class For Eonasdan Datetimepicker

How to use class fo Eonasdan datetimepicker instead of using ID to enable the picker. And try to enable all having the same class use Eonasdan datetimepicker.
JSFIDDLE : https://jsfiddle.net/aice09/cdaw62jz/
$(function() {
$('#enablepicker').datetimepicker();
});
<!--JQUERY-->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<!--Bootstrap 3.3.7-->
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!--Font-awesome 4.7.0-->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!--Date Timepicker-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date enablepicker' id='datetimepicker1'>
<input type='text' class="form-control" placeholder="Datetimepicker 1"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date enablepicker' id='datetimepicker2'>
<input type='text' class="form-control" placeholder="Datetimepicker 2" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>

jQuery code not working on Browser

I am facing a problem that: I have some JQuery code in my HTML View that works fine on my Google Chrome Browser but on another machine(server) Google Chrome the same code if Published on iiS, jQuery stops working.
jS is enabled in Browser but why is this jQuery code not being picked ? Please advise.
Error in SOURCE HTML while ALL JS/jQuery files arre added in path:
#{
ViewBag.Title = "Show";
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
#*<meta http-equiv="Refresh" content="5">*#
<title>Wallboard B</title>
<link type="text/css" rel="stylesheet" href="~/cssNew/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="~/cssNew/style.css">
<link rel="icon" type="image/png" href="images/favicon.png">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<span id="View1">
<section class="gage-wrap">
<div class="container-fluid stretch">
<div class="row no-gutter">
<div class="col-lg-3">
<div class="row no-gutter">
<!----- Avg Handle Meter ------>
<div class="col-lg-12 gage">
<h1>Avg Handle Time (Sec)</h1>
<canvas id="avg_handle_meter" width="285" height="170">
Canvas not available.
</canvas>
<span id="avg_handle_value">#ViewBag.averageHandleTime</span> <!---Print Speed -->
</div>
<!----- Avg Handle Meter End ------>
<!----- Avg Speed Meter ------>
<div class="col-lg-12 gage">
<h1>Avg Speed of Answer (Sec)</h1>
<canvas id="avg_speed_meter" width="285" height="170">
Canvas not available.
</canvas>
<span id="avg_speed_value">#ViewBag.averageSpeedOfAnswer</span> <!---Print Speed -->
</div>
<!----- Avg Speed Meter End ------>
</div>
</div><!--/col-md-3-->
<div class="col-lg-6">
<div class="row no-gutter">
<!----- Service Level Meter ------>
<div class="col-lg-12 gage">
<h1>Service Level %</h1>
<canvas id="service_level_meter" width="580" height="333">
Canvas not available.
</canvas>
<span id="service_level_value">#ViewBag.serviceLevel</span><!---Print Speed -->
</div>
<!----- Service Level Meter End ------>
<div class="col-lg-12 gage time">
<h1>Longest Call in Queue</h1>
<span>#ViewBag.longestCallInQueue</span>
</div>
</div>
</div><!--/col-md-6-->
<div class="col-lg-3">
<div class="row no-gutter">
<!----- Total Calls Meter ------>
<div class="col-lg-12 gage">
<h1>Total Calls in Queue</h1>
<canvas id="total_calls_meter" width="285" height="170">
Canvas not available.
</canvas>
<span id="total_calls_value">#ViewBag.callsInQueue</span><!---Print Speed -->
</div>
<!----- Total Calls Meter End ------>
<!----- Abandoned Rate Meter ------>
<div class="col-lg-12 gage">
<h1>Abandoned Rate %</h1>
<canvas id="abandoned_rate_meter" width="285" height="170">
Canvas not available.
</canvas>
<span id="abandoned_rate_value">#ViewBag.abandRate</span><!---Print Speed -->
</div>
<!----- Abandoned Rate Meter End ------>
</div>
</div><!--/col-md-3-->
</div><!--/row-->
</div><!--/container-fluid-->
</section><!--/gage-wrap--><!--/gage-wrap-->
<footer style="margin-top:8%">
<p>Powered by Expertflow BI Services</p>
</footer>
#*<script type="text/javascript" src=""></script>*#
</span>
<span id="View2">
<div id="div2">
<header>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>High ARPU - H+HVC</h1>
</div>
</div>
</div>
</header>
<section class="the-table">
<div class="container-fluid">
<div class="row no-gutter row-eq-height">
<div class="col-md-2 col-sm-6">
<em><span>Logged In Agents</span></em>
<span><span>#ViewBag.loggedInAgents</span></span>
</div>
<div class="col-md-2 col-sm-6">
<em><span>On Calls</span></em>
<span><span>#ViewBag.onCalls</span></span>
</div>
<div class="col-md-2 col-sm-6">
<em><span>Agents In Ready</span></em>
<span><span>#ViewBag.agentsInReadyState</span></span>
</div>
<div class="col-md-2 col-sm-6">
<em><span>Agents In Not Ready</span></em>
<span><span>#ViewBag.agentsInNotReadyState</span></span>
</div>
<div class="col-md-2 col-sm-6">
<em><span>Agents In Wrapup</span></em>
<span><span>#ViewBag.agentsInWrapup</span></span>
</div>
<div class="col-md-2 col-sm-6">
<em><span>Reserved Agents</span></em>
<span><span>#ViewBag.reservedAgents</span></span>
</div>
</div><!--/row-->
<div class="row no-gutter">
<div class="col-md-2 col-sm-6">
<em><span>Calls Offered</span></em>
<span><span>#ViewBag.callsOffered</span></span>
</div>
<div class="col-md-2 col-sm-6">
<em><span>Calls Answered</span></em>
<span><span>#ViewBag.callsAnswered</span></span>
</div>
<div class="col-md-2 col-sm-6">
<em><span>Calls Abandoned</span></em>
<span><span>#ViewBag.callsAbandoned</span></span>
</div>
<div class="col-md-2 col-sm-6">
<em><span>Calls In Queue</span></em>
<span><span>#ViewBag.callsInQueue</span></span>
</div>
<div class="col-md-2 col-sm-6">
<em><span>Longest Talk Duration</span></em>
<span><span>#ViewBag.longestTalkDuration</span></span>
</div>
<div class="clearfix visible-xs"></div>
<div class="col-md-2 col-sm-6">
<em><span>Abandoned %</span></em>
<span><span>#ViewBag.AbandRate</span></span>
</div>
</div><!--/row-->
</div><!--/container-fluid-->
</section><!--/the-table-->
<section class="the-table wide">
<div class="container-fluid">
<div class="row no-gutter">
<div class="col-md-12">
<em class="large">Service Level %</em>
<span class="large">#ViewBag.serviceLevel</span>
<div class="clearfix visible-xs"></div>
<em>AHT (Sec)</em>
<span>#ViewBag.averageHandleTime</span>
<em>ASA (Sec)</em>
<span>#ViewBag.averageSpeedOfAnswer</span>
<em>Max Time In Queue</em>
<span>#ViewBag.longestCallInQueue</span>
</div>
</div><!--/row-->
</div><!--/container-fluid-->
</section><!--/the-table-->
<footer>
<p>Powered by Expertflow BI Services</p>
</footer>
</div>
</span>
<script type="text/javascript" src="~/jsNew/bootstrap.min.js"></script>
<script type="text/javascript" src="~/jsNew/service-level-meter.js"> </script>
<script type="text/javascript" src="~/jsNew/avg-handle-meter.js"></script>
<script type="text/javascript" src="~/jsNew/total-calls-meter.js"></script>
<script type="text/javascript" src="~/jsNew/avg-speed-meter.js"></script>
<script type="text/javascript" src="~/jsNew/abandoned-rate-meter.js"></script>
<script type="text/javascript" src="~/js/bootstrap.min.js"></script>
<script type="text/javascript" src="~/js/jquery-latest.min"></script>
<script src="~/js/jquery.min.js"></script>
<script src="~/js/jquery-1.6.2.min.js"></script>
<script src="~/js/jquery-ui-1.8.16.custom.min"></script>
<script>
$(document).ready(function () {
function ToggleFunction() {
$('#View2').hide();
alert("HELLO from VIEW1")
myVar = setTimeout(SecondView, 11000);
}
function SecondView() {
$('#View1').hide();
alert("HELLO from VIEW2")
$('#View2').show();
}
});
</script

Your jquery.min.js put it above all your other js files. Jquery library has to load before the rest of the jquery plugins
<script type="text/javascript" src="~/js/jquery-latest.min"></script> <script src="~/js/jquery.min.js"></script> <script src="~/js/jquery-1.6.2.min.js"></script> <script src="~/js/jquery-ui-1.8.16.custom.min"></script>
Now load the the other js
<script type="text/javascript" src="~/jsNew/bootstrap.min.js"></script> <script type="text/javascript" src="~/jsNew/service-level-meter.js"> </script> <script type="text/javascript" src="~/jsNew/avg-handle-meter.js"></script> <script type="text/javascript" src="~/jsNew/total-calls-meter.js"></script> <script type="text/javascript" src="~/jsNew/avg-speed-meter.js"></script> <script type="text/javascript" src="~/jsNew/abandoned-rate-meter.js"></script> <script type="text/javascript" src="~/js/bootstrap.min.js"></script>