Issues are arising with Bootstrap's functionality within the Vite React app

I am new to working with react and vite. I am currently developing a vite react application that requires the use of bootstrap. I followed the instructions provided on the official Bootstrap website here. However, not all Bootstrap functionalities are working as expected in my app. While buttons function correctly, forms do not work properly. Here is the structure of my project:

my-project/
|── node_modules
├── src/
│   ├── js/
│   │   └── main.js
│   └── scss/
│       └── styles.scss
│   └── index.html
├── package-lock.json
├── package.json
└── vite.config.js

This is my main.js file:

// Import our custom CSS
import "../scss/styles.scss";

// Import all Bootstrap JS
import * as bootstrap from "bootstrap";

This is styles.scss file:

// Import all Bootstrap CSS
@import "~bootstrap/scss/bootstrap";

This is index.html file:

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

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap w/ Vite</title>
</head>

<body>
    <button type="button" class="btn btn-primary">
        Notifications <span class="badge badge-light">4</span>
    </button>
    <script type="module" src="./js/main.js"></script>
</body>

</html>

Finally, this is vite.config.js file:

const path = require("path");

export default {
  root: path.resolve(__dirname, "src"),
  resolve: {
    alias: {
      "~bootstrap": path.resolve(__dirname, "./node_modules/bootstrap"),
    },
  },
  server: {
    port: 8080,
    hot: true,
  },
};

This is my package.json :

{
  "name": "my-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "sass": "^1.61.0",
    "vite": "^4.2.1"
  },
  "dependencies": {
    "@popperjs/core": "^2.11.7",
    "bootstrap": "^5.2.3"
  }
}

The output in the index.html should look like this: https://i.sstatic.net/QMZZ6.png However, in my project, it looks like this: https://i.sstatic.net/zaifL.png

Edit I downgraded my bootstrap version to 4.1.3 but the forms still do not work as expected. Here is the result: https://i.sstatic.net/P0rjp.png Here is the expected result: https://i.sstatic.net/XZIND.png Here is the updated package.json file:

{
  "name": "client",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@popperjs/core": "^2.11.7",
    "bootstrap": "^4.1.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@vitejs/plugin-react": "^3.1.0",
    "sass": "^1.61.0",
    "vite": "^4.2.0"
  }
}

Answer №1

The expected button is part of Bootstrap version 4, but you currently have Bootstrap version 5 installed and it seems to be working correctly.

You should refer to the documentation for Bootstrap version 5 at https://getbootstrap.com/docs/5.3/components/badge/#examples

Alternatively, you can consider switching back to Bootstrap version 4.

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

Erase every picture contained within the element

<div id="uniqueidhere"> <span> <span><img src="image1link"></img></span> <span><img src="image2link"></img></span> <span><img src="image3link"></img></span> <span>&l ...

What is the best method to generate a distinct identifier for individual input fields using either JavaScript or jQuery?

I have attempted to copy the table n number of times using a for loop. Unfortunately, the for loop seems to only work on the first iteration. I am aware that this is due to not having unique IDs assigned to each table. As a beginner, I am unsure how to cre ...

Using NodeJS and Express: redirection fails to load the specified endpoint

My current project involves a simple e-commerce web application running on localhost built with nodejs and express. Admins are required to register in order to gain access to functionalities such as adding, editing, and removing products from the product l ...

Utilize Redux Thunk and the await/async syntax to send out a series of actions, effectively monitoring the loading

Currently, I'm in the process of updating some reducers to track the loading status of axios operations. The majority of my async syntax is written using async/await for better code organization, and I'd like to maintain this structure. I need a ...

Implement user registration and authentication in your application using the powerful combination of React, Redux, and Express

I have a React and Redux application that utilizes Express and MongoDB. My goal is to allow users to register for an account, but I am struggling with how to make React/Redux send data to Express. In the long term, I want to store user account details such ...

Troubleshooting problem with the oninput function of a custom JavaScript element

Assume I have a unique requirement to trigger a function within a custom element. The goal is to update text in the element only when a slider is moved within that specific element. Here's an example implementation in the main.js file: class Oninput ...

Adjusting font size in dynamic containers relatively

Imagine we have a slider named .outer, which adjusts its height based on the width of the viewport. Inside this slider, there is an example slide called .inner that contains some text. However, when we shrink the window width, the content in slide .inner s ...

Using MUI's makeStyles with Props and implementing logic to apply numerous styles

It seems like a simple question, but I just can't find a working answer. I'm passing props to makeStyles in this way. const classes = useStyles({ isActive }); Then, setting up the properties like this. const useStyles = makeStyles((theme) => ...

How to retrieve the current event handler's value with jQuery

To assign an onclick event handler using jQuery, I simply use the following code: $('#id').click(function(){ console.log('click!'); }); Now, my question is how can I retrieve a reference to the function that is currently handling th ...

Retain the user's input in the text box even after the form has been submitted

Currently, I am tackling the challenge of creating a register form with an error handler to manage any mistakes made by users during registration. Once the form is submitted, potential errors are displayed to the user. To enhance user experience, I am ex ...

How to align Font Awesome icons inside `<span>` vertically with each other

Trying to vertically align multiple font awesome icons: ############################# icon icon icon icon icon icon ############################# <div class="announcement-card-body modal-body card border-0"> <span class="info fa fa-info- ...

Conceal the div element if the screen size drops below a certain threshold

Is it possible to hide a div element when the browser width is less than or equal to 1026px using CSS, like this: @media only screen and (min-width: 1140px) {}? If not, what are some alternative solutions? Additional information: When hiding the div eleme ...

Utilizing external clicks with Lit-Elements in your project

Currently, I am working on developing a custom dropdown web component using LitElements. In the process of implementing a feature that closes the dropdown when clicking outside of it, I have encountered some unexpected behavior that is hindering my progres ...

Adjusting Table Width with Bootstrap Styling

https://i.sstatic.net/MIkw0.png Could someone please advise on how to adjust the width of the Bootstrap HTML table above? It appears to be spreading out across the entire browser screen. Thank you. # in this section, I inserted bootstrap into my html tab ...

Creating responsive images in Bootstrap columns

I've found a solution to my issue with large images, but I am still struggling with smaller images not fitting well into larger spaces. Essentially, I created a CMS for a user who required templates with various bootstrap columns as content areas. Cu ...

In HTML, specify that the height of both the `html` and

I am facing an issue with the container-about div. I have set its height to 100% so that the div occupies the entire width and height after the header div. The problem is that currently, I cannot scroll to view the full text. It would be great if there wa ...

The role of form actions in Angular

I'm currently setting up a login feature using angular.js and devise. Below is the code for my form: <form ng-submit="submitLogin(loginForm)" role="form" ng-init="loginForm = {}"> <div class="form-group"> <label for="email ...

Unexpected anomaly with Jquery's after() method

Currently, I am working on the following task: I want to dynamically add a new student to a table of existing students using AJAX when a student is added through my user interface. The process involves sending the UI input fields to the controller, which ...

Combining Angular JS 1 and Laravel 5.2 for seamless integration

Currently, I am in the process of setting up Angular JS 1 with Laravel 5.2 by installing the necessary dependencies using npm. After installation, a node_modules folder was created alongside the app directory. My primary concern is whether it is recommend ...

Decipher intricate JSON with JavaScript

After retrieving a JSON object from Mongo DB, I have this data structure. **JSON** { "_id" : ObjectId("5265347d144bed4968a9629c"), "name" : "ttt", "features" : { "t" : { "visual_feature" : "t", "type_feature" : ...