When trying to run the code locally, JS and Bootstrap seem to have trouble functioning together, despite

Check out my codepen project here: https://codepen.io/ldrumsl/pen/ZxdZwa

Below is the JavaScript code:

$('#datetimepicker1').datetimepicker();
$('#datetimepicker2').datetimepicker();

Downloaded index.html file content:

<!DOCTYPE html>
<html lang="en" >

<head>
<meta charset="UTF-8">
<title>A Pen by  L</title>
<script src="https://code.jquery.com/jquery-2.1.0.min.js"
integrity="sha256-8oQ1OnzE2X9v4gpRVRMb1DWHoPHJilbur1LP9ykQ9H0="
crossorigin="anonymous"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" 
href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" 
href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap- 
theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script 
src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> . 
</script>

<link rel='stylesheet prefetch' 
href='https://cdn.rawgit.com/Eonasdan/bootstrapdatetimepicker/ 
a549aa8780dbda16f6cff545aeabc3d71073911e/build/css/bootstrap- 
datetimepicker.css'>



</head>

<body>

<div class="container" style="margin-top: 20vh">

    <div class="row">
        <div class="col-12 text-center" style="height:4em"></div>

        <div class="col-12 text-center" style="font-size: 4em;">
          REQUEST EDIT
        </div>
        <div class="col-12 text-center" style="height:4em"></div>
    </div>


    <div class="form-group row">
      <label for="colFormLabelLg" class="col-sm-2 col-form-label col- form-label-lg">Start Date & Time</label>
        <div class="col-sm-10">
          <div class="form-group">
                <div class="input-group date" id="datetimepicker2">
                    <input type="text" class="form-control" />  <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
                </div>
            </div>
        </div>
    </div>

    <div class="form-group row">
      <label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">End Date & Time</label>
        <div class="col-sm-10">
          <div class="form-group">
                <div class="input-group date" id="datetimepicker1">
                    <input type="text" class="form-control" />  <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
                </div>
            </div>
        </div>
    </div>


    <div class="form-group row">
      <label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Notes / Reason</label>
        <div class="col-sm-10">
          <div class="form-group">
                <div>
                    <input type="text" class="form-control" />  
                </div>
            </div>
        </div>
    </div>

</div>

<div class="row" style="height: 3rem;"></div>

<div class="row" style="height: 3rem;">
  <button type="button" class="btn btn-secondary btn-lg btn-block" style="width: 50%; margin-left: 25%;background-color: grey;">LOGIN</button>
</div>

</body>

</html>

The link above functions as expected online. However, there seems to be an issue when opened locally, resulting in a different display. Here's an image of the local code. Does anyone have insights on troubleshooting this problem? I exported the file directly from codepen without any modifications.

javascriptcssbootstrap-4codepen

Answer №1

To update your local HTML file, make the following changes:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

Don't forget to include https: in the stylesheet URLs.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How do I ensure my object is fully constructed before sending it in the response using NodeJS Express?

Currently, I am in the process of constructing a result_arr made up of location objects to be sent as a response. However, my dilemma lies in figuring out how to send the response only after the entire array has been fully constructed. As it stands, the re ...

javascriptnode.jsexpress

The Highchart column chart is triggering the drilldown event multiple times

I have created a column chart using Highchart and I am facing an issue with the drilldown functionality. Whenever I click on a bar multiple times, the drilldown event triggers multiple times as well. This results in the drilldown event being triggered repe ...

javascriptjqueryangularjshighchartshighcharts-ng

Updating and deleting Firebase data from an HTML table: A guide

I am struggling to make the onClick function work in order to update and delete already retrieved data from an HTML table view. Despite trying different approaches, I can't seem to get it right. var rootRef = firebase.database().ref().child("prod ...

javascripthtmlfirebasefirebase-realtime-database

Adding a <link> tag with a specific onload attribute in the <head> using Next.js

While working on a Next.js project, I am trying to include the following HTML content within the <head>: <link href="..." rel="stylesheet" media="print" onload="this.media='all'" /> The code I ...

javascriptreactjsnext.jsserver-side-renderinghead

What could be the reason my ImageMapster jquery plugin is not functioning in the Power Apps portal's code editor?

I'm attempting to add hover effects to an image map within my Power Apps portal site using the code editor. However, when I include the script: <script type="text/javascript">$('img').mapster();</script> for the desire ...

javascriptjquerypowerappsimagemapimagemapster

Locate an object for editing or adding changes

