4,069
questions
0
votes
1
answer
23
views
Combo Box based on React Bootstrap [closed]
I am working on a project that uses React UI Combo Box, however, React UI does not support React 18.
I have reviewed Headless UI and other open source projects but I am afraid that they might become ...
-1
votes
0
answers
13
views
trying to install react-bootstrap in vs code [duplicate]
i get this error when i try to install react-bootstrap: npm : File C:\Program Files\nodejs\npm.ps1 cannot be loaded because running scripts is disabled on this system. For more
information, see ...
0
votes
0
answers
20
views
Cascading menus using Nav
I have a menu defined roughly as follows:
import { Component } from "react";
import { Nav, Navbar, NavDropdown } from "react-bootstrap";
export default class App extends Component ...
0
votes
2
answers
14
views
React-Bootstrap Offcanvas triggering my Navbar.Toggle to open and close my Navbar
I am developing a Navbar using React-Bootstrap that contains a cart-icon button that displays my Offcanvas as a minicart (a cart where you can add items to it throughout the website without having to ...
0
votes
0
answers
15
views
d.jsx is not a function- react production build
React Production Build:
My package.json file
{
"name": "user-dahsboard",
"private": true,
"version": "1.0.0",
"type": "module&...
1
vote
0
answers
30
views
React Bootstrap v2.10.4 Modal Close Button 'X' is not displaying
I have upgraded from react bootstrap 1 to 2. After upgrading close icon X is not showing in Modal header. Its closing the Modal on click but icon is not showing.
<Modal.Header ...
0
votes
1
answer
25
views
react-bootstrap form-control type date initial value not shown
I am using react-bootstrap and set one of the form-control to type="date", but the initial date value is not shown, instead it shown the date format.
This is what I have:
const [startDate, ...
0
votes
0
answers
53
views
Bootstrap components don't appear as expected with React Bootstrap
I'm trying to learn bootstrap (currently using V5.3.3 if that helps, though it looks like I also have react-bootstrap V2.10.4, which is boostrap 5, it appears) but a lot of my code is giving me ...
2
votes
1
answer
60
views
react-bootstrap prevent tooltip hide when mouse cursor is inside tooltip
I'm using react-bootstrap's <OverlayTrigger> and <Tooltip> to show a tooltip with a link in when the user hovers on a disabled button, like this:
<OverlayTrigger
placement=&...
0
votes
0
answers
27
views
I have designed an herosection with reactbootsrap and it's not shwoing in my scren
I've created an hero section ,consisting of a container with two different columns placed it .But this hero section isn't showing on my screen .What could be the problem?
import React from "react&...
0
votes
1
answer
36
views
Displaying cards next to each other in 3,3 grid view and spacing between them
I was creating a movie information design where information about movies is shown in a card design I was trying to create 9 such cards where they are arranged 3 columns per row but it is displaying in ...
0
votes
0
answers
14
views
react-bootstrap Modal Button Not respected
When using modal in Nextjs React-Bootstrap + RTL the button bottom appear on the right and not on the left as it should.
I tried to add the rtl as the doc shows with out luck.
Here is my code example....
0
votes
0
answers
39
views
Copying an HTML styled react-bootstrap element to clipboard with styles intact
Given a simple functional React component with a react-bootstrap Table using the striped property, what options are available to copy the table and all of it's contents, styles intact, to the system ...
2
votes
1
answer
64
views
How to apply Flex Direction in React
I create a sample web Page using Cards in React, I used React Bootstrap for Cards
Here I can't set flex Property.
This is my Component:
import 'bootstrap/dist/css/bootstrap.min.css';
import Card from ...
0
votes
2
answers
38
views
In react-bootstrap, align the link to the right of the screen
I'm currently creating a NavBar component in react, and here's what I have so far:
const NavBar = () => {
return (
<Navbar className="bg-body-tertiary">
<Navbar.Brand ...
0
votes
1
answer
40
views
How to I make the social media icons move from the center to the right while having the logo and pages stay in the center?
I am making a navbar that has my logo and pages in the center and social media icons on the right,
but anything change I've done to the social media nav component never moved them to the right, it ...
0
votes
1
answer
65
views
React bootstrap causes build failed
I'm working on a Nextjs project with React bootstrap. It was working fine until today, somehow all of the React bootstrap components are returning the same error and causing build errors.
'Dropdown....
0
votes
1
answer
48
views
Hydration failure in Next.js while using React Bootstrap Form Component
I am implementing a simple login component using a Form component from react-bootstrap. I keep running into the error: "Error: Hydration failed because the initial UI does not match what was ...
0
votes
0
answers
49
views
trouble updating images in editing user profile [closed]
Basically it is a social media app in which I'm trying to edit user profile pic and cover img by an input form and it is giving errors like not returning data after submitting the form, I'm using ...
0
votes
0
answers
28
views
How to fit a variable number of react-bootstrap accordions to a page correctly
I am trying to make a webpage with react-bootstrap and I made a top bar. Under the top bar I am trying to add some accordions. The number of the accordions will be dynamic because I will get data from ...
0
votes
1
answer
27
views
React-bootstrap how to add custom class/style to .dropdown-menu in NavDropdown
Is there a more direct method besides importing custom css? The current situation is very inconvenient. thanks
<NavDropdown title='nav dropdown' id='basic-nav-dropdown' align='end'>
<...
0
votes
0
answers
27
views
How to change the react-bootstrap dropdown-toggle style inside <NavDropdown>?
I am using Nextjs 14+, react-bootstrap 2.10.2, bootstrap 5
The method I saw online is to go back to bootstrap.css and make changes. Isn’t there a more direct way in react-bootstrap to make changes ...
0
votes
1
answer
30
views
Bootstrap Modal causes useEffect({...}, []) to trigger again
When using the Bootstrap <Modal /> component, when I do callbacks to the parent component, my entrie page rerenders, and triggers my useEffect({...}, [])-Hook, which should only be called once, ...
1
vote
0
answers
38
views
How can you have vertical and horizontal scroll bars stay visible in a table?
I have a React Bootstrap Responsive Table that can end up having many columns, depending on user's actions. In the case where the user chooses enough columns, I want my table to scroll horizontally. ...
0
votes
1
answer
8
views
Expecting React-Bootstrap to operate, instead hidden with no error messages
Expecting React-Bootstrap to operate with Badge and Stack function.
https://react-bootstrap.netlify.app/docs/components/badge/#contextual-variations
React-Bootstrap is installed with correct version ...
0
votes
1
answer
39
views
Why isn't my active condition statement working?
I am having some trouble while creating my pagination page using react-bootstrap. I am trying to apply condition for active but it is not working.
<Pagination.Item
// active={x+1===...
1
vote
1
answer
37
views
Updated total price when buy button is clicked in react.js
I have created a multi-page web application with products avaliable to purchase - as specificed is the task brief. However my Buy button doesn't work as it doesn't store the price of the product to be ...
0
votes
0
answers
79
views
jQuery.Deferred exception: Cannot read properties of undefined (reading 'Button') TypeError
Background -
I am trying to use react inside Spring MVC application and for that I have installed react libs using
npm init -y
npm install react react-dom
npm install webpack webpack-cli webpack-dev-...
0
votes
1
answer
72
views
React-Vite React-Bootstrap build process problem
I'm trying to deploy a react vite application on github pages and during the build process these files are generated...
vite v5.2.11 building for production...
✓ 358 modules transformed.
dist/index....
0
votes
1
answer
80
views
React-Bootstrap Table with "responsive" prop doesn't have scrolling in a Vite project
I am having an issue where my React-Bootstrap Table overflows the viewport when the screen size is smaller than it in the x direction. I have made it into a responsive table using the responsive prop. ...
0
votes
2
answers
812
views
I am facing error while trying to install Bootstrap using npm consecutively three times with the following commands one by one
1.) npm install [email protected]
2.) npm install bootstrap
3.)npm install [email protected] popper.js@^1.12.9 bootstrap
But unfortunately each and every time i have to face the same error
(base) ...
0
votes
0
answers
87
views
some tailwind class not work on production
I'm encountering an issue with Tailwind CSS classes in my React app. Some classes are not working on my production server, but they work perfectly fine locally. I've deployed the app on an Nginx ...
0
votes
0
answers
95
views
Running Into Error TS2739 When Working On My Modal Component
Just trying to set up a simple Modal component class to use on a button on my header. You click the button and it calls this component and pulls up a Modal popup. Only issue is my Modal.Header is ...
-1
votes
2
answers
133
views
Warning: validateDOMNesting(...): <div> cannot appear as a child of <tr>warning while using Accordion inside tbody
I am using Accordian from react-bootstrap, I want that the table row can be expanded to view another table, it is working fine but giving me warnings on browser console.
<div className="row me-...
1
vote
2
answers
1k
views
React-bootstrap: WARNING in ./node_modules/@react-aria/ssr/dist/SSRProvider.mjs
I have been working with React-bootstrap for more than a year but recently found this problem: whenever importing a react-bootstrap component, there will be a warning with react-aria (which is a ...
0
votes
1
answer
201
views
Warning in Webpack Build: 'WARNING in ./node_modules/@react-aria/ssr/dist/SSRProvider.mjs' When Importing from react-bootstrap
When I import components from react-bootstrap, I receive the following warning message:
WARNING in ./node_modules/@react-aria/ssr/dist/SSRProvider.mjs
Module Warning (from ./node_modules/source-map-...
0
votes
0
answers
19
views
React-bootstrap web page components width and position not being applied correctly
I am trying to convert an HTML Bootstrap web page into React-Bootstrap web page. Even though I am simply replicating the html page in react, I am not getting the desired results.
App.jsx
function App()...
0
votes
0
answers
35
views
React Bootstrap - display 2.5 items visible at a time
I am using React Bootstrap's Carousel component in my NextJS project. Right now everything works except the fact that in mobile, am displaying only one slide at a time.
But i am trying to improve the ...
0
votes
0
answers
104
views
Multilevel dropdown in react-bootstrap , nested dropdown in react-bootstrap library
i want to achieve multilevel dropdown in react with react-bootstrap or nested dropdown with react-bootstrap. can anyone know how can we achieve multilevel dropdown with react-bootstrap or is there any ...
1
vote
0
answers
409
views
Why do we get an error in Next.js when using React-bootstrap Card without including 'use client'?
when I use the react-bootstrap Card element in a next.js project, I get
"Unhandled Runtime Error Error:* Could not find the module "C:\my-project\node_modules\react-bootstrap\esm\Card.js#...
0
votes
0
answers
135
views
how to disable the enforceFocus property applied by bootstrap modal
I have a Chrome extension that injects and opens a modal on other websites, the modal of my chrome extension is made using pure HTML, CSS, and JavaScript. When my extension opens modal on a website ...
1
vote
1
answer
83
views
Vertical scroll bar in react-bootstrap Accordion Body is not clickable
I am using the react-bootstrap accordion. One of my items contains a list that's sometimes rather long. I added overflowY: auto to the style in order to add a scroll bar in these cases. The scroll bar ...
0
votes
0
answers
50
views
How can I allow only one nav menu to be open at a time?
I have a navbar created using React-Bootstrap. It consists of both a main menu (always collapsed) and a dropdown menu.
If I click on the dropdown menu it opens. If I toggle the main menu while the ...
0
votes
0
answers
141
views
Bootstrap Utility Conflict with Tailwind
[Problem]
I'm using tailwind as my main style library in my react front-end project
meanwhile, I'm also using react-boostrap component such as { Modal, Form },
so I had to using on of the bootstrap ...
0
votes
0
answers
36
views
styling layout for a react app using react-bootstrap
I am working on my frontend UI. I am using react-bootstrap 0.33.1 which supportsbootstrap v3.3.x.
This is how my UI looks like right now.
But, this is not something that I am expecting. I want to ...
0
votes
0
answers
70
views
VS Code react-bootstrap quick import and snippet not showing
Why is my react-bootstrap snippets suddenly not showing? I was working on a project with React JS and the react-bootstrap element suggestions are displaying fine. However just recently, it stopped ...
1
vote
0
answers
281
views
I am getting error while importing Carousel from react-bootstrap
The error says "[plugin:vite:import-analysis] Failed to resolve import "components/ExampleCarouselImage" from "src/components/Carousel.jsx". Does the file exist?"
0
votes
0
answers
17
views
how to change the format date of the placeHolder of a formControl type date in react-bootstap
I use react-bootstrap and the formControl of type date.
<Form.Control
type="date"
value={selectedDate}
onChange={ChangeDate}
min={minDateISO}
...
0
votes
0
answers
29
views
react-paginate: Button text color issue when using Bootstrap button classes
I'm using the react-paginate 8.2.0 component in my React application along with Bootstrap for styling. I've encountered an issue with the pagination controls where the "Next/Previous" button ...
0
votes
0
answers
82
views
Remove the down arrow symbol for the Dropdown.Toggle in react-bootstrap
I am using dropdown menu where i am having a dropdown menu with icons of '@fortawesome/react-fontawesome'
now in the <Dropdown.Toggle> I am using three dots icon with that i can access the ...