Troubleshooting: Bootstrap 4 Flexbox demos failing to function

I am currently in the process of developing a basic Express webserver that serves a landing page constructed with bootstrap. However, I am encountering issues with getting any Flexbox examples to properly function.

Displayed below is my landing page. Is there something that I am overlooking? I have verified that both jQuery and Bootstrap links are operational. Additionally, I have tested the page on Firefox, Chrome, and Edge

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Homepage</title>

    <!-- STYLES -->
    <link rel="stylesheet" href="../public/styleshee/bootstrap.min.css"/>
    <link rel="stylesheet" href="../public/stylesheets/main.css" />

</head>
<body>
    <div class="d-flex justify-content-around">
        <div class="p-2">Flex item 1</div>
        <div class="p-2">Flex item 2</div>
        <div class="p-2">Flex item 3</div>
    </div>

    <button id="test-btn" class="btn btn-success">Button</button>

    <!-- SCRIPTS-->
    <script src="../public/javascripts/jquery.min.js"></script>
    <script src="../public/javascripts/bootstrap.min.js"></script>
    <script src="../public/javascripts/index.js"></script>
</body>
</html>

Attached is a screenshot of the output:

https://i.sstatic.net/LV4Ms.png

Upon observation, it seems that justify-content-around is not functioning as expected. Despite trying various Flexbox classes, the issue persists.

javascripttwitter-bootstrapexpressweb

Answer №1

Could you please verify the version of bootstrap being used in your code?

After testing your code with version 3.xx, I noticed that it generates output as shown in your question. However, when I added bootstrap 4 css, it resulted in a different display (see image below).

Link to view the image

If you prefer the appearance achieved with bootstrap 4, simply include the following script for bootstrap css:

Answer №2

Checking for syntax and grammar spelling should always be the first step!

It appears that your mistake is:

YOU WROTE "styleshee" instead of stylesheeT (or stylesheeTS)

Please review this and inform me of any updates

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

Difficulty in presenting information retrieved from an AJAX JSON parsing operation

Take a look at my code on Codepen: http://codepen.io/dsemel/pen/VamEyE The following section of code is causing some trouble: function success(position){ var WeatherKey = '6068dffce2f44535a07202457162103'; var lat = position.coords.latitude; ...

javascriptjqueryjsonajax

What is the best way to implement data validation for various input fields using JavaScript with a single function?

Users can input 5 numbers into a form, each with the same ID but a different name. I want to validate each input and change the background color based on the number entered - red for 0-5, green for 6-10. I wrote code to change the color for one input box, ...

javascripthtml

I'm feeling lost here - I initiated my server on port 50001, however, my React app seems to be running on port 3000. Could anyone assist me in identifying what might be