My scenario involves the existence of an object named productCounts [{provisioned=2.0, product=str1, totalID=1.0}, {product=str2, provisioned=4.0, totalID=3.0}, {provisioned=6.0, product=str3, totalID=5.0}] In addition, there is an array labeled uniqu ...

javascriptjsonforeach

Sending the factory's response back to the controller in AngularJS

I operate a factory that uses an api call to request user data: angular.module('MyApp') .factory('UserApi', function($auth,Account){ return { getProfile: function() { Account.get ...

javascriptangularjs

sending a transformed javascript array from php to a javascript function

I'm looking for a way to pass a JavaScript array (that has been converted from PHP to JS) from PHP code to a JavaScript function. <?php // Convert PHP array to JavaScript array $php_array = array('he','hi','hello'); ...

javascriptphparrays

Interactions between JavaScript and PHP scripts within a web application

THE SCENARIO In the midst of creating a web application that dynamically loads content by fetching data from a MongoDB database where items and their respective authors are stored in separate collections within the same database. The author's ID is s ...

javascriptphpjqueryajaxmongodb

Tips for retrieving the dynamically generated ID within an li tag

I've been diving into the world of JavaScript and jQuery, encountering a few hurdles as I attempt to merge various solutions that I come across. This code represents a mishmash of tutorials I've recently completed. Admittedly, I am quite new to ...

javascriptjquery

Incorrect date being sent by Mat Date picker

I am encountering an issue with date selection using this input field <mat-form-field class="w-full"> <mat-label>{{ "DATE" | translate }}</mat-label> < ...

javascriptangularangularjsangular-materialdatepicker

Establishing a default selection for a react dropdown menu filled with data retrieved from an API request

class Select extends React.PureComponent { constructor(props) { super(props) this.state = { value: this.props.initialValue } this.handleChange = this.handleChange.bind(this) } handleChange(e) { e.persist() ...

javascriptreactjsdrop-down-menurenderdefault

How can you retrieve the current user in express.js when incorporating socket.io?

I have a web app using the express framework and socket.io for real-time chat. I am trying to get the current user's username and create a room with them in it, but I am struggling to retrieve the user info when socket.on('connection') is ca ...

javascriptnode.jssocketsexpresssocket.io

I'm having trouble with my Typescript file in Vscode - every time I try to edit the css code, all the text turns red. Can someone

Check out this visual representation: [1]: https://i.stack.imgur.com/9yXUJ.png Followed by the corresponding code snippet. export const GlobalStyle = createGlobalStyle` html { height: 100%; } body { background-image: url(${BGImage}); ba ...

javascripthtmlcsstypescriptvisual-studio-code

Utilizing a jQuery variable within an .html() method

Can a Jquery if statement be used to display different content inside a div based on a variable? For example, if the variable is set to "cats", the displayed content might say "I like cats", and if it changes to "dogs", it would read "I like dogs". Is this ...

javascriptjqueryhtml

What sets apart the npm packages @types/express and express?

Can't decide whether to use @types/express or express for building a node server? Take a look at the code snippet below: 'use strict'; const express = require('express'); const http = require('http'); const path = requir ...

javascriptnode.jsexpressnpm

Comparing Jquery's smoothscroll feature with dynamic height implementation

Recently I launched my own website and incorporated a smoothscroll script. While everything seems to be working smoothly, I encountered an issue when trying to adjust the height of the header upon clicking on a menu item. My dilemma is as follows: It appe ...

javascriptjqueryhtmlscrollsmoothing

I am unable to apply CSS to style my <div> element

I've run into a snag with my coding project, specifically when attempting to style my div. Here is the code I have so far: All CSS rules are applying correctly except for the .chat rule. Can someone help me figure out what I'm doing wrong? var ...

javascriptjqueryhtmlcss

When the state of the grandparent component is updated, the React list element vanishes in the grandchild component. Caution: It is important for each child in a list to have a unique

In my development project, I've crafted a functional component that is part of the sidebar. This component consists of 3 unique elements. ProductFilters - serves as the primary list component, fetching potential data filters from the server and offer ...

javascriptreactjsmaterial-ui

Can I use javascript/jquery to alter the direction of text in each line?

Looking for assistance with changing text direction on each new line. For instance: text left-to-right text right-to-left text left-to-right text right-to-left... etc. I would like the text direction to change with each word-wrap: break-word. Any help w ...

javascriptjqueryhtmlcsstext