This is my unique server mjs file : import Express from "express"; const port = process.env.PORT || 50001; const app = Express(); import path from 'path' app.get('/abc',(req,res) => { console.log("Request IP &quo ...

node.jsreactjsexpressservernode-modules

Combine a JSON object and a JSON array by matching the value of the JSON object to the key of the JSON array

I am looking to create a JSON array in node by combining two JSON objects and arrays. `var template = { "key1": "value1", "key3": "value3", "key4": "value3", "key6": "Dummy Value1" }; var data = [ { "value1": "1", "value2": "2", ...

javascriptjsonnode.js

Shifting the size of a React element with animation

Within my React-based application, I am attempting to execute a basic CSS3 width transition with the following code: .foo { transition: width 1s ease-in-out; } My objective is to apply a style to an element in the React component which is "width: xx% ...

javascriptcssreactjsanimation

What is the process for configuring the zoom control feature?

When utilizing react-google-maps, I am encountering issues with changing the zoom position as per the following code snippet: <GoogleMap defaultZoom={5} defaultCenter={{ lat: 22.845625996700075, lng: 78.9629 }} options={{ gestureHandling:'greedy ...

javascriptreactjsreact-google-maps

Display the JSON data in a table only if the ID is a match

I am working on a table that consists of 5 rows and 2 columns. Each row is assigned an ID ranging from 1 to 5. My goal is to insert JSON data into the table, but only if the ID in the data matches the ID of the corresponding row. If there is no matching I ...

javascriptjqueryjson

The performance of the Ionic app is significantly hindered by lagging issues both on Google

After starting to work with the ionic framework, I noticed a significant change in performance when testing an android app on Chrome for the first time. It was fast and responsive until I added a button that led to a screen with navigation bars, side men ...

javascriptandroidcssangularjsionic-framework

Metero retrieves information from two collections by matching their respective ids

In my database, I have two collections: one contains User Profiles and the other contains User Friends. The User Friends collection has an array called "friends" which stores the friends of a particular user. The relationship between these two collection ...

javascriptmongodbmeteorreactjs

Notify when the button value changes to "submit"

I recently added a jQuery form wizard to my website. I want users to receive an alert in JavaScript when they reach the end of the form. To achieve this, I inserted a simple JavaScript code at the beginning of my page within <head>..some code</hea ...

javascriptjqueryhtml

Problem with MongoDB - increasing number of connections

I have encountered an issue with my current approach to connecting to MongoDB. The method I am using is outlined below: import { Db, MongoClient } from "mongodb"; let cachedConnection: { client: MongoClient; db: Db } | null = null; export asyn ...

javascriptnode.jstypescriptmongodb

Could there possibly exist a counterpart to .cloneNode?

I'm currently working on a recipe website submission form, and I've successfully implemented code that allows me to add more ingredients dynamically. addIngredientsBtn.addEventListener('click', function(){ let newIngredients = ingre ...

javascripthtmlnode.jsejs

Creating a Rest API URL in Vue.js by extracting form values

I just finished coding this Vue component: <template> <div> <h2>Search User By ID</h2> <input v-model="userId" type="number" placeholder="modify me" /> <br /> <p v-if="userId.length != 0"> ...

javascriptrestvue.js

It seems that you're facing an issue with the react-native-git-upgrade tool. The error message

I encountered issues while attempting to upgrade using react-native-git-upgrade. One of the first problems I faced was similar to what was described in https://github.com/facebook/react-native/issues/11578. Unfortunately, none of the solutions mentioned i ...

javascriptgitreact-nativenpmyarnpkg

How can I generate multiple DIV elements within a for loop using JavaScript?

Can a series of unique divs be created using a for loop? for (var i = 0, n = 4; i < n; i++) { var divTag = document.createElement("div"); divTag.id = "div"i; divTag.innerHTML = Date(); document.body.appendChild(divTag); } Is it expected that this scri ...

javascriptajaxdom

Customizing Bootstrap Modal's backdrop CSS for a specific element

Upon opening a bootstrap modal, the background takes on a darker shade as seen here. I am looking to apply a CSS class that mimics this shading effect to a specific element. I prefer not to use any JavaScript for this task as it is purely about styling wi ...

csstwitter-bootstrapbootstrap-modal

One common issue that arises is the failure of a Javascript function to execute when trying to display a div that is initially hidden using the CSS

I have a div on my website that is initially hidden using this css rule: .menu-popup{ display:none; border:1px solid #FFF; padding:8px; width:100%; height:100vh; position:fixed; top:60px; overflow:hidden; } When I click a ...

javascriptjqueryhtmlcss

Exploring the concept of importing components from different pages in NextJS

I'm currently navigating the Next.JS framework and struggling to grasp the concept of importing data from a component page. Let's say I've created a page named example.js in my components folder, where I'm fetching data from an API to d ...

javascriptnext.js

Discovering Request Parameters in Express Node.js

The hashtag key in the URL contains all the query strings. http://localhost:3002/callback#access_token=nQevH_hZSjs3qdOoLNnAIITwqd3lCdkq&expires_in=7200&token_type=Bearer How can we access the parameters after the hashtag? ...

node.jsexpress

ReactJS click event failing to trigger after scrolling on Safari browser

Instead of firing the onClick event and opening another page, when I click on the link it should scroll up to the page... Here is my ReactJs Code: <a href={HELP_URL} className={s.supportLink} target="_blank" rel="noopener noreferrer" ...

javascripthtmlreactjssafari